/* ============================================================
   AwanioAI — motion.css
   Styles for the cinematic motion layer
   ============================================================ */

/* ---------- aurora background (site-wide) ---------- */
html{background:var(--bg)}
body{background:transparent}
#aw-aurora{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;
  pointer-events:none;
}
/* vignette + grain for depth */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(5,5,9,.55) 100%),
    radial-gradient(100% 100% at 50% 100%, transparent 55%, rgba(5,5,9,.5) 100%);
}
body::after{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:aw-grain 9s steps(10) infinite;
}
@keyframes aw-grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,2%)}
  30%{transform:translate(2%,-4%)} 50%{transform:translate(-4%,-2%)}
  70%{transform:translate(3%,3%)}  90%{transform:translate(-2%,4%)}
}
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }

/* ============================================================
   AMBIENT VIDEO LAYERS  ([data-video] → .vbg injected by motion.js)
   ============================================================ */
[data-video]{position:relative;overflow:clip}
[data-video] > *:not(.vbg){position:relative;z-index:1}
.vbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.vbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbg-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,12,.18),rgba(8,8,12,.5))}
/* media tiles: video fully replaces the striped placeholder */
[data-video] .ph-label,
.ph[data-video] > .ph-label{display:none}
.ph[data-video]{background:none}
/* card media: gentle zoom on hover */
.work-card [data-video] video,.hpin-card [data-video] video,.post-media[data-video] video{transition:transform 1.2s var(--ease)}
.work-card:hover [data-video] video,.hpin-card:hover [data-video] video,.post-media[data-video]:hover video{transform:scale(1.06)}
/* hero ambient layer: soft, masked, blended under the orb */
.hero-vfx{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-vfx .vbg video{opacity:.78;filter:saturate(1.12)}
.hero-vfx .vbg-scrim{background:radial-gradient(85% 75% at 50% 45%,transparent 42%,rgba(8,8,12,.78) 100%),linear-gradient(180deg,rgba(8,8,12,.4),transparent 26%,transparent 64%,rgba(8,8,12,.85))}
/* footer CTA ambient */
.footer-cta .vbg video{opacity:1}
.footer-cta .vbg-scrim{background:linear-gradient(180deg,rgba(8,8,12,.32),transparent 35%,transparent 70%,rgba(8,8,12,.45))}
/* split/feature panel */
.vbg.panel video{opacity:.9}
.vbg.panel + * {position:relative;z-index:1}
/* page-hero ambient (subpages) */
.page-hero .vbg video{opacity:.72;filter:saturate(1.1)}
.page-hero .vbg-scrim{background:linear-gradient(180deg,rgba(8,8,12,.5),rgba(8,8,12,.2) 45%,rgba(8,8,12,.85) 100%)}
/* full-bleed ambient band (marquee / stats / manifesto / testimonials / 404 / pricing) */
.vbg.band video{opacity:.42;filter:saturate(1.12)}
.vbg.band .vbg-scrim{background:radial-gradient(90% 100% at 50% 50%,rgba(8,8,12,.15) 0%,rgba(8,8,12,.65) 100%)}

/* ============================================================
   HERO X — full-viewport kinetic typography + orb
   ============================================================ */
.hero-x{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(120px,14vh,170px) 0 40px;overflow:clip;
}
#aw-orb{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
/* cursor-reactive hero glows */
.hero-glow{
  position:absolute;top:0;left:0;width:540px;height:540px;border-radius:50%;
  z-index:1;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(124,108,245,.4) 0%,rgba(124,108,245,.12) 38%,transparent 70%);
  mix-blend-mode:screen;filter:blur(6px);
}
.hero-glow.alt{
  width:780px;height:780px;
  background:radial-gradient(circle,rgba(34,211,166,.22) 0%,rgba(34,211,166,.07) 40%,transparent 70%);
}
.hero-x .container{position:relative;z-index:2}
.hero-x-inner{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
/* soft dark pocket behind the hero copy — lifts text off the bright footage */
.hero-x-inner::before{
  content:"";position:absolute;inset:-14% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 54% at 50% 46%,rgba(5,5,9,.78) 0%,rgba(5,5,9,.5) 52%,rgba(5,5,9,.18) 72%,transparent 86%);
  filter:blur(18px);
}
/* shadow only on solid text — transparent-fill words (outline/gradient) get murky
   because text-shadow shows THROUGH the glyphs; use outer drop-shadow instead */
.hero-x-title{text-shadow:0 3px 34px rgba(5,5,9,.85)}
.hx-outline,.hx-grad{text-shadow:none}
.hero-x .hero-badge{background:rgba(8,8,12,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.18);color:#e3e3ee}
.hero-x .hero-meta{color:#cdcdda;text-shadow:0 1px 16px rgba(5,5,9,.9)}

.hero-x-title{
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(3rem,9.5vw,8.6rem);line-height:.98;margin:30px 0 30px;
  text-wrap:balance;
}
/* visible end-state is the BASE style; we animate FROM hidden so any context
   where the animation doesn't run (capture, print, throttled tab) still shows the headline */
.hx-line{display:block;overflow:hidden;padding:.04em .14em}
.hx-line > span{display:inline-block;transform:translateY(0)}
@media (prefers-reduced-motion:no-preference){
  .aw-ready .hx-line > span{animation:hx-up 1.1s var(--ease) backwards}
  .aw-ready .hx-line:nth-child(2) > span{animation-delay:.12s}
  .aw-ready .hx-line:nth-child(3) > span{animation-delay:.24s}
}
@keyframes hx-up{from{transform:translateY(115%)}to{transform:translateY(0)}}

/* outlined ghost word */
.hx-outline{
  color:transparent;
  -webkit-text-stroke:1.6px rgba(250,250,255,.95);
  text-stroke:1.6px rgba(250,250,255,.95);
  filter:drop-shadow(0 3px 12px rgba(5,5,9,.75));
}
/* gradient shimmer word — crisp, no haze */
.hx-grad{
  background:linear-gradient(110deg,#d6ccff 5%,#8df8dd 40%,#c0b3ff 70%,#d6ccff 95%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hx-shimmer 5s linear infinite;
  filter:drop-shadow(0 4px 14px rgba(5,5,9,.7));
}
@keyframes hx-shimmer{to{background-position:-220% 0}}

.hero-x .hero-sub{max-width:56ch;margin:0 auto 36px;color:#edecf6;text-shadow:0 1px 22px rgba(8,8,12,.85),0 0 2px rgba(8,8,12,.6)}
.hero-x .hero-actions{justify-content:center;margin-bottom:42px}
.hero-x .hero-meta{justify-content:center}

/* scroll cue */
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}
.scroll-cue .wheel{
  width:1px;height:44px;background:linear-gradient(var(--ink) 0 0) no-repeat;
  background-size:100% 30%;background-color:rgba(255,255,255,.12);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{0%{background-position:0 -40px}70%,100%{background-position:0 60px}}

/* ============================================================
   GIANT VELOCITY MARQUEE
   ============================================================ */
.vmq-wrap{padding:clamp(40px,6vw,90px) 0;overflow:clip;display:grid;gap:6px}
.vmq{overflow:clip;white-space:nowrap}
.vmq-track{
  display:inline-flex;align-items:baseline;will-change:transform;
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(3.4rem,8.5vw,8rem);line-height:1.05;
}
.vmq-track .wd{padding:0 .35em;color:var(--ink)}
.vmq-track .wd.o{
  color:transparent;
  -webkit-text-stroke:1.3px rgba(245,245,250,.4);
}
.vmq-track .sep{color:var(--violet-2);font-size:.5em;transform:translateY(-.4em)}
.vmq.dim .vmq-track .wd{color:rgba(245,245,250,.16)}
.vmq.dim .vmq-track .wd.o{-webkit-text-stroke-color:rgba(245,245,250,.18)}
.vmq.dim .vmq-track .sep{color:rgba(124,108,245,.4)}

/* ============================================================
   STICKY STACK CARDS (services)
   ============================================================ */
.stack{display:grid;gap:26px}
.stack-card{
  position:sticky;
  background:rgba(14,14,21,.86);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);
  align-items:center;min-height:340px;
  transform-origin:top center;will-change:transform,filter;
  overflow:hidden;
}
.stack-card:nth-child(1){top:calc(86px + 0px)}
.stack-card:nth-child(2){top:calc(86px + 18px)}
.stack-card:nth-child(3){top:calc(86px + 36px)}
.stack-card:nth-child(4){top:calc(86px + 54px)}
.stack-card:nth-child(5){top:calc(86px + 72px)}
.stack-card:nth-child(6){top:calc(86px + 90px)}
.stack-card .sc-no{
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.25em;
  color:var(--violet-bright,#bcaffd);text-shadow:0 0 18px rgba(188,175,253,.6);
  margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.stack-card .sc-no::after{content:"";height:1.5px;width:54px;background:var(--grad-bright,var(--grad));opacity:.9;box-shadow:0 0 10px rgba(154,139,255,.5)}
.stack-card h3{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em;margin-bottom:14px}
.stack-card h3 a{color:inherit}
.stack-card p{color:var(--ink-2);max-width:48ch;margin-bottom:22px}
.stack-card .sc-vis{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;border-radius:var(--radius);
  background:
    radial-gradient(80% 80% at 60% 30%,rgba(124,108,245,.22),transparent 70%),
    radial-gradient(70% 70% at 30% 80%,rgba(34,211,166,.14),transparent 70%),
    rgba(255,255,255,.02);
  border:1px solid var(--line);overflow:hidden;
}
.stack-card .sc-vis .ico{font-size:0}
.stack-card .sc-vis .ico svg{width:74px;height:74px;stroke:var(--violet-2)}
.stack-card .sc-vis .ring{
  position:absolute;border:1px solid rgba(154,139,255,.16);border-radius:50%;
  animation:sc-spin 26s linear infinite;
}
.stack-card .sc-vis .ring.r1{width:62%;aspect-ratio:1;border-style:dashed}
.stack-card .sc-vis .ring.r2{width:92%;aspect-ratio:1;animation-duration:44s;animation-direction:reverse}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@media (max-width:880px){
  .stack-card{grid-template-columns:1fr;min-height:0}
  .stack-card .sc-vis{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stack-card{position:static}
}

/* ============================================================
   HORIZONTAL PINNED WORK SECTION
   ============================================================ */
.hpin{position:relative}
.hpin-sticky{
  position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:clip;gap:clamp(28px,4vh,56px);
  padding:clamp(80px,10vh,110px) 0 40px;
}
.hpin-track{
  display:flex;gap:clamp(20px,2.5vw,36px);will-change:transform;
  padding-left:max(24px,calc((100vw - var(--container))/2 + 24px));
  padding-right:8vw;width:max-content;
}
.hpin-card{
  position:relative;flex:none;width:clamp(320px,38vw,560px);
  border-radius:var(--radius-lg);border:1px solid var(--line-2);
  background:rgba(14,14,21,.8);backdrop-filter:blur(10px);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .4s;
}
.hpin-card:hover{border-color:rgba(154,139,255,.45)}
.hpin-card .hp-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.hpin-card .hp-media .ph{position:absolute;inset:0;border-radius:0;border:none}
.hpin-card .hp-body{padding:24px 26px 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hpin-card h3{font-size:1.3rem;letter-spacing:-.01em;margin-bottom:10px}
.hpin-card .work-tags{display:flex;gap:8px;flex-wrap:wrap}
.hpin-card .hp-idx{
  position:absolute;top:18px;left:20px;z-index:2;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--ink);
  background:rgba(8,8,12,.55);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:100px;padding:.35rem .8rem;
}
.hpin-card .work-arrow{flex:none}
.hpin-cta{
  align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,rgba(124,108,245,.16),rgba(34,211,166,.08)),rgba(14,14,21,.8);
  display:flex;gap:22px;flex-direction:column;padding:40px;
}
.hpin-cta h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
/* progress line */
.hpin-progress{height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
  width:min(var(--container),calc(100% - 48px));margin:0 auto}
.hpin-progress i{display:block;height:100%;background:var(--grad);
  width:calc(var(--hp,0)*100%);transition:width .1s linear}
@media (max-width:880px){
  .hpin{height:auto !important}
  .hpin-sticky{position:static;min-height:0;overflow-x:auto;padding-bottom:60px}
  .hpin-track{transform:none !important;overflow-x:auto;width:auto;
    padding-left:24px;padding-right:24px;-webkit-overflow-scrolling:touch}
  .hpin-card{width:min(84vw,460px)}
  .hpin-progress{display:none}
}

/* stats band: let the footage breathe through the glass cards */
[data-screen-label="Stats"] .vbg video{opacity:1;filter:saturate(1.15)}
[data-screen-label="Stats"] .vbg-scrim{background:linear-gradient(180deg,rgba(8,8,12,.35),rgba(8,8,12,.18) 50%,rgba(8,8,12,.4))}

/* scroll-rotate stage */
[data-scrollrotate]{will-change:transform,opacity}
.stage-x{position:relative;z-index:2;margin-top:clamp(48px,7vh,96px)}
.stage-x .opsx{max-width:1020px;margin:0 auto}