/* ==========================================================================
   AWGCOR - awgcor-3d.css
   The 3D layer. Every rule is scoped to html.x3d, a class only
   awgcor-3d.js sets, so this file does nothing on its own.

    1. WebGL views (hero, CTA portal, footer wordmark)
    2. hero composition + legibility
    3. 3D reveals and headline flips
    4. card tilt glare
    5. story panels swing in
    6. reduced motion
   ========================================================================== */

/* ---- 1. WebGL views ---- */
html.x3d .x3d-view{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--e-out,ease);
}
html.x3d .x3d-view.is-live{opacity:1;}
html.x3d .x3d-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* the hero canvas only ever covers the first screen of a tall hero */
html.x3d .x3d-view--hero{bottom:auto;height:min(100%,100vh);}

/* the CTA card: canvas sits under the copy (.cta > * would lift it to z 1) */
html.x3d .cta > .x3d-view{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;}
html.x3d .cta.x3d-has::before{z-index:0;}
html.x3d .cta.x3d-has::after{opacity:.22;}

/* the footer wordmark: rendered inside the existing .f-mark, whose faint
   flat logo fades out as the chrome one fades in */
html.x3d footer .f-mark{position:relative;transition:opacity .9s var(--e-out,ease);}
html.x3d footer .f-mark > svg{transition:opacity .4s ease;}
html.x3d footer .f-mark.x3d-has{opacity:1;}
html.x3d footer .f-mark.x3d-has > svg{opacity:0;}
html.x3d footer .f-mark > .x3d-view{inset:-4% 0 0;}
html.x3d .x3d-foot{
  position:relative;width:100%;
  height:clamp(120px,19vw,300px);
  margin-top:clamp(8px,2vw,28px);
  pointer-events:none;
}
html.x3d .x3d-foot > .x3d-view{inset:0;}

/* pricing's hero has no background layer of its own; we add one */
html.x3d .pv2-hero{position:relative;isolation:isolate;overflow:hidden;}
html.x3d .x3d-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}

/* ---- 2. hero composition ---- */

/* pricing: the note card frosts over the model behind it */
html.x3d .pv2-hero.x3d-has .pv2-hero-note{
  position:relative;z-index:1;
  background:rgba(10,13,24,.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
}

/* inner pages: copy keeps to the left two thirds, the model owns the right */
@media (min-width:900px){
  html.x3d .p-hero.x3d-has h1{max-width:min(100%,11.5em);}
  html.x3d .p-hero.x3d-has .p-lede{max-width:min(100%,36em);}
  html.x3d .p-hero.x3d-has .assure{max-width:min(100%,760px);}
}
/* phones: the model sits behind the copy, so it steps back */
@media (max-width:899px){
  html.x3d .p-hero .x3d-view--hero.is-live,
  html.x3d .pv2-hero .x3d-view--hero.is-live{opacity:.62;}
  html.x3d .hero .x3d-view--hero.is-live{opacity:.58;}
}

/* homepage: a soft pool of shade behind the centred copy keeps it readable
   whatever the 3D scene is doing behind it */
html.x3d .hero .hero-inner::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:44%;width:120%;height:118%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(8,9,12,.62),rgba(8,9,12,.34) 55%,transparent);
}
html.x3d .hero h1,
html.x3d .p-hero h1{text-shadow:0 2px 30px rgba(8,9,12,.55);}

/* scroll depth: the hero copy recedes as you leave it (JS writes the transform) */
html.x3d .x3d-depth{transform-origin:50% 0;will-change:transform,opacity;}

/* ---- 3. 3D reveals ---- */
@media (prefers-reduced-motion:no-preference){
  html.x3d [data-reveal]{
    transform:perspective(1100px) translate3d(var(--rx,0),var(--ry,30px),-70px)
              rotateX(var(--x3d-rx,14deg)) rotateY(var(--x3d-ry,0deg)) scale(var(--rs,1));
    transform-origin:50% 100%;
  }
  html.x3d [data-reveal].is-in{
    transform:perspective(1100px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1);
  }
  html.x3d [data-reveal="fade"]{--x3d-rx:0deg;}
  html.x3d [data-reveal="left"]{--x3d-rx:0deg;--x3d-ry:22deg;transform-origin:0 50%;}
  html.x3d [data-reveal="right"]{--x3d-rx:0deg;--x3d-ry:-22deg;transform-origin:100% 50%;}
  html.x3d [data-reveal="scale"]{--x3d-rx:10deg;}
  html.x3d [data-reveal="up-lg"]{--x3d-rx:20deg;}

  /* headline words flip up out of their line instead of just sliding */
  html.x3d .split .w{perspective:760px;}
  html.x3d .split .w-i{
    transform:translate3d(0,112%,0) rotateX(-84deg);
    transform-origin:50% 0;backface-visibility:hidden;
  }
  html.x3d .split.is-in .w-i{transform:translate3d(0,0,0) rotateX(0deg);}
}

/* ---- 4. card tilt ---- */
html.x3d .x3d-glare{
  position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .5s ease;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.20),rgba(255,255,255,.05) 34%,transparent 64%);
}
html.x3d .x3d-glare.is-light{
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),
             rgba(47,95,255,.11),rgba(0,224,255,.04) 36%,transparent 64%);
}
html.x3d .x3d-tilting > .x3d-glare{opacity:1;}
html.x3d .x3d-tilting{z-index:2;}

/* ---- 5. story panels swing in on a hinge ---- */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  html.x3d .story-visual{perspective:1600px;}
  html.x3d .story-panel{
    transform:rotateY(-32deg) translate3d(60px,0,-180px) scale(.94);
    transform-origin:0 50%;
    transition:opacity .8s var(--e-out),transform 1.1s var(--e-out);
  }
  html.x3d .story-panel.on{transform:none;}
}

/* ---- 7. homepage journey: one 3D world behind the page ----
   The world is fixed behind <main>; the hero, every dark section and the two
   interludes let it show through. Light sections stay solid white. */
html.x3d-journey main{position:relative;z-index:1;}
html.x3d-journey footer{z-index:1;}
html.x3d .x3d-world{
  position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;
  z-index:0;pointer-events:none;
}
html.x3d .x3d-world > .x3d-view{inset:0;}
html.x3d .x3d-world canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
html.x3d-journey main > .hero{background:transparent;}
html.x3d-journey main > .hero #field{opacity:.45;}
html.x3d-journey main > .s-dark,
html.x3d-journey main > .mq-band{background-color:rgba(8,9,12,.46);}
html.x3d-journey main > .s-dark-2{background-color:rgba(12,14,19,.5);}

/* the pinned, scroll-scrubbed interludes */
html.x3d .x3d-inter{position:relative;height:280vh;background:transparent;color:#fff;}
html.x3d .x3d-inter-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--header-h,78px) + 4vh) var(--gut,24px) 0;
}
html.x3d .x3d-inter-kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan,#00E0FF);margin:0 0 14px;opacity:0;
}
html.x3d .x3d-inter-title{
  font-family:var(--f-display);font-weight:600;color:#fff;margin:0;
  font-size:clamp(2.3rem,1rem + 5.2vw,5.6rem);line-height:.98;letter-spacing:-.04em;
  max-width:15ch;opacity:0;text-shadow:0 4px 40px rgba(8,9,12,.7);
  transform-origin:50% 100%;
}
html.x3d .x3d-inter-title em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  background:linear-gradient(90deg,#6F93FF,var(--cyan,#00E0FF));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html.x3d .x3d-inter-lbl{
  position:absolute;left:0;top:0;opacity:0;white-space:nowrap;
  font-family:var(--f-display);font-weight:600;color:#fff;
  font-size:clamp(1.15rem,.9rem + 1vw,1.75rem);letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(8,9,12,.85);
}
html.x3d .x3d-inter-lbl small{
  display:block;font-family:var(--f-body);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;color:var(--cyan,#00E0FF);margin-bottom:4px;
}
@media (max-width:760px){
  html.x3d .x3d-inter{height:230vh;}
  html.x3d .x3d-inter-lbl small{display:inline;margin:0 8px 0 0;}
}

/* ---- 8. every scroll moves in 3D ----
   Section content rises from a tilt as it enters and tips away as it leaves,
   scrubbed by scroll position on the compositor. Browsers without scroll
   timelines simply keep the normal reveal. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    html.x3d main > section:not(.hero):not(.p-hero):not(.pv2-hero):not(.x3d-inter) > .wrap > *,
    html.x3d main > .cta-wrap > .wrap > *{
      animation:x3d-rise auto linear both,x3d-leave auto linear forwards;
      animation-timeline:view(),view();
      animation-range:entry 0% entry 100%,exit 0% exit 100%;
    }
  }
}
/* in from the floor (hinged on the top edge, the part you can see), out onto
   the ceiling (hinged on the bottom edge): a corridor you fly through */
@keyframes x3d-rise{
  0%{transform-origin:50% 0;transform:perspective(1300px) translate3d(0,110px,-260px) rotateX(24deg) scale(.94);opacity:.25;}
  60%,100%{transform-origin:50% 0;transform:none;opacity:1;}
}
@keyframes x3d-leave{
  0%{transform-origin:50% 100%;transform:none;}
  100%{transform-origin:50% 100%;transform:perspective(1300px) translate3d(0,-70px,-220px) rotateX(-16deg) scale(.95);}
}

/* ---- 6. reduced motion: the scenes still render, nothing else moves ---- */
@media (prefers-reduced-motion:reduce){
  html.x3d .x3d-view{transition:none;}
}