/* story.css — MISSION LOG scrollytelling, layered on xc.css (ALTITUDE design system) */
main{position:relative;z-index:1}
.lg-hero,.log,.lg-end{position:relative;padding:calc(var(--navh) + 89px) var(--gut) 89px calc(var(--rail) + var(--gut))}
.lg-hero .bi,.lg-end .bi,.lg-copy{text-shadow:0 1px 13px rgba(2,4,10,.95),0 0 34px rgba(2,4,10,.8)}

/* progress hairline under the nav */
.lg-prog{position:fixed;left:0;right:0;top:var(--navh);height:1px;z-index:45;background:var(--teal);box-shadow:0 0 8px var(--teal);transform-origin:0 50%;transform:scaleX(var(--p));pointer-events:none}

/* HERO — copy pinned top-left; lower-right stays open for the ambient cat */
.lg-hero{min-height:100vh;display:flex;align-items:flex-start}
.lg-hero .bi{max-width:none;display:grid;grid-template-columns:minmax(0,600px) 1fr;row-gap:0}
.lg-hero .bi>*{grid-column:1}
.lg-hero h1{font-size:clamp(55px,8.4vw,144px);line-height:.95;max-width:none}
.lg-hero .lead{max-width:44ch;margin-top:34px}
.lg-index{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:13px 21px;width:fit-content;margin-top:34px;font-family:var(--mono)}
.lg-index .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.21em;color:var(--muted)}
.lg-index code{font-size:14px;color:var(--teal);font-weight:500;margin-right:13px}
.lg-index code.ok{color:var(--ok);margin-right:0}
.lg-index code.ok:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:middle;animation:livepulse 1.8s ease-out infinite}
.lg-scroll{display:inline-flex;align-items:center;gap:8px;margin-top:55px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--line2);padding-bottom:5px;transition:color .15s,border-color .15s}
.lg-scroll:hover{color:var(--hot);border-color:var(--teal)}

/* LOG ENTRIES — asymmetric two-column, alternating; ghost number behind */
.log{min-height:100vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(34px,5vw,89px);align-items:center;scroll-margin-top:var(--navh)}
.log>*{position:relative;z-index:1}
.lg-copy{grid-column:1;grid-row:1;max-width:720px}
.lg-fig{grid-column:2;grid-row:1;align-self:start;margin-top:55px}
.log:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.log:nth-of-type(even) .lg-copy{grid-column:2;justify-self:end}
.log:nth-of-type(even) .lg-fig{grid-column:1;align-self:end;margin:0 0 55px}
.log .mk{margin-bottom:13px}
.snum{font-family:var(--mono);font-size:12px;letter-spacing:.21em;text-transform:uppercase;color:var(--xrp2);margin-bottom:21px}
.log h2,.lg-end h2,.lg-hero h1,.snum,.log .mk{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto} /* de compounds ("Lichtgeschwindigkeit") must never widen the page at 450px */
.log h2{font-size:clamp(38px,5.4vw,88px);max-width:13ch}
.lg-body{padding:34px;margin-top:34px;max-width:58ch;font-size:clamp(16px,1.2vw,18px);color:var(--ink)}
.lg-body b{color:var(--hot);font-weight:600}
.lg-body em{color:var(--teal);font-style:normal}
.lg-ghost{position:absolute;z-index:0;right:var(--gut);top:calc(var(--navh) + 34px);font-family:var(--mono);font-size:clamp(144px,24vw,377px);font-weight:500;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(127,233,255,.16);pointer-events:none;user-select:none}
.log:nth-of-type(even) .lg-ghost{right:auto;left:calc(var(--rail) + var(--gut));top:auto;bottom:34px}

/* figure: hairline HUD frame, duotone (grayscale → luminosity over XRP→teal ramp), vignette mask, scanlines */
.lg-fig{padding:8px;max-width:640px;width:100%}
.lg-shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#041029 0%,var(--deep) 30%,var(--xrp) 68%,var(--teal) 100%);-webkit-mask-image:radial-gradient(ellipse 100% 95% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 100% 95% at 50% 50%,#000 55%,transparent 100%)}
.lg-shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.96);mix-blend-mode:luminosity;transform:scale(1.12)}
.lg-shot:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(2,4,10,.28) 2px 3px),linear-gradient(180deg,rgba(2,4,10,0) 60%,rgba(2,4,10,.55))}
.lg-fig figcaption{display:flex;justify-content:space-between;gap:13px;padding:10px 8px 2px;font-family:var(--mono);font-size:10px;letter-spacing:.21em;text-transform:uppercase;color:var(--muted)}

/* END — transmission complete */
.lg-end{min-height:80vh;display:flex;align-items:center}
.lg-end h2{font-size:clamp(40px,6.2vw,104px);max-width:12ch}
.lg-end .sec-sub{color:var(--ink);font-size:clamp(17px,1.4vw,21px)}

/* REVEAL — scroll-driven where supported; .io class-toggle fallback (set by JS when view() is missing) */
@keyframes lg-in{from{opacity:0;transform:translateY(55px)}to{opacity:1;transform:none}}
@keyframes lg-par{from{transform:translateY(-7%) scale(1.12)}to{transform:translateY(7%) scale(1.12)}}
@keyframes lg-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.js .lg-hero .lg-r{animation:lg-in .9s cubic-bezier(.2,.7,.2,1) both}
html.js .lg-hero .lg-r:nth-child(2){animation-delay:.08s}html.js .lg-hero .lg-r:nth-child(3){animation-delay:.16s}html.js .lg-hero .lg-r:nth-child(4){animation-delay:.24s}html.js .lg-hero .lg-r:nth-child(5){animation-delay:.32s}
@supports (animation-timeline:view()){
  html.js .log .lg-r,html.js .lg-end .lg-r{animation:lg-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  html.js .lg-shot img{animation:lg-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  html.js .lg-prog{animation:lg-grow linear both;animation-timeline:scroll(root)}
}
html.io .log .lg-r,html.io .lg-end .lg-r{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.io .in .lg-r{opacity:1;transform:none}
html.io .in .lg-body{transition-delay:.12s}html.io .in .lg-fig,html.io .in .hero-cta{transition-delay:.21s}

/* responsive */
@media (max-width:1180px){.log{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.log:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lg-fig{max-width:520px}}
@media (max-width:900px){
  .lg-hero,.log,.lg-end{padding:calc(var(--navh) + 34px + 34px) var(--gut) 55px;scroll-margin-top:calc(var(--navh) + 34px)}
  .lg-prog{top:calc(var(--navh) + 34px)}
  .lg-hero{min-height:88vh}.lg-hero .bi{grid-template-columns:1fr}.lg-hero h1{font-size:clamp(48px,14vw,96px)}
  .lg-hero .lead{background:var(--glass);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);border-left:1px solid var(--line2);padding:13px 16px;margin-top:21px} /* ambient cat walks mid-viewport on phones; keep the lead legible over it */
  .log,.log:nth-of-type(even){grid-template-columns:1fr;row-gap:34px;min-height:0}
  .lg-copy,.log:nth-of-type(even) .lg-copy{grid-column:1;grid-row:1;justify-self:start}
  .lg-fig,.log:nth-of-type(even) .lg-fig{grid-column:1;grid-row:2;margin:0;max-width:none;align-self:start}
  .log h2{font-size:clamp(34px,9vw,60px);max-width:none}
  .lg-body{padding:21px;max-width:none}
  .lg-ghost,.log:nth-of-type(even) .lg-ghost{right:var(--gut);left:auto;top:calc(var(--navh) + 21px);bottom:auto;font-size:clamp(96px,28vw,144px)}
  .lg-end{min-height:0}
}
@media (max-width:900px){.lg-scroll{background:rgba(2,4,10,.72);padding:8px 10px 6px;border:1px solid var(--line);border-bottom-color:var(--line2)}}
@media (max-width:520px){.lg-index{padding:10px 13px}.lg-index code{margin-right:8px}.lg-scroll{margin-top:34px}}
@media (prefers-reduced-motion:reduce){
  .lg-r,.lg-shot img,.lg-prog,.lg-index code.ok:before{animation:none!important;transition:none!important}
  html.io .log .lg-r,html.io .lg-end .lg-r{opacity:1;transform:none}
  .lg-shot img{transform:scale(1.12)}
}
.lg-hero h1 .accent{display:block} /* "log." sits under "Mission"; break-word (not anywhere) keeps words whole */
.lg-hero .bi>h1{grid-column:1/-1} /* title gets the full width: "Mission" must never break (zoomed-out windows push it past the 600px copy column) */