/* ================================================================
   MOTION LAYER — optical, never bouncy: bloom, rise, draw, sheen, drift.
   Loaded last. Everything is switched off under prefers-reduced-motion.
   ================================================================ */
:root{--m-ease:cubic-bezier(.2,.7,.1,1);--m-soft:cubic-bezier(.4,0,.2,1)}

@media (prefers-reduced-motion:no-preference){

/* ---------- split headlines: words rise out of a mask ---------- */
.wsplit{background:none!important;filter:none!important}
.wsplit .dim{background:none!important}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;padding-bottom:.08em;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F4F4 30%,#A9A9A9 55%,#E2E2E2 72%,#8E8E8E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wi--dim{background:linear-gradient(180deg,#9A9A9A 0%,#5E5E5E 60%,#7C7C7C 100%);-webkit-background-clip:text;background-clip:text}
.st-after .wi--dim{background:linear-gradient(180deg,#9A9A9A 0%,#5E5E5E 60%,#7C7C7C 100%);-webkit-background-clip:text;background-clip:text}
.reveal .wi{transform:translateY(112%)}
.reveal.in .wi{transform:none;transition:transform 1.05s var(--m-ease) calc(var(--i,0) * 70ms + 80ms)}
.wsplit--load .wi{animation:word-up 1.15s var(--m-ease) calc(var(--i,0) * 85ms + var(--d0,200ms)) both}
@keyframes word-up{from{transform:translateY(112%)}to{transform:none}}

/* ---------- PORTRAIT HERO: build-in sequence ---------- */
.hp-word.split-letters{background:none!important}
.hp-word .ch{display:inline-block;
  background:linear-gradient(180deg,#FFFFFF 0%,#BDBDBD 30%,#4A4A4A 70%,#0B0B0B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:letter-in 1.3s var(--m-ease) calc(var(--i,0) * 55ms + 150ms) both}
@keyframes letter-in{from{opacity:0;transform:translateY(38%) scale(.96);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero--portrait .hp-figure{animation:figure-in 1.8s var(--m-ease) .35s both}
@keyframes figure-in{from{opacity:0;transform:translateY(40px) scale(1.035);filter:blur(14px) brightness(.35)}to{opacity:1;transform:none;filter:none}}
.hero--portrait .hp-shadow{animation:shadow-in 2.2s var(--m-ease) .7s both}
@keyframes shadow-in{from{opacity:0;transform:translate(-2%,1%) skewX(2deg) scale(1)}to{opacity:.75}}
.hero--portrait .hp-beam{animation:beam-on 2.4s steps(1,end) .2s both,beam-breathe 9s ease-in-out 2.6s infinite}
@keyframes beam-on{0%{opacity:0}12%{opacity:.6}16%{opacity:.1}24%{opacity:.85}30%{opacity:.3}40%,100%{opacity:1}}
@keyframes beam-breathe{0%,100%{opacity:1}50%{opacity:.7}}
.hero--portrait .hp-glow{animation:glow-breathe 10s ease-in-out infinite}
@keyframes glow-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.04)}}
.hero--portrait .hp-copy > .badge{animation:rise .9s var(--m-ease) .55s both}
.hero--portrait .hp-copy > .hero-sub{animation:rise .9s var(--m-ease) 1.05s both}
.hero--portrait .hp-copy > .hero-ctas{animation:rise .9s var(--m-ease) 1.2s both}
.hero--portrait .hp-copy > .hp-meta{animation:rise .9s var(--m-ease) 1.35s both}
/* parallax uses the independent `translate` property so it never fights the keyframes */
.hp-figure{translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -8px);transition:translate .9s var(--m-ease)}
.hp-word{translate:calc(var(--px,0) * 20px) calc(var(--py,0) * 6px);transition:translate 1.1s var(--m-ease)}
.hp-glow{translate:calc(var(--px,0) * -34px) calc(var(--py,0) * -20px);transition:translate 1.2s var(--m-ease)}

/* ---------- SLIDER HERO ---------- */
.hero--proof .hero-proof{translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -6px);transition:translate .9s var(--m-ease)}
.hero--proof .proof-glow{animation:glow-breathe 10s ease-in-out infinite}
.hero--proof .rating-chip{animation:rise .9s var(--m-ease) 1.1s both}

/* ---------- silver buttons catch the light every few seconds ---------- */
.btn--primary::after{animation:sheen 7.5s var(--m-soft) 2.8s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}13%,100%{transform:translateX(120%)}}
.btn--primary .arr{transition:transform .35s var(--m-ease)}
.btn--primary:hover .arr{transform:translate(2px,-2px) rotate(-8deg)}
.btn--ghost:hover{transform:translateY(-1px)}
.btn{transition:background var(--t-fast) var(--ease),border-color var(--t-fast),box-shadow var(--t-fast),transform .35s var(--m-ease)}

/* ---------- staggered reveals (delay set per item by motion.js) ---------- */
.reveal{transition:opacity .9s var(--m-ease),transform .9s var(--m-ease),filter .9s var(--m-ease)}
.reveal:not(.in){filter:blur(6px)}

/* ---------- cursor spotlight on cards ---------- */
.spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .45s var(--m-soft);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.075),transparent 45%)}
.price-card--hi .spot{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light}
:is(.tile,.price-card,.q,.cw-card,.panel):hover > .spot{opacity:1}

/* ---------- bento micro-motion ---------- */
.chip-row{animation:chip-drift 16s ease-in-out infinite alternate}
.chip-row.off{animation-direction:alternate-reverse;animation-duration:19s}
@keyframes chip-drift{to{transform:translateX(-36px)}}
.bento .tile.reveal:not(.in) .chart-line{animation-play-state:paused}
.chart-dot{animation:dot-pulse 2.6s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.reveal .sc{opacity:0;translate:0 28px}
.reveal.in .sc{opacity:1;translate:0 0;transition:opacity .8s var(--m-ease),translate 1s var(--m-ease)}
.reveal.in .sc1{transition-delay:.15s}.reveal.in .sc2{transition-delay:.3s}.reveal.in .sc3{transition-delay:.45s}
.cursor{animation:tap 3.2s var(--m-soft) infinite}
@keyframes tap{0%,70%,100%{translate:0 0}80%{translate:-5px -4px}88%{translate:0 0}}
.app{animation:float-y 6s ease-in-out infinite}
.app:nth-child(2){animation-delay:-2s}.app:nth-child(3){animation-delay:-4s}
@keyframes float-y{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* ---------- pricing: the silver card glints ---------- */
.price-card--hi{overflow:hidden}
.price-card--hi::before{content:"";position:absolute;inset:-20% -60%;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-70%);animation:card-glint 9s var(--m-soft) 3s infinite}
@keyframes card-glint{0%{transform:translateX(-70%)}12%,100%{transform:translateX(70%)}}
.price-card--hi > *:not(.spot){position:relative;z-index:1}

/* ---------- FAQ answers ease open ---------- */
.faq details[open] p{animation:faq-open .55s var(--m-ease) both}
@keyframes faq-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq summary::after{transition:transform .45s var(--m-ease),background .3s}

/* ---------- final CTA stars spin slowly ---------- */
.final-card .s{animation:float 10s var(--ease) infinite,spin-slow 40s linear infinite}
@keyframes spin-slow{to{rotate:360deg}}

/* ---------- client wall: after photo breathes in on hover ---------- */
.cw-ph:last-child img{transition:transform 900ms var(--m-ease),filter 900ms var(--m-ease)}
.cw-card:hover .cw-ph:last-child img{filter:brightness(1.08) contrast(1.04)}

/* ---------- scroll progress line ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,rgba(255,255,255,.2),#fff 60%,#cfcfcf);box-shadow:0 0 12px rgba(255,255,255,.5)}
}

/* reduced motion: show everything immediately */
@media (prefers-reduced-motion:reduce){
  .progress{display:none}
}