/* ===== AXIOMAXS floating-HQ hero — all selectors namespaced .ax-* ===== */
/* ============================== TOKENS ============================== */
:root{
  --ax-navy:#0B1B33;
  --ax-navy-2:#0F2748;
  --ax-sky-1:#0B57A4;
  --ax-sky-2:#2E8BDC;
  --ax-sky-3:#8FC7F0;
  --ax-gold:#E4B14C;
  --ax-gold-2:#F2CE7E;
  --ax-ink:#0A1526;
  --ax-white:#fff;
  --ax-ff:var(--f-body,ui-sans-serif,system-ui,sans-serif);
  --ax-fd:var(--f-disp,var(--ax-ff));

  /* animation speeds — tune here */
  --ax-spd-sky-far:150s;
  --ax-spd-sky-mid:104s;
  --ax-spd-wisp:74s;
  --ax-spd-sea-back:56s;
  --ax-spd-sea-front:34s;

  /* live pointer parallax (JS writes these) */
  --ax-px:0;   /* -1 .. 1 */
  --ax-py:0;   /* -1 .. 1 */
  --ax-sc:0;   /* scroll progress 0..1 */
}

/* ============================== HERO SHELL ============================== */
.ax-hero{
  position:relative; z-index:2;
  display:block; padding-top:0;   /* neutralise site.css .hero{display:flex;padding-top:22vh} */
  color:#fff;                    /* site.css sets section{color:var(--fg)} */
  font-family:var(--ax-ff);
  height:420vh;                  /* scroll runway for the walk-in */
  min-height:520px;
  width:100%;
  background:#05070B;
  --ax-w:0;                      /* 0 = clouds, 1 = walk-in  (JS writes this) */
  --ax-c:1;                      /* hero copy opacity        (JS writes this) */
}
.ax-pin{
  position:sticky; top:0;
  height:100svh; min-height:520px;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:#05070B;
}
/* the cloud scene — exactly the hero you land on */
.ax-scene{
  position:absolute; inset:0;
  overflow:hidden;
  opacity:calc(1 - var(--ax-w));
  transform:scale(calc(1 + var(--ax-w) * .10));
  transform-origin:72% 62%;
  will-change:opacity, transform;
  background:
    radial-gradient(120% 80% at 78% 6%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#063A79 0%, var(--ax-sky-1) 26%, var(--ax-sky-2) 62%, var(--ax-sky-3) 100%);
}

/* soft sun bloom, drifts slightly with pointer */
.ax-sun{
  position:absolute; top:-16%; right:6%;
  width:52vw; height:52vw; max-width:820px; max-height:820px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,225,.72) 0%, rgba(255,236,190,.28) 32%, rgba(255,236,190,0) 68%);
  filter:blur(18px);
  transform:translate3d(calc(var(--ax-px) * -18px), calc(var(--ax-py) * -12px), 0);
  will-change:transform; pointer-events:none; z-index:1;
}

/* ============================== CLOUD LAYERS ============================== */
.ax-layer{
  position:absolute; left:0; width:100%;
  pointer-events:none;
  will-change:transform;
  transform:translate3d(calc(var(--ax-px) * var(--ax-depth,6px)), calc(var(--ax-py) * calc(var(--ax-depth,6px) * .5)), 0);
}
.ax-strip{
  display:flex; width:200%; height:100%;
  animation:ax-drift var(--ax-dur,60s) linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
/* site.css has no i{} rule, but be explicit */
.ax-strip > i{font-style:normal;
  flex:0 0 50%; height:100%;
  background-position:center bottom;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
@keyframes ax-drift{
  from{transform:translate3d(-50%,0,0)}
  to  {transform:translate3d(0,0,0)}
}

/* --- background sky clouds (BEHIND building) --- */
.ax-l-sky-far  { top:-1%; height:46%; z-index:2; opacity:.88; --ax-depth:6px;  }
.ax-l-sky-mid  { top:5%;  height:50%; z-index:3; opacity:.96; --ax-depth:11px; }
.ax-l-wisp     { top:22%; height:40%; z-index:4; opacity:.62; --ax-depth:16px; }
/* fade the bottom of the sky layers so their box edge never shows */
.ax-l-sky-far, .ax-l-sky-mid, .ax-l-wisp{
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 14%,#000 58%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 14%,#000 58%,rgba(0,0,0,0) 100%);
}
.ax-l-sky-far  .ax-strip{animation-duration:var(--ax-spd-sky-far)}
.ax-l-sky-mid  .ax-strip{animation-duration:var(--ax-spd-sky-mid)}
.ax-l-wisp     .ax-strip{animation-duration:var(--ax-spd-wisp)}
.ax-l-sky-far  i{background-image:url("/hero-assets/sky-far.webp")}
.ax-l-sky-mid  i{background-image:url("/hero-assets/sky-mid.webp")}
.ax-l-wisp     i{background-image:url("/hero-assets/wisp.webp")}

/* --- cloud sea behind the base of the building --- */
.ax-l-sea-back{ bottom:-8%; height:44%; z-index:5; opacity:.96; --ax-depth:20px; }
.ax-l-sea-back .ax-strip{animation-duration:var(--ax-spd-sea-back)}
.ax-l-sea-back i{background-image:url("/hero-assets/sea-back.webp")}

/* --- foreground cloud sea (IN FRONT of building) --- */
.ax-l-sea-front{ bottom:-12%; height:44%; z-index:8; --ax-depth:34px; }
.ax-l-sea-front .ax-strip{animation-duration:var(--ax-spd-sea-front)}
.ax-l-sea-front i{background-image:url("/hero-assets/sea-front.webp")}

/* ============================== BUILDING ============================== */
.ax-stage{
  position:absolute; inset:0; z-index:6;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding-right:0;
  pointer-events:none;
  perspective:1400px;
}
.ax-building{
  position:relative;
  width:min(1020px, 62vw, 97svh);   /* 3rd term caps HEIGHT at ~58svh (aspect 1.667) */
  margin-bottom:5vh;
  transform:
    translate3d(calc(var(--ax-px) * 26px), calc(var(--ax-py) * 14px + var(--ax-sc) * -60px), 0)
    rotateY(calc(var(--ax-px) * 1.6deg))
    rotateX(calc(var(--ax-py) * -1deg));
  transform-style:preserve-3d;
  will-change:transform;
  animation:ax-float 9s ease-in-out infinite;
}
@keyframes ax-float{
  0%,100%{ margin-bottom:5vh }
  50%    { margin-bottom:calc(5vh + 14px) }
}
.ax-building img{
  width:100%; height:auto; object-fit:contain;   /* site.css sets img{object-fit:cover} */
  max-width:100%;
  filter:drop-shadow(0 26px 44px rgba(6,26,54,.20));
}

/* ground haze so the base melts into the clouds */
.ax-building::after{
  content:""; position:absolute; left:-12%; right:-12%; bottom:-8%; height:16%;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(253,254,255,.20) 55%, rgba(255,255,255,.46) 100%);
  filter:blur(24px); pointer-events:none;
}

/* glass shimmer — a light sweep clipped to the building silhouette */
.ax-shimmer{
  position:absolute; inset:0;
  -webkit-mask-image:url("/hero-assets/building.webp");
  mask-image:url("/hero-assets/building.webp");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  overflow:hidden; pointer-events:none;
  mix-blend-mode:screen; opacity:.55;
}
.ax-shimmer::before{
  content:""; position:absolute; top:-40%; left:-60%;
  width:36%; height:180%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(214,238,255,.75) 55%, rgba(255,255,255,0) 100%);
  transform:rotate(14deg);
  animation:ax-sweep 7.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes ax-sweep{
  0%      {transform:translate3d(0,0,0) rotate(14deg)}
  55%,100%{transform:translate3d(360%,0,0) rotate(14deg)}
}

/* ============================== NAV ============================== */
.ax-nav{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:22px clamp(20px,4vw,56px);
}
.ax-brand{display:flex; align-items:center; gap:12px; letter-spacing:.16em; font-weight:700; font-size:15px}
.ax-brand svg{width:30px; height:30px; flex:none}
.ax-menu{display:flex; align-items:center; gap:clamp(18px,2.4vw,40px)}
.ax-menu a{
  position:relative; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  opacity:.9; transition:opacity .25s, color .25s;
}
.ax-menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px;
  background:var(--ax-gold); transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.ax-menu a:hover{opacity:1}
.ax-menu a:hover::after, .ax-menu a.ax-is-active::after{right:0}
.ax-menu a.ax-is-active{color:var(--ax-gold)}
.ax-burger{
  display:flex; flex-direction:column; gap:5px; padding:10px; border-radius:8px;
  transition:background .25s;
}
.ax-burger:hover{background:rgba(255,255,255,.12)}
.ax-burger span{display:block; width:26px; height:2px; background:#fff; border-radius:2px}

/* ============================== HERO COPY ============================== */
.ax-copy{
  position:absolute; z-index:20;
  opacity:var(--ax-c); will-change:opacity;
  left:clamp(20px,4.5vw,72px); top:50%; transform:translateY(-50%);
  max-width:min(460px,44vw);
  text-shadow:0 2px 26px rgba(6,24,50,.45);
}
.ax-copy h1{
  margin:0; font-family:var(--ax-fd); font-size:clamp(34px,4.4vw,60px); line-height:1.06;
  font-weight:700; letter-spacing:-.02em;
}
.ax-copy h1 .ax-g{color:var(--ax-gold)}
.ax-copy .ax-kicker{
  margin:22px 0 0; font-size:clamp(13px,1.05vw,15px); letter-spacing:.22em;
  color:var(--ax-gold-2); font-weight:600;
}
.ax-cta{
  margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;
}
.ax-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.04em;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s;
}
.ax-btn-primary{background:var(--ax-gold); color:var(--ax-ink); box-shadow:0 12px 30px rgba(228,177,76,.34)}
.ax-btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(228,177,76,.46)}
.ax-btn-ghost{border:1px solid rgba(255,255,255,.6); background:rgba(10,21,38,.26); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.ax-btn-ghost:hover{background:rgba(10,21,38,.42); border-color:#fff; transform:translateY(-2px)}


/* socials */
.ax-social{
  position:absolute; z-index:20; left:clamp(20px,4.5vw,72px); bottom:34px;
  display:flex; gap:12px;
}
.ax-social a{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ax-navy); background:rgba(255,255,255,.55);
  border:1px solid rgba(11,27,51,.22);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .25s, transform .25s, border-color .25s, color .25s;
}
.ax-social a:hover{background:var(--ax-gold); border-color:var(--ax-gold); color:var(--ax-ink); transform:translateY(-3px)}
.ax-social svg{width:16px; height:16px; fill:currentColor}

/* scroll cue */
.ax-cue{
  position:absolute; z-index:20;
  opacity:var(--ax-c); will-change:opacity; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.28em; font-weight:600;
  color:var(--ax-navy); opacity:.85;
}
.ax-cue .ax-mouse{
  width:22px; height:34px; border:1.5px solid rgba(11,27,51,.55); border-radius:12px; position:relative;
}
.ax-cue .ax-mouse::after{
  content:""; position:absolute; left:50%; top:7px; width:2px; height:6px; border-radius:2px;
  background:var(--ax-navy); transform:translateX(-50%);
  animation:ax-wheel 1.9s ease-in-out infinite;
}
@keyframes ax-wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* static haze at the base so the building never shows a hard cut-off */
.ax-base{
  position:absolute; left:0; right:0; bottom:0; height:26%; z-index:7; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 40%, rgba(255,255,255,.66) 72%, rgba(255,255,255,.86) 100%);
  filter:blur(2px);
}
@media (max-width:820px), (max-width:1024px) and (orientation:portrait){ .ax-base{height:20%} }

/* bottom fade into the next section */
.ax-hem{
  position:absolute; left:0; right:0; bottom:0; height:11%; z-index:9; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(240,244,250,.35) 45%, rgba(15,15,18,.55) 88%, #0F0F12 100%);
}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1280px){
  .ax-copy{max-width:38vw}
  .ax-copy h1{font-size:clamp(30px,3.9vw,46px)}
  .ax-building{width:min(64vw, 92svh); margin-bottom:5vh}
  .ax-stage{padding-right:0}
  @keyframes ax-float{0%,100%{margin-bottom:5vh}50%{margin-bottom:calc(5vh + 12px)}}
}
@media (max-width:1024px){
  .ax-copy{max-width:32vw}
  .ax-copy h1{font-size:clamp(26px,3.4vw,38px)}
  .ax-building{width:min(58vw, 82svh); margin-bottom:5vh}
  @keyframes ax-float{0%,100%{margin-bottom:5vh}50%{margin-bottom:calc(5vh + 12px)}}
}
@media (max-width:820px), (max-width:1024px) and (orientation:portrait){
  .ax-menu{display:none}
  .ax-hero{height:100svh; min-height:560px}
  .ax-copy{
    left:0; right:0; top:12%; bottom:auto; transform:none;
    max-width:none; padding:0 24px; text-align:center;
  }
  .ax-copy h1{font-size:clamp(30px,8.4vw,44px)}
  .ax-cta{justify-content:center; margin-top:24px}
  .ax-social{left:0; right:0; justify-content:center; bottom:22px}
  .ax-cue{display:none}
  .ax-stage{justify-content:center; padding-right:0}
  .ax-building{width:min(126vw, 86svh); margin-bottom:4vh}
  @keyframes ax-float{0%,100%{margin-bottom:4vh}50%{margin-bottom:calc(4vh + 10px)}}
  /* wider tiles on narrow screens so the clouds are not stretched vertically */
  .ax-strip{width:400%}
  /* site.css has no i{} rule, but be explicit */
.ax-strip > i{font-style:normal;flex:0 0 50%}
  .ax-l-sky-far{top:2%;  height:26%}
  .ax-l-sky-mid{top:10%; height:30%}
  .ax-l-wisp{top:20%; height:24%; opacity:.45}
  .ax-l-sea-back{bottom:-6%; height:30%}
  .ax-l-sea-front{bottom:-10%; height:28%}
  /* pointer parallax is meaningless on touch */
  :root{--ax-px:0;--ax-py:0}
}

/* ============================== A11Y ============================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .ax-strip{transform:translate3d(-25%,0,0)}
}

/* stubs js/app.js animates — never visible, never affect layout */
.ax-compat{
  position:absolute; top:0; left:0; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0);
  opacity:0; pointer-events:none; z-index:-1;
}

/* ============================== WALK-IN (inside the hero) ============================== */
.ax-walk{
  position:absolute; inset:0; z-index:12;
  opacity:var(--ax-w);
  will-change:opacity;
  background:#05070B;
  pointer-events:none;
}
.ax-walk-seed,
.ax-walk-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ax-walk-canvas{opacity:0; transition:opacity .3s ease}
.ax-hero[data-painted="1"] .ax-walk-canvas{opacity:1}
.ax-hero[data-painted="1"] .ax-walk-seed{opacity:0; transition:opacity .3s ease}
.ax-walk-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,11,.42) 0%, rgba(5,7,11,0) 24%, rgba(5,7,11,0) 52%, rgba(5,7,11,.78) 100%);
}

.ax-walk-ui{
  position:absolute; inset:0; z-index:16;
  opacity:var(--ax-w); pointer-events:none;
  will-change:opacity;
}
.ax-walk-idx{
  position:absolute; top:clamp(74px,11vh,120px); left:clamp(20px,5vw,72px); margin:0;
  font-family:var(--f-mono,ui-monospace,monospace); font-size:11px; letter-spacing:.2em;
  color:rgba(255,255,255,.5);
}
.ax-walk-idx b{color:var(--ax-gold,#E4B14C); font-weight:500}

.ax-walk-caps{
  position:absolute; left:clamp(20px,5vw,72px); right:clamp(20px,5vw,72px); bottom:clamp(86px,13vh,150px);
  min-height:5.6em;
}
.ax-walk-cap{
  position:absolute; inset:0;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  color:#fff;
}
.ax-walk-cap.on{opacity:1; transform:none}
.ax-walk-cap b{
  display:block; font-family:var(--ax-fd,inherit); font-weight:700;
  font-size:clamp(26px,3.8vw,54px); line-height:1.05; letter-spacing:-.025em;
}
.ax-walk-cap span{
  display:block; margin-top:10px; max-width:54ch;
  font-size:clamp(13px,1.15vw,17px); line-height:1.6; color:rgba(255,255,255,.7);
}

.ax-walk-rail{
  position:absolute; left:clamp(20px,5vw,72px); right:clamp(20px,5vw,72px); bottom:clamp(48px,7vh,80px);
  height:2px; background:rgba(255,255,255,.16); overflow:hidden;
}
.ax-walk-rail i{
  display:block; height:100%; width:100%; background:rgba(255,255,255,.9);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}
.ax-walk-load{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:18;
  background:rgba(255,255,255,.10); overflow:hidden;
  opacity:var(--ax-w); transition:opacity .4s ease;
}
.ax-hero[data-ready="1"] .ax-walk-load{opacity:0}
.ax-walk-load i{
  display:block; height:100%; width:100%; background:var(--ax-gold,#E4B14C);
  transform:scaleX(0); transform-origin:left; transition:transform .3s linear;
}

@media (max-width:820px), (max-width:1024px) and (orientation:portrait){
  .ax-hero{height:340vh}
  .ax-walk-cap span{display:none}
  .ax-walk-caps{bottom:clamp(80px,14vh,140px); min-height:3.4em}
  .ax-walk-cap b{font-size:clamp(24px,7vw,36px)}
}
@media (prefers-reduced-motion:reduce){
  .ax-hero{height:100svh}
  .ax-pin{position:relative}
  .ax-walk, .ax-walk-ui{display:none}
  .ax-scene{opacity:1; transform:none}
}