/* ===== Intro & motion layer ===== */
#loader{flex-direction:column;gap:22px;transition:clip-path 1s cubic-bezier(.77,0,.18,1),visibility 0s 1s;clip-path:inset(0 0 0 0);opacity:1!important}
#loader.done{clip-path:inset(0 0 100% 0);visibility:hidden;opacity:1!important}
#loader::after{content:"TIKTOK CONTENT";font-weight:900;letter-spacing:.32em;font-size:13px;color:var(--ink);opacity:0;animation:ldText .8s .2s var(--ease) forwards}
#loader::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--grad);animation:ldBar 1.6s var(--ease) forwards}
@keyframes ldText{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.32em}}
@keyframes ldBar{to{width:100%}}

/* Hold hero until intro is ready */
body:not(.ready) nav{transform:translate(-50%,-160%)!important}
nav{transition:transform .9s var(--ease)}
body:not(.ready) .hero .rv{opacity:0!important;transform:translateY(40px)!important;filter:blur(8px)}
body:not(.ready) .hero .split .w>span{transform:translateY(110%)!important}
body:not(.ready) .hero .blob{transform:scale(.4);opacity:0}
.hero .blob{transition:transform 1.8s var(--ease),opacity 1.8s}
body.ready .hero .blob{animation:float 14s ease-in-out 1.8s infinite}

.hero .pill{transition-delay:.05s!important}
.hero p.sub{transition-delay:.45s!important}
.hero .price-row{transition-delay:.6s!important}
.hero .cta-row{transition-delay:.75s!important}
.hero .checks{transition-delay:.9s!important}
.hero .flow{transition-delay:1s!important}

/* Phone flies in with 3D turn */
body.ready .hero-visual{animation:phoneIn 1.5s cubic-bezier(.16,1,.3,1) .25s both}
@keyframes phoneIn{0%{opacity:0;transform:perspective(1200px) translateY(120px) rotateX(18deg) rotateY(-22deg) scale(.82)}60%{opacity:1}100%{opacity:1;transform:none}}
body:not(.ready) .float-card{opacity:0}
body.ready .float-card{animation:popIn .9s cubic-bezier(.34,1.56,.64,1) both,bob 5s ease-in-out infinite}
body.ready .fc1{animation-delay:1.05s,1.95s}
body.ready .fc2{animation-delay:1.25s,2.15s}
body.ready .fc3{animation-delay:1.45s,2.35s}
@keyframes popIn{0%{opacity:0;transform:scale(.5) translateY(20px)}100%{opacity:1;transform:none}}

/* Softer, blur-in reveals everywhere */
.rv{filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rv.in{filter:none}
.split .w>span{filter:blur(6px);transition:transform 1s var(--ease),filter 1s var(--ease)}
.split.in .w>span{filter:none}
.eyebrow::before{transition:width .9s var(--ease) .25s}
.eyebrow.rv:not(.in)::before{width:0}

/* Images unveil with a clip wipe */
.gal figure.rv,.class-grid figure.rv,.ins-photo.rv .frame{clip-path:inset(14% 0 0 0 round 18px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease),clip-path 1.2s var(--ease)}
.gal figure.rv.in,.class-grid figure.rv.in,.ins-photo.rv.in .frame{clip-path:inset(0 0 0 0 round 18px)}
.class-grid figure.rv.in{clip-path:inset(0 0 0 0 round 26px)}
.ins-photo.rv.in .frame{clip-path:inset(0 0 0 0 round 32px)}

/* Section titles: underline sweep under italic word */
h2 em{background-size:200% auto}
.rcard.rv.in .img{animation:iconPop .9s cubic-bezier(.34,1.56,.64,1) .2s both}
@keyframes iconPop{0%{transform:scale(.6) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
.step.rv.in .num{animation:numIn 1s var(--ease) .15s both}
@keyframes numIn{0%{letter-spacing:.3em;opacity:0}100%{letter-spacing:-.04em;opacity:1}}

/* Parallax helpers */
.px{will-change:transform}

@media (prefers-reduced-motion:reduce){
  body:not(.ready) nav{transform:translateX(-50%)!important}
  body:not(.ready) .hero .rv,body:not(.ready) .float-card{opacity:1!important;transform:none!important;filter:none!important}
  .rv,.split .w>span{filter:none!important}
  .gal figure.rv,.class-grid figure.rv,.ins-photo.rv .frame{clip-path:none!important}
}