/* ==========================================================================
   ALIGNER LOUNGE — Motion layer
   Animate transform / opacity / filter only. Reveal once, never re-trigger.
   ========================================================================== */

/* --- Scroll reveal backbone ------------------------------------------- */
.reveal{
  opacity:0;translate:0 38px;
  transition:opacity var(--dur-med) var(--ease-out),
             translate var(--dur-med) var(--ease-out),
             scale var(--dur-med) var(--ease-out);
}
.reveal.in{opacity:1;translate:0 0}

.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}
.reveal[data-delay="6"]{transition-delay:.54s}

.reveal--left{translate:-46px 0}
.reveal--right{translate:46px 0}
.reveal--scale{translate:0 0;scale:.94}
.reveal--scale.in{scale:1}
html[dir="rtl"] .reveal--left{translate:46px 0}
html[dir="rtl"] .reveal--right{translate:-46px 0}
.reveal--left.in,.reveal--right.in{translate:0 0}

/* --- Hero heading: words rise in sequence ------------------------------ */
.hero-word{display:inline-block;opacity:0;translate:0 100%;animation:wordUp .85s var(--ease-out) forwards}
.hero-word:nth-child(1){animation-delay:.08s}
.hero-word:nth-child(2){animation-delay:.18s}
.hero-word:nth-child(3){animation-delay:.28s}
.hero-word:nth-child(4){animation-delay:.38s}
.hero-word:nth-child(5){animation-delay:.48s}
.hero-word:nth-child(6){animation-delay:.58s}
.hero-word:nth-child(n+7){animation-delay:.66s}
@keyframes wordUp{to{opacity:1;translate:0 0}}
/* clip the rise */
.hero h1 .hero-line{display:block;overflow:hidden;padding-bottom:.08em}

.hero__fade{opacity:0;animation:fadeUp .9s var(--ease-out) forwards}
.hero__fade--1{animation-delay:.6s}
.hero__fade--2{animation-delay:.74s}
.hero__fade--3{animation-delay:.88s}
@keyframes fadeUp{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* --- Gold hairline draw ------------------------------------------------ */
.rule-draw{scale:0 1;transform-origin:inline-start;transition:scale 1s var(--ease-out)}
.rule-draw.in{scale:1 1}

/* --- Counters ---------------------------------------------------------- */
.stat__num[data-count]{font-variant-numeric:tabular-nums}

/* --- Marquee ----------------------------------------------------------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
html[dir="rtl"] .marquee__track{animation-direction:reverse}
@keyframes mq{to{translate:-50% 0}}
.marquee__item{
  display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;
  font-family:var(--f-display);font-size:clamp(1.125rem,2vw,1.625rem);
  color:var(--text-on-ink-muted);white-space:nowrap;
}
.marquee__item::after{content:"✦";color:var(--gold);font-size:.7em}

/* --- Parallax (decorative layers only, never text) --------------------- */
[data-plx]{will-change:transform}

/* --- Reduced motion: everything off ------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .reveal,.hero-word,.hero__fade,.rule-draw{
    opacity:1!important;translate:0 0!important;scale:1 1!important;animation:none!important;transition:none!important;
  }
  .marquee__track{animation:none}
  [data-plx]{transform:none!important;will-change:auto}
}