/*
 * Fliptum Theme — Phase 3 adaptive experience layer.
 * Motion is progressive enhancement: content stays visible and usable when JS,
 * animation, sound, reduced-motion, or save-data conditions disable effects.
 */

/* Accessible sound control */
.fliptum-sound-toggle {
	position: relative;
	isolation: isolate;
	color: var(--fliptum-color-text);
}
.fliptum-sound-toggle__on { display: none; }
.fliptum-sound-toggle__off { display: inline-flex; }
.fliptum-sound-toggle.is-enabled { color: var(--fliptum-color-primary); border-color: color-mix(in srgb, var(--fliptum-color-primary) 34%, var(--fliptum-color-border)); }
.fliptum-sound-toggle.is-enabled .fliptum-sound-toggle__on { display: inline-flex; }
.fliptum-sound-toggle.is-enabled .fliptum-sound-toggle__off { display: none; }
.fliptum-sound-toggle__meter {
	position: absolute;
	right: .2rem;
	bottom: .18rem;
	display: flex;
	align-items: end;
	gap: 1px;
	height: .55rem;
	pointer-events: none;
}
.fliptum-sound-toggle__meter i { display: block; width: 2px; height: 30%; border-radius: 999px; background: currentColor; opacity: .35; }
.fliptum-sound-toggle__meter i:nth-child(2) { height: 55%; }
.fliptum-sound-toggle__meter i:nth-child(3) { height: 80%; }
.fliptum-sound-toggle.is-enabled .fliptum-sound-toggle__meter i { opacity: .75; animation: fliptum-sound-meter .8s ease-in-out infinite alternate; }
.fliptum-sound-toggle.is-enabled .fliptum-sound-toggle__meter i:nth-child(2) { animation-delay: -.28s; }
.fliptum-sound-toggle.is-enabled .fliptum-sound-toggle__meter i:nth-child(3) { animation-delay: -.54s; }

@keyframes fliptum-sound-meter { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

/* Hero water field */
.fliptum-home-hero__visual { --fliptum-pointer-x: 0; --fliptum-pointer-y: 0; }
.fliptum-home-flow-ribbons,
.fliptum-water-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.fliptum-home-flow-ribbons span {
	position: absolute;
	left: 6%;
	top: 52%;
	width: 86%;
	height: 28%;
	border: clamp(1px, .16vw, 2px) solid color-mix(in srgb, var(--fliptum-color-primary) 31%, transparent);
	border-left-color: transparent;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: calc(var(--fliptum-water-opacity, .72) * .52);
	transform: rotate(-8deg);
}
.fliptum-home-flow-ribbons span:nth-child(2) { top: 58%; left: 1%; width: 94%; height: 22%; opacity: calc(var(--fliptum-water-opacity, .72) * .36); transform: rotate(5deg); border-color: color-mix(in srgb, var(--fliptum-color-secondary) 24%, transparent); }
.fliptum-home-flow-ribbons span:nth-child(3) { top: 39%; left: 14%; width: 75%; height: 34%; opacity: calc(var(--fliptum-water-opacity, .72) * .24); transform: rotate(-2deg); }

.fliptum-motion-ready[data-fliptum-motion="balanced"] .fliptum-home-flow-ribbons span,
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-flow-ribbons span {
	animation: fliptum-ribbon-breathe calc(var(--fliptum-wave-duration, 24s) * .58) ease-in-out infinite alternate;
}
.fliptum-motion-ready .fliptum-home-flow-ribbons span:nth-child(2) { animation-delay: -3.4s; animation-duration: calc(var(--fliptum-wave-duration, 24s) * .72); }
.fliptum-motion-ready .fliptum-home-flow-ribbons span:nth-child(3) { animation-delay: -6.1s; animation-duration: calc(var(--fliptum-wave-duration, 24s) * .84); }

@keyframes fliptum-ribbon-breathe {
	0% { translate: -1.2% 0; scale: .99 1; }
	100% { translate: 1.6% -2%; scale: 1.015 1.07; }
}

.fliptum-water-particle { position: absolute; left: var(--x); top: -5%; width: var(--size); height: calc(var(--size) * 4.5); border-radius: 999px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--fliptum-color-secondary) 58%, var(--fliptum-color-primary)), transparent); opacity: calc(var(--fliptum-water-opacity, .72) * .58); animation: fliptum-water-fall var(--duration) linear infinite; animation-delay: var(--delay); will-change: transform, opacity; }
@keyframes fliptum-water-fall { 0% { transform: translate3d(0,-16%,0) scaleY(.6); opacity: 0; } 14% { opacity: calc(var(--fliptum-water-opacity, .72) * .5); } 78% { opacity: calc(var(--fliptum-water-opacity, .72) * .32); } 100% { transform: translate3d(0,118vh,0) scaleY(1.25); opacity: 0; } }

/* Real continuous SVG wave drift. Each layer is duplicated inside the 2880-unit strip. */
.fliptum-home-wave { overflow: hidden; opacity: var(--fliptum-water-opacity, .72); }
.fliptum-home-wave svg { width: 200%; max-width: none; transform: translateX(0); }
.fliptum-home-wave__layer { transform-box: fill-box; transform-origin: left center; will-change: transform; }
.fliptum-motion-ready:not(.fliptum-motion-paused) .fliptum-home-wave__layer--back { animation: fliptum-wave-drift var(--fliptum-wave-duration, 24s) linear infinite; }
.fliptum-motion-ready:not(.fliptum-motion-paused) .fliptum-home-wave__layer--middle { animation: fliptum-wave-drift calc(var(--fliptum-wave-duration, 24s) * .78) linear infinite reverse; }
.fliptum-motion-ready:not(.fliptum-motion-paused) .fliptum-home-wave__layer--front { animation: fliptum-wave-drift calc(var(--fliptum-wave-duration, 24s) * .62) linear infinite; }
@keyframes fliptum-wave-drift { to { transform: translateX(-50%); } }

/* Pointer-depth presentation; values are JS controlled, with zero as safe default. */
.fliptum-motion-ready[data-fliptum-motion="balanced"] .fliptum-home-hero__product--1,
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-hero__product--1 { transform: translate3d(calc(var(--fliptum-pointer-x) * -7px * var(--fliptum-motion-depth, .78)), calc(var(--fliptum-pointer-y) * -5px * var(--fliptum-motion-depth, .78)), 0) rotate(-7deg); }
.fliptum-motion-ready[data-fliptum-motion="balanced"] .fliptum-home-hero__product--2,
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-hero__product--2 { transform: translate3d(calc(var(--fliptum-pointer-x) * 5px * var(--fliptum-motion-depth, .78)), calc(var(--fliptum-pointer-y) * -8px * var(--fliptum-motion-depth, .78)), 0); }
.fliptum-motion-ready[data-fliptum-motion="balanced"] .fliptum-home-hero__product--3,
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-hero__product--3 { transform: translate3d(calc(var(--fliptum-pointer-x) * 8px * var(--fliptum-motion-depth, .78)), calc(var(--fliptum-pointer-y) * 4px * var(--fliptum-motion-depth, .78)), 0) rotate(7deg); }
.fliptum-home-hero__product { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; will-change: transform; }
.fliptum-home-hero__product:hover { box-shadow: 0 1.8rem 3.8rem color-mix(in srgb, var(--fliptum-color-text) 18%, transparent); }

/* Section reveal only activates after JS adds fliptum-motion-ready, preventing invisible content if JS fails. */
.fliptum-motion-ready .fliptum-motion-reveal { opacity: 0; transform: translateY(calc(12px + var(--fliptum-reveal-index, 0) * 2px)); transition: opacity .58s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.fliptum-motion-ready .fliptum-motion-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Rich mode card depth remains intentionally tiny for a professional publishing UI. */
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-book,
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-gallery-card,
.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-tool {
	transform: perspective(900px) rotateX(var(--fliptum-tilt-x, 0deg)) rotateY(var(--fliptum-tilt-y, 0deg));
	transform-style: preserve-3d;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Pause state is used when the tab is backgrounded. */
.fliptum-motion-paused *,
.fliptum-motion-paused *::before,
.fliptum-motion-paused *::after { animation-play-state: paused !important; }

/* Save-data / low-resource JS mode. */
.fliptum-motion-ready[data-fliptum-motion="light"] .fliptum-home-flow-ribbons span:nth-child(n+3),
.fliptum-motion-ready[data-fliptum-motion="minimal"] .fliptum-home-flow-ribbons,
.fliptum-motion-ready[data-fliptum-motion="minimal"] .fliptum-water-particles { display: none; }
.fliptum-motion-ready[data-fliptum-motion="light"] .fliptum-home-wave__layer--back { animation-duration: calc(var(--fliptum-wave-duration, 24s) * 1.45); }

@media (max-width: 42rem) {
	.fliptum-water-particle { display: none; }
	.fliptum-home-flow-ribbons span:nth-child(3) { display: none; }
	.fliptum-home-wave { opacity: min(var(--fliptum-water-opacity, .72), .62); }
	.fliptum-sound-toggle__meter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fliptum-home-wave__layer,
	.fliptum-home-flow-ribbons span,
	.fliptum-water-particle,
	.fliptum-sound-toggle__meter i { animation: none !important; }
	.fliptum-motion-ready .fliptum-motion-reveal { opacity: 1; transform: none; transition: none; }
	.fliptum-home-hero__product,
	.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-book,
	.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-gallery-card,
	.fliptum-motion-ready[data-fliptum-motion="rich"] .fliptum-home-tool { transform: none; transition: none; }
}

/* Phase 15 — subtle pointer interaction for Fliptum frontend cards. */
.fliptum-hover-surface{position:relative;isolation:isolate;transform-style:preserve-3d;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.fliptum-hover-surface:after{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fliptum-hover-x,50%) var(--fliptum-hover-y,50%),color-mix(in srgb,var(--fliptum-color-primary) 13%,transparent),transparent 42%);transition:opacity .2s ease}.fliptum-hover-surface:hover{transform:perspective(1100px) rotateX(var(--fliptum-hover-rx,0deg)) rotateY(var(--fliptum-hover-ry,0deg)) translateY(-3px);box-shadow:0 1rem 2.4rem color-mix(in srgb,var(--fliptum-color-primary) 10%,transparent)}.fliptum-hover-surface:hover:after{opacity:1}.fliptum-hover-surface img{transition:transform .28s ease}.fliptum-hover-surface:hover img{transform:scale(1.018)}@media(prefers-reduced-motion:reduce){.fliptum-hover-surface,.fliptum-hover-surface img{transition:none!important;transform:none!important}.fliptum-hover-surface:after{display:none}}