/* ============================================================
   kelvinloh.my · Anime.js progressive-enhancement styles
   Two signature moments:
     1) hero "Deserve." hand-drawn underline   (.kl-underline)
     2) about.html "The Ascent" scroll timeline (.kla-*)
   All purely additive — static HTML/SEO untouched.
   ============================================================ */

/* ---------- 1 · HERO UNDERLINE ---------- */
.v2-hero h1 em{position:relative}
.kl-underline{
  position:absolute; left:-3%; bottom:-.16em; width:106%; height:.40em;
  overflow:visible; pointer-events:none;
}
.kl-underline path{
  fill:none; stroke:var(--orange,#F6921E); stroke-width:7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 2 · THE ASCENT ---------- */
/* when enhanced, keep the static milestone list in the DOM (SEO + a11y) but visually hidden */
.kla-on .v2-timeline{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.kla{
  position:relative; height:520vh; background:#0c0f15;
  margin-left:calc(50% - 50vw); width:100vw; box-sizing:border-box;
}
.kla-stage{position:sticky; top:0; height:100vh; overflow:hidden}
.kla-scene{position:absolute; inset:0; width:100%; height:100%}

.kla-ridge-far{fill:#141925}
.kla-ridge-mid{fill:#10141d}
.kla-ridge-near{fill:#0a0d13}
#kla-trail{fill:none; stroke:url(#kla-grad); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(246,146,30,.45))}
#kla-ghost{fill:none; stroke:#222a39; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.kla-dot{fill:#39424f; transition:fill .3s ease, r .3s ease}
.kla-ring{fill:none; stroke:var(--orange,#F6921E); stroke-width:2; opacity:0}
.kla-yr{font-family:var(--font-serif,'Source Serif 4',serif); font-weight:600; font-size:15px; fill:#6b7480; opacity:.001; transition:fill .3s ease}
.kla-star{fill:#fff}
#kla-climber{fill:var(--orange,#F6921E)}
#kla-glow{fill:var(--orange,#F6921E); opacity:.25}

.kla-cards{position:absolute; right:6%; top:50%; transform:translateY(-50%); width:min(40%,420px); height:60vh; pointer-events:none}
.kla-card{position:absolute; inset:0; opacity:0; transform:translateY(18px); display:flex; flex-direction:column; justify-content:center; gap:14px}
.kla-card .kla-idx{font-family:var(--font-sans,'Inter',sans-serif); font-size:12px; font-weight:600; letter-spacing:.14em; color:#5b6472}
.kla-card .kla-cyr{font-family:var(--font-serif,serif); font-weight:600; font-size:clamp(40px,7vw,72px); color:var(--orange,#F6921E); line-height:1; letter-spacing:-.02em}
.kla-card h3{font-family:var(--font-serif,serif); font-weight:600; font-size:clamp(20px,2.6vw,30px); color:#fff; line-height:1.15; letter-spacing:-.01em; margin:0}
.kla-card h3 em{font-style:italic; color:#fff}
.kla-card p{font-family:var(--font-sans,sans-serif); font-size:15px; line-height:1.6; color:#aeb6c2; max-width:380px; margin:0}

.kla-rail{position:absolute; left:6%; top:18%; bottom:18%; width:2px; background:#1d2533; border-radius:2px}
.kla-rail-fill{position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(var(--orange,#F6921E),#ffb45c); border-radius:2px}

.kla-summit{position:absolute; left:0; right:0; top:14%; text-align:center; opacity:0; pointer-events:none}
.kla-summit span{font-family:var(--font-serif,serif); font-weight:600; font-size:clamp(22px,3.4vw,34px); color:#fff; letter-spacing:-.01em}
.kla-summit em{color:var(--orange,#F6921E); font-style:normal}

@media(max-width:760px){
  .kla-rail{display:none}
  .kla-yr{display:none}                 /* redundant with the big card year */
  .kla-cards{right:0; left:0; top:auto; bottom:0; width:auto; transform:none; height:auto; min-height:54vh; padding:0;
    background:linear-gradient(to top,rgba(8,10,16,.97) 0%,rgba(8,10,16,.92) 58%,rgba(8,10,16,0) 100%)}
  /* padding lives on the CARD (absolute, inset:0) — parent padding is ignored by inset:0 children */
  .kla-card{justify-content:flex-end; align-items:center; text-align:center; gap:9px;
    padding:0 28px calc(96px + env(safe-area-inset-bottom,0px))}
  .kla-card .kla-cyr{font-size:44px}
  .kla-card h3{font-size:21px}
  .kla-card p{font-size:14px; margin:0 auto; max-width:34ch}
}