/* ==========================================================================
   ALLIN — about.css
   Page-scoped interactive polish for about.html only.
   All rules are namespaced under .page-about so nothing leaks to other pages.
   Uses only transform / opacity / filter for motion → GPU-friendly.
   Honors prefers-reduced-motion (see block at the end).
   ========================================================================== */

/* ----- Hero: animated gold sheen across the heading + ambient aurora ------ */
.page-about .page-hero h1{
  background:linear-gradient(
    100deg,
    var(--heading) 0%, var(--heading) 38%,
    var(--gold-soft) 50%,
    var(--heading) 62%, var(--heading) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:aboutHeroSheen 8s var(--ease) 1.2s infinite;
}
@keyframes aboutHeroSheen{
  0%,18%{background-position:150% 0}
  60%,100%{background-position:-50% 0}
}

/* soft drifting glow behind the hero (page-hero::before is already used) */
.page-about .page-hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-32%;right:-12%;
  width:min(60vw,720px);height:min(60vw,720px);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 15%,transparent),transparent 66%);
  filter:blur(44px);
  animation:aboutAurora 16s ease-in-out infinite alternate;
}
@keyframes aboutAurora{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-7%,9%) scale(1.16)}
}
.page-about .page-hero .eyebrow{position:relative;overflow:hidden}
.page-about .page-hero .eyebrow::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--gold) 40%,transparent),transparent);
  animation:aboutEyebrowSweep 5.5s var(--ease) 1.6s infinite;
}
@keyframes aboutEyebrowSweep{0%,70%{left:-120%}90%,100%{left:160%}}

/* ----- Credentials ticker (marquee base styles live in components.css) ---- */
.page-about .about-ticker{
  padding:1rem 0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--gold) 4%,var(--bg));
}
.page-about .about-ticker .marquee-track{align-items:center;gap:1.6rem;padding-inline:.8rem}
.page-about .about-ticker .tick{
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);
  white-space:nowrap;transition:color .3s var(--ease);
}
.page-about .about-ticker .tick:hover{color:var(--gold)}
.page-about .about-ticker .tick-sep{color:var(--gold);font-size:.55em;opacity:.85}

/* ----- Floating glass badges over the promo image ------------------------- */
.page-about .promo-wrap{position:relative}
.page-about .float-badge{
  position:absolute;z-index:3;
  display:flex;flex-direction:column;gap:.05rem;
  padding:.65rem 1rem;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  animation:aboutBob 5.5s ease-in-out infinite;
  pointer-events:none;
}
.page-about .float-badge .fb-num{
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-md);
  color:var(--gold);line-height:1.1;
}
.page-about .float-badge .fb-label{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);
}
.page-about .fb-1{top:-1.1rem;left:-1.4rem}
.page-about .fb-2{bottom:16%;right:-1.5rem;animation-delay:-1.8s;animation-duration:6.2s}
.page-about .fb-3{bottom:-1.2rem;left:12%;animation-delay:-3.4s;animation-duration:5s}
@keyframes aboutBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@media (max-width:640px){
  .page-about .fb-1{left:-.4rem}
  .page-about .fb-2{right:-.4rem}
  .page-about .float-badge{padding:.5rem .8rem}
}

/* ----- "The Allin Journey" timeline --------------------------------------- */
.page-about .aj-track{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  padding-top:.4rem;
}
/* connector line, drawn on scroll via the reveal .in class (scaleX only) */
.page-about .aj-line{
  position:absolute;left:0;right:0;top:calc(.4rem + 24px);height:2px;
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-radius:2px;overflow:hidden;
}
.page-about .aj-line i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease) .25s;
}
.page-about .aj-track.in .aj-line i{transform:scaleX(1)}
/* steps: staggered rise as the line reaches each node */
.page-about .aj-step{
  position:relative;display:block;padding-top:.4rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.page-about .aj-track.in .aj-step{opacity:1;transform:none}
.page-about .aj-track.in .aj-step:nth-of-type(2){transition-delay:.25s}
.page-about .aj-track.in .aj-step:nth-of-type(3){transition-delay:.55s}
.page-about .aj-track.in .aj-step:nth-of-type(4){transition-delay:.85s}
.page-about .aj-node{
  position:relative;z-index:1;
  display:inline-grid;place-content:center;
  width:48px;height:48px;border-radius:50%;
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-sm);
  color:var(--gold);background:var(--surface);
  border:2px solid color-mix(in srgb,var(--gold) 55%,transparent);
  box-shadow:0 0 0 6px var(--bg),0 0 18px color-mix(in srgb,var(--gold) 25%,transparent);
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.page-about .aj-step h3{font-size:var(--fs-base);margin:.9rem 0 .35rem;transition:color .3s var(--ease)}
.page-about .aj-step p{font-size:var(--fs-sm);color:var(--text-mute)}
.page-about .aj-step:hover .aj-node{transform:scale(1.12);background:var(--gold);color:var(--on-gold)}
.page-about .aj-step:hover h3{color:var(--gold)}
/* vertical layout on small screens: line runs down the left */
@media (max-width:760px){
  .page-about .aj-track{grid-template-columns:1fr;gap:1.8rem;padding-left:.2rem}
  .page-about .aj-line{left:23px;right:auto;top:.4rem;bottom:.4rem;width:2px;height:auto}
  .page-about .aj-line i{
    width:100%;height:100%;
    background:linear-gradient(180deg,var(--gold),var(--gold-soft));
    transform:scaleY(0);transform-origin:top;
  }
  .page-about .aj-track.in .aj-line i{transform:scaleY(1)}
  .page-about .aj-step{padding-top:0;padding-left:70px}
  .page-about .aj-node{position:absolute;left:0;top:0}
  .page-about .aj-step h3{margin-top:.2rem}
}

/* ----- Promo visual: 3D tilt + cursor-follow glow ------------------------- */
.page-about .promo-visual{
  transition:transform .35s var(--ease),box-shadow .4s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.page-about .promo-visual:hover{box-shadow:var(--shadow-lg)}
.page-about .promo-visual.has-img img{transition:transform .6s var(--ease)}
.page-about .promo-visual:hover.has-img img{transform:scale(1.05)}
/* cursor spotlight (sits above the image, below the existing gradient ::after) */
.page-about .promo-visual.has-img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--gold-soft) 32%,transparent),transparent 60%);
  opacity:0;transition:opacity .35s var(--ease);mix-blend-mode:soft-light;
}
.page-about .promo-visual:hover.has-img::before{opacity:1}

/* ----- Mission / Vision cards: gold top-edge reveal on hover -------------- */
.page-about .feat-2col .card{position:relative;overflow:hidden}
.page-about .feat-2col .card::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.page-about .feat-2col .card:hover::before{transform:scaleX(1)}

/* ----- Value step-cards & pillar vcards: icon lift ----------------------- */
.page-about .step-card .ic,
.page-about .vcard .ic{transition:transform .4s var(--ease),background .4s var(--ease)}
.page-about .step-card:hover .ic,
.page-about .vcard:hover .ic{
  transform:scale(1.08) rotate(-5deg);
  background:color-mix(in srgb,var(--gold) 20%,transparent);
}

/* pillar cards: gold underline sweep on the "Explore" link */
.page-about .vcard .more{position:relative;align-self:flex-start}
.page-about .vcard .more::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.page-about .vcard:hover .more::after{transform:scaleX(1)}

/* ----- Stat band: hover lift + subtle glow on the number ----------------- */
.page-about .stat-cell{
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.page-about .stat-cell:hover{
  transform:translateY(-4px);
  border-color:var(--border);
  box-shadow:var(--shadow);
}
.page-about .stat-cell:hover .num{
  text-shadow:0 0 22px color-mix(in srgb,var(--gold) 45%,transparent);
}
.page-about .stat-cell .num{transition:text-shadow .35s var(--ease)}

/* ----- CTA band: slow gold aurora drift ---------------------------------- */
.page-about .cta-band::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:38%;aspect-ratio:1;border-radius:50%;top:-30%;left:-6%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 22%,transparent),transparent 68%);
  filter:blur(30px);
  animation:aboutAurora 18s ease-in-out infinite alternate;
}

/* ==========================================================================
   Reduced-motion: strip every non-essential animation & keep it readable.
   base.css already zeroes transition/animation durations globally, but we
   also restore the heading to a solid colour and remove ambient blobs.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .page-about .page-hero h1{
    animation:none;background:none;
    color:var(--heading);-webkit-text-fill-color:currentColor;
  }
  .page-about .page-hero::after,
  .page-about .page-hero .eyebrow::after,
  .page-about .cta-band::after{display:none}
  .page-about .promo-visual,
  .page-about .promo-visual.has-img img{transform:none!important}
  .page-about .float-badge{animation:none}
  .page-about .about-ticker .marquee-track{animation:none}
  .page-about .aj-line i{transform:none!important;transition:none}
  .page-about .aj-step{opacity:1;transform:none;transition:none}
}