/* ============================================================
   Liliia — motion layer
   1. JS class-triggered reveals: word rise, stagger, mask wipes, counters
   2. Native scroll-driven timelines for parallax and the progress bar,
      behind @supports so other browsers get static imagery
   Everything collapses under prefers-reduced-motion.
   ============================================================ */
:root{--ease:cubic-bezier(.2,.75,.2,1)}

/* progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:linear-gradient(90deg,var(--plum),var(--rose),var(--gold));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){.progress{animation:progressGrow linear both;animation-timeline:scroll(root block)}}
@keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* word rise */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .w > i{display:inline-block;font-style:inherit;color:inherit;transform:translateY(110%) rotate(3deg);opacity:0}
.js .in .w > i,.js .w.in > i{animation:wordRise 1s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes wordRise{from{transform:translateY(110%) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
/* the reveal host itself should not also fade when it holds split text */
.js .rv[data-split],.js .rv:has(> [data-split]){opacity:1;transform:none}

/* staggered children */
.js .stag > *{opacity:0;transform:translateY(26px)}
.js .stag.in > *{animation:stagIn .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes stagIn{to{opacity:1;transform:none}}
.js .stag.rv{opacity:1;transform:none}

/* phone frames tilt in */
.js .frames > .frame,.js .cases > .case{opacity:0;transform:translateY(40px) rotate(2deg)}
.js .frames.in > .frame,.js .cases.in > .case{animation:frameIn 1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes frameIn{to{opacity:1;transform:none}}

/* image mask wipes */
.js .mask{clip-path:inset(0 0 100% 0)}
.js .mask.in{animation:maskUp 1.25s var(--ease) both}
@keyframes maskUp{to{clip-path:inset(0 0 0 0)}}
.js .mask-l{clip-path:inset(0 100% 0 0)}
.js .mask-l.in{animation:maskRight 1.3s var(--ease) both}
@keyframes maskRight{to{clip-path:inset(0 0 0 0)}}

/* counters pop */
.js .num b{opacity:0;transform:translateY(24px)}
.js .num.in b{animation:numPop .9s var(--ease) both}
@keyframes numPop{to{opacity:1;transform:none}}

/* hero load sequence */
.js .hero__eyebrow,.js .hero__sub,.js .hero__acts,.js .hero__chip{opacity:0;transform:translateY(18px)}
.js.hero-in .hero__eyebrow{animation:stagIn .9s var(--ease) .1s both}
.js.hero-in .hero__sub{animation:stagIn .9s var(--ease) .55s both}
.js.hero-in .hero__acts{animation:stagIn .9s var(--ease) .7s both}
.js.hero-in .hero__chip{animation:stagIn .9s var(--ease) 1.1s both}

/* ---------- native scroll-driven parallax ---------- */
.hero__fig,.who__fig,.story__photo,.method__fig,.about__fig,.band,.results__pics{overflow:hidden}
.who__fig img,.story__photo img,.method__fig img,.about__fig img{display:block}
@supports (animation-timeline:view()){
  .hero__fig img{animation:heroPar linear both;animation-timeline:view(block);animation-range:entry 0% exit 100%}
  @keyframes heroPar{from{transform:scale(1.14) translateY(-4%)}to{transform:scale(1.14) translateY(6%)}}
  .hero__grid > div:first-child{animation:heroLift linear both;animation-timeline:view(block);animation-range:exit 0% exit 100%}
  @keyframes heroLift{from{transform:none;opacity:1}to{transform:translateY(-60px);opacity:.1}}
  .band img,.who__fig img,.method__fig img,.about__fig img,.story__photo img{animation:mediaPar linear both;animation-timeline:view(block);animation-range:cover 0% cover 100%}
  @keyframes mediaPar{from{transform:translateY(-7%) scale(1.14)}to{transform:translateY(7%) scale(1.14)}}
  .results__pics img:last-child{animation:mediaParSlow linear both;animation-timeline:view(block);animation-range:cover 0% cover 100%}
  @keyframes mediaParSlow{from{transform:translateY(24px) scale(1.04)}to{transform:translateY(-24px) scale(1.04)}}
  .band__cap{animation:capIn linear both;animation-timeline:view(block);animation-range:entry 20% cover 55%}
  @keyframes capIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .step__n{animation:numDrift linear both;animation-timeline:view(block);animation-range:entry 0% exit 100%}
  @keyframes numDrift{from{transform:translateY(16px)}to{transform:translateY(-16px)}}
}

/* ---------- micro-interactions ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--rose);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.btn--fill::before{background:color-mix(in srgb,var(--plum) 70%,var(--rose))}
.btn:hover::before{transform:scaleX(1)}
.btn--ghost:hover{color:var(--ink)}
.btn__dot{transition:transform .5s var(--ease)}
.btn:hover .btn__dot{transform:scale(2.4)}
.nav__links a{transition:color .3s,transform .4s var(--ease)}
.nav__links a:hover{transform:translateY(-2px)}
.offer{transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s}
.offer:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--rose)}
.frame img{transition:transform .6s var(--ease)}
.frame:hover img{transform:translateY(-6px) rotate(-1deg)}
.ask li{transition:padding-left .5s var(--ease),color .4s}
.ask li:hover{padding-left:42px;color:var(--plum)}
.tq{transition:transform .6s var(--ease),border-color .5s}
.tq:hover{transform:translateY(-3px);border-color:var(--rose)}
.city img{transition:transform .9s var(--ease)}
.city:hover img{transform:scale(1.05)}
.field input,.field select,.field textarea{transition:border-color .4s,box-shadow .4s}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 35%,transparent)}
.sig__name{display:inline-block;transition:letter-spacing .8s var(--ease)}
.sig:hover .sig__name{letter-spacing:.02em}

/* ---------- reduced motion: static, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  .js .w > i,.js .stag > *,.js .frames > .frame,.js .cases > .case,.js .num b,.js .hero__eyebrow,.js .hero__sub,.js .hero__acts,.js .hero__chip{opacity:1 !important;transform:none !important;animation:none !important}
  .js .mask,.js .mask-l{clip-path:none !important;animation:none !important}
  .hero__fig img,.hero__grid > div:first-child,.band img,.who__fig img,.method__fig img,.about__fig img,.story__photo img,.results__pics img,.band__cap,.step__n{animation:none !important;transform:none !important;opacity:1 !important}
  .btn::before{transition:none}
  .offer:hover,.tq:hover,.frame:hover img{transform:none}
}

/* ---------- mobile: keep reveals, soften parallax ---------- */
@media (max-width:760px){
  @supports (animation-timeline:view()){
    @keyframes mediaPar{from{transform:translateY(-2.5%) scale(1.06)}to{transform:translateY(2.5%) scale(1.06)}}
    @keyframes heroPar{from{transform:scale(1.06) translateY(-1.5%)}to{transform:scale(1.06) translateY(2%)}}
    .hero__grid > div:first-child{animation:none}
  }
  .js .in .w > i{animation-delay:calc(var(--i,0) * 30ms)}
  .js .stag.in > *{animation-delay:calc(var(--i,0) * 60ms)}
  .js .frames.in > .frame{animation-delay:calc(var(--i,0) * 60ms)}
}
@media (hover:none){
  .btn::before{display:none}
  .offer:hover,.tq:hover,.frame:hover img{transform:none}
  .ask li:hover{padding-left:34px;color:inherit}
}