/* Anu motion kit — styles. Ported from anuagency.co (same timings, easing, depth). Pair with anu-motion.js. */
:root { --anu-spring: cubic-bezier(.22,1,.36,1); --anu-swift: cubic-bezier(.4,0,.2,1); }

/* 1. loader */
.anu-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 34px; background: #fff; clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.76,0,.24,1); animation: ldSafety 0s linear 4.5s forwards; cursor: pointer; }
.anu-loader::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 46%, rgba(28,47,75,.09), transparent 70%); }
.anu-loader.out { clip-path: inset(0 0 100% 0); }
@keyframes ldSafety { to { visibility: hidden; pointer-events: none; } }
.ld-stage { position: relative; width: min(46vw, 250px); aspect-ratio: 518 / 406.216; perspective: 700px; }
.ld-c { position: absolute; inset: 0; transform-style: preserve-3d; animation: ldSpin 2.1s var(--anu-spring) both; }
@keyframes ldSpin { 0% { transform: rotateY(-80deg) rotateX(30deg) scale(.72); } 45% { transform: rotateY(28deg) rotateX(-12deg) scale(.98); } 70% { transform: rotateY(-10deg) rotateX(6deg) scale(1.02); } 86% { transform: rotateY(0) rotateX(0) scale(1.07); } 100% { transform: none; } }
.ld-seg { position: absolute; inset: 0; transform-style: preserve-3d; animation: ldIn 1.25s var(--anu-spring) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes ldIn { 0% { transform: translate3d(var(--x), var(--y), var(--z)) rotateX(var(--rx)) rotateY(var(--ry)); } 100% { transform: none; } }
.ld-seg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--d) * -1.5px)); }
.ld-seg svg.face { fill: url(#ldFace); }
.ld-seg svg.sheen { fill: url(#ldSheen); transform: translateZ(.8px); pointer-events: none; }
.ld-halo { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; color: #1c2f4b; filter: blur(16px) saturate(1.2); transform: translateZ(-40px); opacity: .35; animation: ldHalo 1.1s var(--anu-spring) 1.25s forwards; pointer-events: none; }
.ld-halo2 { left: -3%; top: -3%; width: 106%; height: 106%; filter: blur(7px); transform: translateZ(-30px); }
@keyframes ldHalo { to { opacity: 1; } }
.ld-glow { position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(28,47,75,.42), rgba(28,47,75,.16) 42%, transparent 72%); opacity: .45; animation: ldGlow 1.2s ease 1.3s forwards; pointer-events: none; }
@keyframes ldGlow { to { opacity: 1; scale: 1.08; } }
.ld-shadow { position: absolute; left: 12%; right: 12%; bottom: -22%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8,9,11,.35), transparent); filter: blur(6px); animation: ldShadow 2.1s var(--anu-spring) both; pointer-events: none; }
@keyframes ldShadow { 0% { opacity: 0; scale: .4; } 60% { opacity: .7; scale: 1.1; } 100% { opacity: .85; scale: 1; } }
.ld-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 2px #d6b36a, 0 0 24px rgba(214,179,106,.6); opacity: 0; scale: .6; animation: ldRing .8s var(--anu-spring) 1.55s forwards; pointer-events: none; }
@keyframes ldRing { 0% { opacity: .9; scale: .6; } 100% { opacity: 0; scale: 1.5; } }
.ld-desc { position: relative; color: #4e525b; font-size: .74rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; opacity: 0; translate: 0 8px; animation: ldDesc .6s var(--anu-spring) 1.6s forwards; }
.ld-desc b { color: #b88f3e; font-weight: 600; }
@keyframes ldDesc { to { opacity: 1; translate: 0 0; } }

.anu-loader { font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif; }

/* 2. liquid hero: put <canvas data-anu-fluid> as the first child of a [data-anu-hero] */
[data-anu-hero] { position: relative; isolation: isolate; overflow: hidden; }
canvas[data-anu-fluid] { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: pan-y; }
@media (max-width: 760px) { [data-anu-hero]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8,9,11,.25), rgba(8,9,11,.55) 38%, rgba(8,9,11,.78) 70%, rgba(8,9,11,.88)); } }

/* 3. reveals */
.anu-reveal { opacity: 0; translate: 0 24px; transition: opacity .8s var(--anu-swift), translate 1s var(--anu-spring); }
.anu-reveal.on { opacity: 1; translate: 0 0; }

/* 4. stacking cards */
[data-anu-stack] > .anu-stacked { position: sticky; transform-origin: 50% 0%; backface-visibility: hidden; }
.anu-stk-dim { position: absolute; inset: 0; z-index: 60; border-radius: inherit; background: #08090b; opacity: 0; pointer-events: none; }
@media (min-width: 761px) { .anu-stk-dim { display: none; } }

/* 6. carousels (seamless: two identical tracks, rail moves -50%) */
.anu-mq { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.anu-mq__rail { display: flex; width: max-content; animation: anu-mq 46s linear infinite; }
.anu-mq--rev .anu-mq__rail { animation-direction: reverse; animation-duration: 58s; }
.anu-mq__track { display: flex; align-items: center; gap: clamp(48px, 5vw, 76px); margin: 0; padding: 0 clamp(48px, 5vw, 76px) 0 0; list-style: none; }
.anu-mq__track > li { flex: none; transition: transform .45s var(--anu-spring); }
.anu-mq__track > li:hover { transform: translateY(-3px); }
.anu-and span { display: inline-flex; align-items: center; gap: 12px; font-family: "Bodoni Moda", Didot, Georgia, serif; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-style: italic; font-weight: 500; white-space: nowrap; }
.anu-and span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b88f3e; box-shadow: 0 0 0 4px rgba(184,143,62,.14); }
@keyframes anu-mq { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .anu-mq__rail { animation-duration: 34s; } }

/* 7. press: instant feedback (added on pointerdown) */
a, button, [role=button] { -webkit-tap-highlight-color: transparent; }
.anu-pressed { transform: scale(.97); transition: transform .12s var(--anu-swift) !important; }

/* Reduce Motion (same rule as anuagency.co): same experience, less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ld-c { animation-name: ldCalm; animation-duration: 1.4s; }
  @keyframes ldCalm { 0% { transform: scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .ld-seg { animation-duration: .9s; }
  .anu-reveal { translate: 0 0; transition: opacity .6s var(--anu-swift); }
  .anu-mq__rail { animation-duration: 160s !important; }
  .anu-loop, .anu-loop::before, .anu-loop::after { animation: none !important; }
  .anu-pressed { transform: none; }
}