/* fx.css: homepage motion layer. Loaded on index only. Every rule is gated on
   html.fx (set only when prefers-reduced-motion is not reduce) or is a static
   layout for elements that also exist without JS. */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* hero */
.hero-id .btn-sm{display:none;padding:.62em 1.05em;font-size:14px;margin-left:auto}
.hero{position:relative;isolation:isolate;overflow:hidden}
.flow{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 95% at 82% 22%,#000 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.12) 100%);
          mask-image:radial-gradient(120% 95% at 82% 22%,#000 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.12) 100%)}
.hero h1{max-width:none;position:relative;font-size:clamp(40px,7.3vw,104px)}
.fx .hero h1{animation:h1Rise 1s var(--ease) .1s backwards}
@keyframes h1Rise{from{opacity:0;transform:translateY(.18em)}to{opacity:1;transform:none}}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hero-cta .btn{padding:15px 30px;font-size:16px}
.hero-cta .ghost{font-size:14px;letter-spacing:.04em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--orange);padding-bottom:3px;transition:color .2s,border-color .2s}
.hero-cta .ghost:hover{color:var(--orange)}
.fx .hero-id,.fx .hero-copy,.fx .hero-manifest{animation-duration:1s;animation-timing-function:var(--ease)}


/* status meters fill on arrival */
.fx .status-strip .meter i{clip-path:inset(0 100% 0 0)}
.fx .status-strip.in .meter i{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease) .2s}
.fx .status-strip.in .tile:nth-child(2) .meter i{transition-delay:.3s}
.fx .status-strip.in .tile:nth-child(3) .meter i{transition-delay:.4s}
.fx .status-strip.in .tile:nth-child(4) .meter i{transition-delay:.5s}

/* heading mask reveal */
.h2m{display:inline-block;vertical-align:top}
.h2i{display:inline-block}
.fx .h2i{opacity:0;transform:translateY(.3em)}
.fx .in .h2i,.fx .h2m.in .h2i{opacity:1;transform:none;transition:transform 1s var(--ease),opacity .8s var(--ease)}


/* work cards: framed image, clip reveal, parallax */
.wc-frame{position:relative;overflow:hidden;display:block;cursor:pointer}
.wc-frame img{display:block;width:100%;height:auto;transform:scale(1.06);will-change:transform;transition:filter .4s}
.fx .work-card.pre .wc-frame{clip-path:inset(0 0 100% 0)}
.fx .work-card.arrived .wc-frame{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease)}
.work-card:hover .wc-frame img{filter:contrast(1.04) saturate(1.06)}
.bubble{position:fixed;left:0;top:0;z-index:90;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;
  background:var(--orange);color:#17191a;display:grid;place-items:center;pointer-events:none;
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transform:translate3d(-200px,-200px,0) scale(0);transition:scale .35s var(--ease);will-change:transform}
.bubble.on{scale:1}

#hire .band-head{align-items:center}


/* hire cards lift */
.hire-card{transition:transform .5s var(--ease),border-color .3s}
@media (hover:hover){.hire-card:hover{transform:translateY(-6px)}}

@media (prefers-reduced-motion: reduce){
  .bubble{display:none}
}
@media (max-width:700px){
  .hero-cta .btn{display:none}
  .hero-id .btn-sm{display:inline-flex}
  #hire .band-head{gap:14px}
}