/* ==========================================================================
 * ASTACKRA Axis — ADVANCE 2.0
 * Headings, tags, navigation, page-to-page quote transition and full-site
 * motion choreography. Loads after ax.css on Axis pages only.
 *
 * SAFETY CONTRACT
 * Content is visible by default. Hidden-then-revealed states apply ONLY when
 * html.adv is present (set by advance.js the moment it runs) and are force-
 * released by html.adv-safe, which advance.js sets on a hard timer and on
 * error. If the script never runs, never finishes, or throws, every word on
 * the page still renders. Nothing here can permanently hide content.
 * ========================================================================== */

:root{
  --adv-e:cubic-bezier(.16,1,.3,1);
  --adv-e2:cubic-bezier(.4,0,.2,1);
  --adv-glow:92,225,255;
}

/* ==========================================================================
   1. Page-to-page transition
   ========================================================================== */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:advViewOut .28s var(--adv-e2) both}
  ::view-transition-new(root){animation:advViewIn .46s var(--adv-e) both}
  @keyframes advViewOut{to{opacity:0;transform:translateY(-12px) scale(.992)}}
  @keyframes advViewIn{from{opacity:0;transform:translateY(18px) scale(1.008)}}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* The quote curtain that carries you from one page to the next. */
.adv-curtain{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  padding:8vw;text-align:center;background:#04060b;color:#f4f8fb;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--adv-e2),visibility .34s;
}
.adv-curtain::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(var(--adv-glow),.18),transparent 62%);
}
.adv-curtain.is-on{opacity:1;visibility:visible;pointer-events:all}
.adv-curtain-in{position:relative;max-width:900px}
.adv-curtain-mark{
  display:block;font:italic 700 clamp(38px,6vw,64px)/1 "Instrument Serif",Georgia,serif;
  color:var(--signal,#5ce1ff);margin-bottom:10px;opacity:0;transform:translateY(14px);
}
.adv-curtain-text{
  margin:0;font-size:clamp(22px,3.1vw,40px);line-height:1.32;font-weight:500;
  letter-spacing:-.018em;text-wrap:balance;opacity:0;transform:translateY(18px);
}
.adv-curtain-brand{
  display:block;margin-top:26px;font:600 11px/1 var(--f-sans,inherit);
  letter-spacing:.18em;text-transform:uppercase;color:#7c8aa3;
  opacity:0;transform:translateY(10px);
}
.adv-curtain.is-on .adv-curtain-mark{animation:advCurtainUp .5s var(--adv-e) .04s both}
.adv-curtain.is-on .adv-curtain-text{animation:advCurtainUp .58s var(--adv-e) .1s both}
.adv-curtain.is-on .adv-curtain-brand{animation:advCurtainUp .5s var(--adv-e) .22s both}
@keyframes advCurtainUp{to{opacity:1;transform:none}}
.adv-curtain-rule{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,transparent,var(--signal,#5ce1ff));
}
.adv-curtain.is-on .adv-curtain-rule{animation:advCurtainRule .62s linear both}
@keyframes advCurtainRule{to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .adv-curtain{transition:none}
  .adv-curtain.is-on .adv-curtain-mark,
  .adv-curtain.is-on .adv-curtain-text,
  .adv-curtain.is-on .adv-curtain-brand{animation:none;opacity:1;transform:none}
  .adv-curtain.is-on .adv-curtain-rule{animation:none;width:100%}
}

/* ==========================================================================
   2. Reveal choreography  (opt-in, failsafe-released)
   ========================================================================== */
html.adv .adv-rv{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--adv-e),transform .85s var(--adv-e);
  will-change:opacity,transform;
}
html.adv .adv-rv.is-in,
html.adv.adv-safe .adv-rv{opacity:1;transform:none;will-change:auto}

html.adv .adv-rv-scale{opacity:0;transform:scale(.965);transition:opacity .9s var(--adv-e),transform .9s var(--adv-e)}
html.adv .adv-rv-scale.is-in,
html.adv.adv-safe .adv-rv-scale{opacity:1;transform:none}

/* Masked block reveal for section headings. */
html.adv .adv-mask{clip-path:inset(0 0 100% 0);transform:translateY(16px);opacity:.001;transition:clip-path .95s var(--adv-e),transform .95s var(--adv-e),opacity .5s linear}
html.adv .adv-mask.is-in,
html.adv.adv-safe .adv-mask{clip-path:inset(0 0 -18% 0);transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  html.adv .adv-rv,html.adv .adv-rv-scale,html.adv .adv-mask{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ==========================================================================
   3. Headings
   ========================================================================== */
.ax-prose h2,.ax-prose h3{position:relative}
.ax-prose h2::before{
  content:"";position:absolute;left:-20px;top:.2em;width:4px;height:1em;border-radius:2px;
  background:linear-gradient(180deg,var(--signal),rgba(var(--adv-glow),0));
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--adv-e) .12s;
}
html.adv .ax-prose h2.is-in::before,
html.adv.adv-safe .ax-prose h2::before,
html:not(.adv) .ax-prose h2::before{transform:scaleY(1)}
@media (max-width:820px){.ax-prose h2::before{display:none}}

.ax-prose h2[id],.ax-prose h3[id]{transition:color .25s ease}
.ax-prose h2[id]:hover,.ax-prose h3[id]:hover{color:var(--signal)}

/* Hero headline gets a slow living gradient. */
.ax-hero .ax-h1 em,.ax-hero .ax-display em,.axh-final .ax-display em{
  font-style:normal;
  background:linear-gradient(100deg,#fff 6%,var(--signal-2,#b8f2ff) 38%,var(--signal,#5ce1ff) 62%,#fff 96%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Finite on purpose: an infinite text-gradient repaint costs main-thread
     time and battery for no extra impact after the first few passes. */
  animation:advSheen 9s linear 3;
}
@keyframes advSheen{to{background-position:-260% 0}}
@media (prefers-reduced-motion:reduce){
  .ax-hero .ax-h1 em,.ax-hero .ax-display em,.axh-final .ax-display em{animation:none;background-position:0 0}
}

.ax-toc a{position:relative;transition:color .2s ease,padding-left .2s ease}
.ax-toc a.is-active{color:var(--cobalt);padding-left:7px}

/* ==========================================================================
   4. Tags
   ========================================================================== */
.ax-tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  font:600 10.5px/1 var(--f-sans,inherit);letter-spacing:.07em;text-transform:uppercase;
  background:var(--cobalt-soft,#e8ebff);color:var(--cobalt,#2f4bff);
  border:1px solid rgba(47,75,255,.22);white-space:nowrap;position:relative;overflow:hidden;
  transition:background .25s ease,transform .25s var(--adv-e),box-shadow .25s ease,color .25s ease;
}
.ax-tag::before{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(var(--adv-glow),.45),transparent);
}
/* On dark surfaces the tag keeps its signal-cyan treatment. */
:is(.ax-hero,.ax-dark,.ax-card-media,.ax-quote-band,.as-pagehero,.as-hero,.as-band) .ax-tag{background:rgba(var(--adv-glow),.09);color:var(--signal,#5ce1ff);border-color:rgba(var(--adv-glow),.3)}
a.ax-tag:hover{background:rgba(var(--adv-glow),.2);transform:translateY(-2px);box-shadow:0 8px 22px -12px rgba(var(--adv-glow),.8)}
a.ax-tag:hover::before{animation:advTagSweep .75s var(--adv-e2)}
@keyframes advTagSweep{to{transform:translateX(100%)}}
.ax-tag-row{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0}
.ax-card .ax-tag{margin:0 0 11px}

/* Every page hero kicker becomes a live pill. */
.ax-hero-kicker,.ax-mono.axh-step{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(var(--adv-glow),.28);background:rgba(var(--adv-glow),.08);
}
.ax-hero-kicker::before,.ax-mono.axh-step::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--signal,#5ce1ff);
  box-shadow:0 0 0 0 rgba(var(--adv-glow),.7);animation:advPulse 2.6s infinite;
}
@keyframes advPulse{70%{box-shadow:0 0 0 9px rgba(var(--adv-glow),0)}100%{box-shadow:0 0 0 0 rgba(var(--adv-glow),0)}}
@media (prefers-reduced-motion:reduce){
  .ax-hero-kicker::before,.ax-mono.axh-step::before{animation:none}
  .ax-tag::before{display:none}
}

/* ==========================================================================
   5. Navigation
   ========================================================================== */
.ax-hdr{transition:transform .42s var(--adv-e2),backdrop-filter .3s ease}
.ax-hdr.adv-hide{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.ax-hdr{transition:none}}

/* Scroll progress rail. */
#nx-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:10001;
  background:linear-gradient(90deg,var(--cobalt,#2f4bff),var(--signal,#5ce1ff));
  box-shadow:0 0 14px rgba(var(--adv-glow),.85);
}

/* Top-level items: magnetic pill + sliding indicator. */
.ax-nav-btn{position:relative;transition:color .25s ease,transform .25s var(--adv-e)}
.ax-nav-btn::before{
  content:"";position:absolute;inset:2px 6px;border-radius:9px;background:rgba(255,255,255,.07);
  opacity:0;transform:scale(.9);transition:opacity .25s ease,transform .25s var(--adv-e);z-index:-1;
}
.ax-nav-btn:hover::before,.ax-nav-btn[aria-expanded="true"]::before{opacity:1;transform:none}

/* Mega panel: staggered column cascade. */
html.adv .ax-mega:not([hidden]){animation:advMegaIn .3s var(--adv-e) both}
@keyframes advMegaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
html.adv .ax-mega:not([hidden]) .ax-mega-col{animation:advMegaCol .5s var(--adv-e) both}
html.adv .ax-mega:not([hidden]) .ax-mega-col:nth-child(1){animation-delay:.04s}
html.adv .ax-mega:not([hidden]) .ax-mega-col:nth-child(2){animation-delay:.09s}
html.adv .ax-mega:not([hidden]) .ax-mega-col:nth-child(3){animation-delay:.14s}
html.adv .ax-mega:not([hidden]) .ax-mega-col:nth-child(4){animation-delay:.19s}
html.adv .ax-mega:not([hidden]) .ax-mega-col:nth-child(5){animation-delay:.24s}
@keyframes advMegaCol{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.adv .ax-mega:not([hidden]) .ax-mega-feature{animation:advMegaCol .55s var(--adv-e) .26s both}

.ax-mega-col a{position:relative;transition:transform .25s var(--adv-e),color .2s ease}
.ax-mega-col a span{
  background-image:linear-gradient(var(--signal),var(--signal));
  background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;
  transition:background-size .32s var(--adv-e);
}
.ax-mega-col a:hover{transform:translateX(5px)}
.ax-mega-col a:hover span{background-size:100% 1px}
.ax-mega-feature{transition:transform .3s var(--adv-e),box-shadow .3s ease}
.ax-mega-feature:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,0,0,.85)}

/* Mobile drawer cascade. */
html.adv .ax-drawer:not([hidden]) .ax-acc{animation:advMegaCol .45s var(--adv-e) both}
html.adv .ax-drawer:not([hidden]) .ax-acc:nth-child(1){animation-delay:.03s}
html.adv .ax-drawer:not([hidden]) .ax-acc:nth-child(2){animation-delay:.08s}
html.adv .ax-drawer:not([hidden]) .ax-acc:nth-child(3){animation-delay:.13s}
html.adv .ax-drawer:not([hidden]) .ax-acc:nth-child(4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){
  html.adv .ax-mega:not([hidden]),
  html.adv .ax-mega:not([hidden]) .ax-mega-col,
  html.adv .ax-mega:not([hidden]) .ax-mega-feature,
  html.adv .ax-drawer:not([hidden]) .ax-acc{animation:none}
}

/* ==========================================================================
   6. Quote band (between content and footer, every page)
   ========================================================================== */
.ax-quote-band{
  padding:clamp(66px,9vw,116px) 0;background:#04060b;color:#f4f8fb;
  position:relative;overflow:hidden;text-align:center;
}
.ax-quote-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(var(--adv-glow),.16),transparent 62%);
}
.ax-quote-band::after{
  content:"";position:absolute;left:50%;top:0;width:min(760px,84vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(var(--adv-glow),.6),transparent);
}
.ax-quote-in{max-width:940px;margin:0 auto;padding:0 24px;position:relative}
.ax-quote-mark{
  font:italic 700 clamp(42px,6.4vw,70px)/1 "Instrument Serif",Georgia,serif;
  color:var(--signal,#5ce1ff);opacity:.9;display:block;margin-bottom:6px;
}
.ax-quote-stage{position:relative;min-height:6.4em}
.ax-quote-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;
  opacity:0;transform:translateY(14px);
  font-size:clamp(22px,2.8vw,36px);line-height:1.38;font-weight:500;letter-spacing:-.016em;text-wrap:balance;
}
@media (prefers-reduced-motion:no-preference){
  .ax-quote-slide{animation:advQuoteCycle 22s infinite}
  .ax-quote-slide:nth-child(1){animation-delay:0s}
  .ax-quote-slide:nth-child(2){animation-delay:5.5s}
  .ax-quote-slide:nth-child(3){animation-delay:11s}
  .ax-quote-slide:nth-child(4){animation-delay:16.5s}
  @keyframes advQuoteCycle{
    0%,1.5%{opacity:0;transform:translateY(14px)}
    7%,18%{opacity:1;transform:none}
    24%,100%{opacity:0;transform:translateY(-14px)}
  }
}
@media (prefers-reduced-motion:reduce){
  .ax-quote-stage{min-height:0}
  .ax-quote-slide{position:relative;inset:auto;opacity:1;transform:none;display:block;margin-bottom:1.4em}
  .ax-quote-slide:last-child{margin-bottom:0}
}
.ax-quote-brand{
  display:block;margin-top:26px;font:600 11px/1 var(--f-sans,inherit);
  letter-spacing:.18em;text-transform:uppercase;color:#7c8aa3;
}

/* ==========================================================================
   7. Micro-interactions
   ========================================================================== */
.ax-btn{position:relative;overflow:hidden;transition:transform .26s var(--adv-e),box-shadow .26s ease,filter .26s ease}
.ax-btn::after{
  content:"";position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.ax-btn:hover{box-shadow:0 16px 34px -18px rgba(var(--adv-glow),.85)}
.ax-btn:hover::after{animation:advTagSweep .72s var(--adv-e2)}
.ax-btn:active{transform:scale(.965)}

.ax-card,.ax-mega-feature{transition:transform .34s var(--adv-e),box-shadow .34s ease,border-color .34s ease}
.ax-card:hover{transform:translateY(-7px);box-shadow:0 30px 54px -34px rgba(0,0,0,.6)}
.ax-card-media img{transition:transform .8s var(--adv-e)}
.ax-card:hover .ax-card-media img{transform:scale(1.07)}

.ax-link-arrow svg{transition:transform .3s var(--adv-e)}
.ax-link-arrow:hover svg{transform:translateX(5px)}

.nova-orb{transition:transform .3s var(--adv-e),box-shadow .3s ease}
.nova-orb:hover{transform:translateY(-3px) scale(1.02)}

/* Cursor-reactive tilt surface (JS sets the custom properties). */
.adv-tilt{transform:perspective(1100px) rotateX(var(--adv-rx,0deg)) rotateY(var(--adv-ry,0deg)) translateY(var(--adv-ty,0px));transition:transform .4s var(--adv-e)}
.adv-tilt.is-live{transition:transform .12s linear}

@media (prefers-reduced-motion:reduce){
  .ax-btn,.ax-card,.ax-mega-feature,.nova-orb,.ax-card-media img,.adv-tilt{transition:none!important;transform:none!important}
  .ax-btn::after{display:none}
  .ax-card:hover,.nova-orb:hover{transform:none}
}
@media (hover:none){
  .adv-tilt{transform:none}
}