/* ════════════════════════════════════════════════════════════════════════
   adityaraju.com — single non-scrolling stage, three independent sections.

   HOW THIS FILE IS ORGANISED
   ──────────────────────────
   1. SHARED FOUNDATION   reset, stage, fonts, theme, the bits every section reuses.
   2. LAYOUT / SLOTS      WHERE a section sits (top / middle / bottom). Position only,
                          section-agnostic. Driven by [data-slot] which the script sets.
   3. SECTION A / B / C   WHAT each section IS (its glyph, ambient scene, sub-nav).
                          Each block is self-contained and scoped to [data-section="x"];
                          you can read, edit, or lift one out without touching the others.

   TO EDIT (the two knobs you'll reach for most) — both live in the SECTION REGISTRY
   in the <script> at the very bottom:
       • rename a section / change its link → edit  SECTIONS
       • reorder sections (swap places)    → edit  LAYOUT   (e.g. ['c','b','a'])

   The structural ids a / b / c never change — they're just "section 1/2/3".
   The label, link, symbol, scene and position are all swappable around them.
   ════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   1 · SHARED FOUNDATION
   ══════════════════════════════════════════ */

  *        { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
  html,body{ height:100%; }
  body{
    position:relative; width:100%;
    min-height:100vh; height:100vh; height:100dvh;   /* dvh keeps it stable on mobile */
    overflow:hidden; overscroll-behavior:none;        /* single non-scrolling stage   */
    background:#ffffff; color:#2b2b2b;
    font-family:"Cormorant Garamond", Georgia, serif; -webkit-font-smoothing:antialiased;
    padding-top:env(safe-area-inset-top,0);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  @media (prefers-reduced-motion: no-preference){
    body{ animation:fade 1.6s ease forwards; opacity:0; }
  }
  @keyframes fade{ to{ opacity:1; } }

  /* dark theme — only the neutrals flip; each section's vivid accents are left alone */
  :root[data-theme="dark"] body{ background:#1a1916; color:#e9e4da; }

  /* shared reveal keyframes, reused by every section's glyph + label */
  @keyframes flowDash    { to{ stroke-dashoffset:-100; } }
  @keyframes rainbowFlow { to{ background-position:-200% 0; } }

  /* ---- the symbol unit: glyph + label (+ optional sub-nav), stacked & centred ---- */
  .symbol{
    position:absolute; left:50%; z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:var(--symbol-gap,9px);
    color:#b3aea4; transition:color .4s ease;
  }
  .link{
    display:flex; flex-direction:column; align-items:center; gap:var(--glyph-gap,7px);
    text-decoration:none; color:inherit;
  }
  .link:focus-visible{ outline:2px solid #c98b8b; outline-offset:6px; border-radius:3px; }

  /* ---- the label: grey at rest, washes rainbow on approach (shared mechanism) ----
     Text comes from data-label (set by the script), so renaming a section needs no
     CSS edit. The ::after layer is the rainbow copy that fades in over the grey. */
  .label{
    position:relative; display:inline-block;
    font-size:1.05rem; font-weight:400; letter-spacing:0.2em; text-transform:uppercase;
    color:#b3aea4;
  }
  .label::after{
    content:attr(data-label); position:absolute; left:0; top:0;
    background:linear-gradient(90deg,#ff5d73,#ff9f45,#ffd54a,#5ad67d,#43c6e8,#b66cff,#ff5d73);
    background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    opacity:0; transition:opacity .55s ease;
  }
  .symbol:hover .label::after,
  .symbol:focus-visible .label::after,
  .section.near .label::after{ opacity:1; }
  @media (prefers-reduced-motion: no-preference){
    .label::after{ animation:rainbowFlow 8s linear infinite; }
  }

/* ══════════════════════════════════════════
   2 · LAYOUT / SLOTS   (position only — no section identity here)
   The script gives each section data-slot="top|middle|bottom" from the LAYOUT
   array, so the same section can live in any band just by reordering that array.
   ══════════════════════════════════════════ */

  .section{ display:contents; }   /* a section is its parts; the parts are placed by slot */

  /* — symbol vertical anchor per slot: centred in that third of the stage — */
  [data-slot="top"]    .symbol{ top:16.667%; transform:translate(-50%,-50%); }
  [data-slot="middle"] .symbol{ top:50%;     transform:translate(-50%,-50%); }
  [data-slot="bottom"] .symbol{ top:83.333%; transform:translate(-50%,-50%); }

  /* — ambient band per slot: a fixed third of the stage, feathered on its inner edge(s).
       --anchor-y is the glyph's rough vertical line, exposed so section scenes that aim
       effects at the glyph (e.g. A's arrival beam) stay aligned wherever the section sits. */
  .ambient{
    position:fixed; left:0; right:0; height:33.333vh; overflow:hidden;
    z-index:1; pointer-events:none; opacity:0; transition:opacity 1.6s ease;
  }
  .ambient.on    { opacity:1; transition:opacity .8s ease; }
  .ambient.fading{ opacity:0; transition:opacity 1.6s ease; }

  [data-slot="top"]    .ambient{ top:0;          --anchor-y:16.667vh;
    -webkit-mask:linear-gradient(to bottom,#000 calc(100% - 8px),transparent);
            mask:linear-gradient(to bottom,#000 calc(100% - 8px),transparent); }
  [data-slot="middle"] .ambient{ top:33.333vh;   --anchor-y:50vh;
    -webkit-mask:linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 8px),transparent);
            mask:linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 8px),transparent); }
  [data-slot="bottom"] .ambient{ bottom:0;        --anchor-y:83.333vh;
    -webkit-mask:linear-gradient(to bottom,transparent 0,#000 8px);
            mask:linear-gradient(to bottom,transparent 0,#000 8px); }

  /* an auto-loaded drop-in background (set by js/main.js). Default: fill the band.
     To TILE a texture instead of filling, change cover→auto and no-repeat→repeat. */
  .ambient.has-image{
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }

/* ══════════════════════════════════════════════════════════════════════
   3A · SECTION A  — currently "IMAGINATION"
        glyph: rainbow infinity / star      ambient: cosmic dream-sky (UFOs, stars)
        To re-skin this section, edit only what's below + its markup block in <body>.
   ══════════════════════════════════════════════════════════════════════ */

  /* — glyph — */
  [data-section="a"] .glyph{ width:52px; height:52px; }
  [data-section="a"] .glyph path{ fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
  [data-section="a"] .glyph .base{ stroke:#b3aea4; transition:stroke .45s ease; }
  [data-section="a"] .glyph .flow{ opacity:0; transition:opacity .55s ease 3.2s; filter:blur(0.2px); }
  [data-section="a"] .glyph .flow path{ stroke-dasharray:2.778 97.222; stroke-linecap:butt; filter:drop-shadow(0 0 1.6px currentColor); }
  [data-section="a"] .symbol:hover .glyph .flow,
  [data-section="a"] .symbol:focus-visible .glyph .flow,
  [data-section="a"].near .glyph .flow{ opacity:1; }
  @media (prefers-reduced-motion: no-preference){
    [data-section="a"] .glyph .flow path{ animation:flowDash 4.8s linear infinite; }
  }
  /* A's label + flow wait for the UFO arrival beat before lighting (3.2s) */
  [data-section="a"] .label::after{ transition-delay:3.2s; }
  @media (prefers-reduced-motion: reduce){
    [data-section="a"] .glyph .flow,
    [data-section="a"] .label::after{ transition-delay:0s !important; }
  }

  /* — ambient: the dream-sky — */
  [data-section="a"] .ambient.on::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:radial-gradient(135% 95% at 50% 16%, #4b4090 0%, #342c63 46%, #1e1a3f 100%);
  }
  [data-section="a"] .ds-star{
    position:absolute; width:12px; height:12px; opacity:0; background:#dcab5e;
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  }
  [data-section="a"] .ds-sparkle{
    position:absolute; width:15px; height:15px; opacity:0; background:#ffd86b;
    clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);
  }
  [data-section="a"] .ufo{ position:absolute; width:56px; height:auto; opacity:0; }
  [data-section="a"] .ufo .body{ fill:#b3aea4; }
  [data-section="a"] .ufo .dome{ fill:#cac5bb; }
  [data-section="a"] .ufo .beam{ fill:#ffd54a; opacity:0.16; }
  [data-section="a"] .ufo .l1{ fill:#ff5d73; }
  [data-section="a"] .ufo .l2{ fill:#5ad67d; }
  [data-section="a"] .ufo .l3{ fill:#43c6e8; }
  :root[data-theme="dark"] [data-section="a"] .ufo .dome{ fill:#2f2c27; }
  :root[data-theme="dark"] [data-section="a"] .ufo .body{ fill:#9c978d; }
  @media (prefers-reduced-motion: no-preference){
    [data-section="a"] .ambient.on .ds-star{ animation:dsTwinkle 3.2s ease-in-out infinite, dsFloat 10s ease-in-out infinite alternate; }
    [data-section="a"] .ambient.on .ds-star:nth-child(3n)  { animation-delay:-1.1s,-2s; }
    [data-section="a"] .ambient.on .ds-star:nth-child(3n+1){ animation-delay:-2.3s,-5s; }
    [data-section="a"] .ambient.on .ds-star:nth-child(4n)  { animation-duration:2.6s,13s; }
    [data-section="a"] .ambient.on .ds-sparkle{ animation:dsSparkle 2.2s ease-in-out infinite; }
    [data-section="a"] .ambient.on .ufo.u1{ animation:ufoFly1 15s linear infinite; }
    [data-section="a"] .ambient.on .ufo.u2{ animation:ufoFly2 21s linear infinite -6s; }
    [data-section="a"] .ambient.on .ufo.u3{ animation:ufoFly3 18s linear infinite -11s; }
    [data-section="a"] .ambient.on .ufo circle{ animation:dsBlink 1.5s steps(1,end) infinite; }
    [data-section="a"] .ambient.on .ufo .l2{ animation-delay:0.5s; }
    [data-section="a"] .ambient.on .ufo .l3{ animation-delay:1s; }
  }
  @keyframes dsTwinkle{ 0%,100%{ opacity:0; scale:0.4; } 50%{ opacity:1; scale:1.1; } }
  @keyframes dsSparkle{ 0%,100%{ opacity:0; scale:0.2; rotate:0deg; } 50%{ opacity:1; scale:1; rotate:90deg; } }
  @keyframes dsFloat{ from{ translate:0 0; } to{ translate:6px -12px; } }
  @keyframes dsBlink{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
  @keyframes ufoFly1{ 0%{ transform:translate(-14vw,6vh); opacity:0; } 10%{ opacity:.9; } 50%{ transform:translate(51vw,3vh); } 90%{ opacity:.9; } 100%{ transform:translate(116vw,7vh); opacity:0; } }
  @keyframes ufoFly2{ 0%{ transform:translate(116vw,16vh); opacity:0; } 10%{ opacity:.85; } 50%{ transform:translate(48vw,20vh); } 90%{ opacity:.85; } 100%{ transform:translate(-16vw,14vh); opacity:0; } }
  @keyframes ufoFly3{ 0%{ transform:translate(-14vw,26vh); opacity:0; } 10%{ opacity:.8; } 50%{ transform:translate(52vw,23vh); } 90%{ opacity:.8; } 100%{ transform:translate(116vw,27vh); opacity:0; } }

  /* arrival sequence — a UFO glides in, hovers over the glyph, fires a beam + sparks,
     then leaves as the glyph lights. Anchored to --anchor-y so it tracks the slot. */
  [data-section="a"] .ufo.arrival{ left:50vw; top:var(--anchor-y,13vh); width:64px; margin-left:-34px; margin-top:-64px; opacity:0; }
  [data-section="a"] .arrival-beam{
    position:absolute; left:50vw; top:var(--anchor-y,13vh); width:4px; height:0;
    margin-left:-2px; margin-top:-40px; transform-origin:top center;
    background:linear-gradient(to bottom, rgba(255,213,74,0.55), rgba(255,213,74,0));
    opacity:0; border-radius:2px; filter:blur(0.5px);
  }
  [data-section="a"] .magic-spark{
    position:absolute; left:50vw; top:var(--anchor-y,13vh); width:10px; height:10px; opacity:0;
    margin-left:-5px; margin-top:-5px; background:#ffd86b;
    clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);
  }
  @media (prefers-reduced-motion: no-preference){
    [data-section="a"] .ambient.on .ufo.arrival{ animation:ufoArrive 2.2s cubic-bezier(.25,.1,.25,1) forwards, ufoLeave 1.8s cubic-bezier(.45,0,.55,1) forwards 3.9s; }
    [data-section="a"] .ambient.on .ufo.arrival circle{ animation:dsBlink 1.5s steps(1,end) infinite; }
    [data-section="a"] .ambient.on .ufo.arrival .l2{ animation-delay:0.5s; }
    [data-section="a"] .ambient.on .ufo.arrival .l3{ animation-delay:1s; }
    [data-section="a"] .ambient.on .arrival-beam{ animation:beamDown 1.6s ease-out forwards; animation-delay:2.45s; }
    [data-section="a"] .ambient.on .magic-spark{ animation:magicBurst 0.9s ease-out forwards; }
  }
  @keyframes ufoArrive{ 0%{ transform:translate(-30vw,-16vh) scale(0.7) rotate(-6deg); opacity:0; } 30%{ opacity:1; } 100%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; } }
  @keyframes ufoLeave{ 0%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; } 70%{ opacity:0.5; } 100%{ transform:translate(16vw,-24vh) scale(0.55) rotate(6deg); opacity:0; } }
  @keyframes beamDown{ 0%{ height:0; opacity:0; } 35%{ height:78px; opacity:0.9; } 75%{ height:78px; opacity:0.55; } 100%{ height:0; opacity:0; } }
  @keyframes magicBurst{ 0%{ opacity:0; scale:0.2; } 55%{ opacity:1; scale:1.05; } 100%{ opacity:0; scale:0.5; } }

/* ══════════════════════════════════════════════════════════════════════
   3B · SECTION B  — currently "BRIDGE"
        glyph: suspension bridge (Golden-Gate style)   ambient: (none — placeholder ready)
        sub-nav: small pill of links that fades in on approach.
   ══════════════════════════════════════════════════════════════════════ */

  [data-section="b"] .link{ --glyph-gap:12px; }
  [data-section="b"] .glyph{ width:74px; height:auto; }

  /* the bridge: all the stroke-work shares one inherited colour, so a single rule
     can swap the whole thing to a continuous rainbow on hover. */
  [data-section="b"] .bridge{
    fill:none; stroke:#b3aea4; stroke-linecap:round; stroke-linejoin:round;
    transition:stroke .5s ease;
  }
  [data-section="b"] .bridge .cable{ stroke-width:1.6; }
  [data-section="b"] .bridge .suspenders line{ stroke-width:1; }
  [data-section="b"] .bridge .tower{ stroke-width:4; }
  [data-section="b"] .bridge .tip{ stroke-width:1.6; }
  [data-section="b"] .bridge .deck{ stroke-width:4; }
  [data-section="b"] .bridge .post{ stroke-width:4; }
  :root[data-theme="dark"] [data-section="b"] .bridge{ stroke:#cac5bb; }

  /* hover / proximity → one continuous rainbow stroke that slowly cycles */
  [data-section="b"] .symbol:hover .bridge,
  [data-section="b"] .symbol:focus-visible .bridge,
  [data-section="b"].near .bridge{ stroke:url(#rainbowStrokeGradient); }
  @media (prefers-reduced-motion: no-preference){
    [data-section="b"] .symbol:hover .bridge,
    [data-section="b"] .symbol:focus-visible .bridge,
    [data-section="b"].near .bridge{ animation:rainbowCycle 3s linear infinite; }
  }
  @keyframes rainbowCycle{
    0%  { filter:hue-rotate(0deg)   saturate(1.3) drop-shadow(0 0 1px currentColor); }
    100%{ filter:hue-rotate(360deg) saturate(1.3) drop-shadow(0 0 1px currentColor); }
  }

  /* B's label uses a slightly heavier centred treatment; its grey base colour differs */
  [data-section="b"] .label{ color:#6b6358; font-size:clamp(1.1rem,3vw,1.35rem); letter-spacing:0.12em; }
  :root[data-theme="dark"] [data-section="b"] .label{ color:#cabfae; }

  /* sub-nav (the small link pill) — absolutely placed just below the symbol so it
     doesn't shift the bridge+label off the section's centre line */
  [data-section="b"] .subnav{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:14px; text-align:center; font-size:0.78rem; letter-spacing:0.05em;
    white-space:nowrap;
    opacity:0; transition:opacity .5s ease; pointer-events:auto;
    padding:0.5em 1.1em; border-radius:999px; background-color:rgba(255,255,255,0.78);
  }
  [data-section="b"] .symbol:hover .subnav,
  [data-section="b"].near .subnav{ opacity:1; }
  [data-section="b"] .subnav a{ color:#6b6358; text-decoration:none; transition:color .4s ease; }
  [data-section="b"] .subnav a:hover{ color:#b3676b; }
  [data-section="b"] .subnav a:focus-visible{ outline:2px solid #b3676b; outline-offset:4px; border-radius:2px; }
  [data-section="b"] .subnav .sep{ color:#c9c4b8; margin:0 0.55rem; }
  :root[data-theme="dark"] [data-section="b"] .subnav{ background-color:rgba(26,25,22,0.78); }
  :root[data-theme="dark"] [data-section="b"] .subnav a{ color:#cabfae; }
  :root[data-theme="dark"] [data-section="b"] .subnav .sep{ color:#565049; }

/* ══════════════════════════════════════════════════════════════════════
   3C · SECTION C  — currently "BEING"
        glyph: rayed sun (grey → gold)      ambient: none (drop an image into
        assets/backgrounds/ named c.* to give it one — see README)
   ══════════════════════════════════════════════════════════════════════ */

  [data-section="c"] .link{ --glyph-gap:11px; }
  [data-section="c"] .glyph{ width:66px; height:66px; transition:transform .4s ease; }
  [data-section="c"] .glyph .sun-body{ color:#b7b7b7; fill:currentColor; transition:color .8s ease, filter .8s ease; }
  :root[data-theme="dark"] [data-section="c"] .glyph .sun-body{ color:#c8c0b2; }
  [data-section="c"] .symbol:hover .glyph .sun-body,
  [data-section="c"] .symbol:focus-visible .glyph .sun-body,
  [data-section="c"].near .glyph .sun-body{
    color:#ffd54a; animation:sunPulse 3.8s ease-in-out infinite alternate; filter:drop-shadow(0 0 3px rgba(255,213,74,.3));
  }
  [data-section="c"] .symbol:hover,
  [data-section="c"] .symbol:focus-visible,
  [data-section="c"].near .symbol{ color:#5c5347; }
  @keyframes sunPulse{ from{ filter:drop-shadow(0 0 2px rgba(255,213,74,.25)); } to{ filter:drop-shadow(0 0 6px rgba(255,213,74,.5)); } }