/* =====================================================================
   Elementi Studios Labs - Story-Komponenten fuer Lore-News
   ---------------------------------------------------------------------
   .story.gi   Grid Interference        (The Grid greift in den Text ein)
   .story.rt   Recovered Transmission   (alte, beschaedigte Aufzeichnung)
   .story.ga   Grid Archive             (Archivzugriff, von The Grid gesperrt)
   .story.lr   Logo Reveal              (Elementi, Genesis, The Grid, Last Bastion)
   .story.bi   Biome                    (Regionsbild erwacht passend zur Region)
   .story-fig  Artwork mit Bildunterschrift
   .story-pull hervorgehobener Satz
   .story-end  Abschluss-Signatur

   Wirkt nur dort, wo das Markup im Artikel ausdruecklich steht.
   Ohne JavaScript und bei prefers-reduced-motion ist alles statisch
   und vollstaendig lesbar. Alle Texte stehen im Markup, nicht hier.
   ===================================================================== */

.story,.story-fig,.story-end{
  --g-bg:#060b16;--g-bg2:#0b1628;--g-line:rgba(112,160,255,.22);
  --g-txt:#dbe6fb;--g-dim:#7f92b3;--g-acc:#5f9bff;--g-hi:#a8c8ff;--g-ink:#0b1628;
  --b-bg:#16120e;--b-bg2:#211a13;--b-line:rgba(214,176,120,.24);
  --b-txt:#ebdfc8;--b-dim:#a7977b;--b-acc:#d39c4d;--b-rust:#cf6a43;
  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono","Noto Sans JP",monospace;
}

.story-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Artwork ---------- */
.story-fig{margin:30px 0 28px}
.story-fig img{display:block;width:100%;height:auto;aspect-ratio:2400/1344;object-fit:cover;
  border-radius:14px;background:#0a0f18;box-shadow:0 14px 34px rgba(10,16,28,.18)}
.story-fig figcaption{margin-top:11px;font-size:13px;line-height:1.55;color:var(--text3,#6b7484)}
.story-fig figcaption b{font-family:'Cinzel','Noto Serif JP',serif;font-weight:700;letter-spacing:.06em;color:var(--text,#16202f)}

/* ---------- Hervorhebung / Signatur ---------- */
p.story-pull{font-weight:600;color:var(--text,#16202f);border-left:3px solid var(--nc,#0284c7);padding-left:16px}
p.story-end{margin-top:44px;text-align:center}
p.story-end span{display:block;font-family:'Cinzel','Noto Serif JP',serif;font-weight:700;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--text,#16202f)}
p.story-end em{display:block;margin-top:4px;font-size:14px;color:var(--text3,#6b7484)}

/* ---------- Region-Kicker, Bildnachweis, Linkzeile ---------- */
p.story-kick{margin:-4px 0 14px;font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-weight:600;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--nc,#0284c7)}
p.story-note{margin-top:40px;padding-top:16px;border-top:1px solid var(--line,#e4e7ec);font-size:13px;line-height:1.6;color:var(--text3,#6b7484)}
p.story-links{font-size:14px}

/* ---------- gemeinsame Bausteine ---------- */
.story{position:relative}
/* Overlay: liegt IM Absatz, erbt dessen Typografie exakt. Die sichtbaren
   Zeichen kommen nur aus ::before (data-g) - kein Text im DOM, nichts
   fuer Suchmaschinen, Screenreader oder die Zwischenablage. */
.story .has-fx{position:relative;font-kerning:none;font-variant-ligatures:none}
.story .story-fx{position:absolute;left:0;top:0;right:0;pointer-events:none;
  -webkit-user-select:none;user-select:none;opacity:0}
.story .is-fx>.story-fx{opacity:1}
.story .story-fx .w{white-space:nowrap}
.story .story-fx i{font-style:normal;display:inline-block;text-align:center;white-space:pre;vertical-align:top}
.story .story-fx i::before{content:attr(data-g)}
.story .story-fx i.h{visibility:hidden}
.story .story-dots{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:pre}
.story .fold{display:grid;grid-template-rows:1fr}
.story .fold>.fold-in{min-height:0;overflow:hidden}

/* =====================================================================
   GRID INTERFERENCE
   ===================================================================== */
.story.gi{margin:24px 0 26px}
/* statische Fassung (ohne JS): Original bleibt lesbar, markiert */
.story.gi .gi-original [data-k]{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.story.gi:not(.is-js) .gi-original{text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:rgba(95,155,255,.55)}
.story.gi:not(.is-js) .gi-original [data-k]{background:var(--g-ink);color:transparent;border-radius:2px}

.story.gi .gi-stamp{display:flex;align-items:center;gap:12px;margin:12px 0 0;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#1c3764;
  line-height:1.4;text-align:center}
.story.gi .gi-stamp::before,.story.gi .gi-stamp::after{content:"";flex:1 1 0;min-width:24px;height:10px;
  background:repeating-linear-gradient(90deg,var(--g-ink) 0 9px,transparent 9px 11px)}

.story.gi .gi-panel,.story.ga .ga-grid{
  background:
    linear-gradient(rgba(112,160,255,.05) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(112,160,255,.05) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(160deg,var(--g-bg2),var(--g-bg));
  color:var(--g-txt);font-family:var(--mono)}
.story.gi .gi-panel{margin-top:16px;padding:20px 22px 18px;border:1px solid var(--g-line);border-radius:14px;
  box-shadow:0 14px 34px rgba(6,11,22,.28)}

.story.gi .gi-sys p,.story.ga .ga-grid p{margin:0;font-size:11.5px;line-height:1.95;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-dim)}
.story.gi p.gi-alert,.story.ga p.gi-alert{display:flex;align-items:center;gap:10px;color:var(--g-hi);font-weight:700;letter-spacing:.2em}
.story.gi p.gi-alert::before,.story.ga p.gi-alert::before{content:"";width:7px;height:7px;flex:none;
  background:var(--g-acc);box-shadow:0 0 0 3px rgba(95,155,255,.16)}
.story.gi .gi-auth{margin-top:15px;padding-top:14px;border-top:1px solid var(--g-line)}
.story.gi .gi-auth p{position:relative;margin:0 0 5px;padding-left:16px;font-size:13.5px;line-height:1.65;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--g-txt)}
.story.gi .gi-auth p:last-child{margin-bottom:0}
.story.gi .gi-auth p::before{content:"";position:absolute;left:0;top:.42em;width:3px;height:.9em;background:var(--g-acc)}

/* JS-Zustaende */
.story.gi.is-js .gi-stamp{visibility:hidden;opacity:0;transition:opacity .35s}
.story.gi .gi-original.is-fx{color:transparent}
.story.gi .gi-original.is-fx .story-fx{color:var(--text2,#515c6b)}
.story.gi .gi-original.is-fx::selection,.story.gi .gi-original.is-fx [data-k]::selection{color:var(--text,#16202f);background:rgba(95,155,255,.3)}
.story.gi.is-reveal .gi-original .story-fx{opacity:.12}
.story.gi .story-fx i.c{color:#2a5596;transform:translateX(var(--dx,0));opacity:var(--o,1)}
.story.gi .story-fx i.c.bl{filter:blur(.4px)}
.story.gi .story-fx i.x{color:transparent;
  background:linear-gradient(transparent 24%,var(--g-ink) 24%,var(--g-ink) 80%,transparent 80%)}
.story.gi.is-lite .story-fx i.c{transform:none;opacity:1;filter:none}
.story.gi[data-phase="suppress"] .gi-stamp,
.story.gi[data-phase="intervene"] .gi-stamp,
.story.gi[data-phase="final"] .gi-stamp{visibility:visible;opacity:1}
.story.gi.is-js .fold{grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1)}
.story.gi.is-js.is-open .fold{grid-template-rows:1fr}
.story.gi.is-lite .fold{transition-duration:.3s}
.story.gi.is-js .gi-sys p,.story.gi.is-js .gi-auth p{opacity:0;transform:translateY(3px);
  transition:opacity .32s ease,transform .32s ease}
.story.gi.is-js .gi-auth p{clip-path:inset(0 100% 0 0);transition:opacity .2s,clip-path .5s cubic-bezier(.3,.6,.2,1)}
.story.gi.is-js p.on{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.story.gi.is-restore .gi-original{text-decoration:line-through;text-decoration-color:rgba(95,155,255,.55)}

/* =====================================================================
   RECOVERED TRANSMISSION  (Last Bastion / historisches Archiv)
   ===================================================================== */
.story.rt,.story.ga .ga-archive{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .62 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 0% 0%,rgba(211,156,77,.10),transparent 60%),
    linear-gradient(170deg,var(--b-bg2),var(--b-bg));
  color:var(--b-txt)}
.story.rt{margin:28px 0;padding:22px 22px 20px;border:1px solid var(--b-line);border-radius:14px;overflow:hidden;
  box-shadow:0 14px 34px rgba(22,16,10,.26)}
.story.rt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px)}
.story.rt .rt-head p{margin:0;font-family:var(--mono);font-size:11px;line-height:1.95;letter-spacing:.16em;
  text-transform:uppercase;color:var(--b-dim)}
.story.rt p.rt-title{color:var(--b-acc);font-weight:700;letter-spacing:.2em}
.story.rt .rt-bad{color:var(--b-rust)}
.story.rt .rt-body{margin-top:14px;padding-top:14px;border-top:1px dashed var(--b-line)}
.story.rt .rt-body p{margin:0 0 7px;font-size:15px;line-height:1.62;color:var(--b-txt)}
.story.rt .rt-body p.rt-key{font-weight:700}
.story.rt .rt-body p.rt-cut{color:#d9ccb3}
.story.rt .rt-body p.rt-end{margin:12px 0 0;font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--b-rust)}

.story.rt.is-js .rt-head p,.story.rt.is-js .rt-body p{opacity:0;transition:opacity .25s linear}
.story.rt.is-js p.on{opacity:1}
.story.rt.is-js p.flick{animation:rtFlick .5s steps(1,end) 1}
@keyframes rtFlick{0%{opacity:0}18%{opacity:.55}30%{opacity:.12}46%{opacity:.8}60%{opacity:.35}100%{opacity:1}}
.story.rt p.rt-cut.is-fx,.story.rt p.rt-end.is-fx{color:transparent}
.story.rt p.rt-cut.is-fx .story-fx{color:#d9ccb3}
.story.rt p.rt-end.is-fx .story-fx{color:var(--b-rust)}
.story.rt .rt-end .story-fx i.c{opacity:.9}
.story.rt .rt-end .story-fx i.c.dim{opacity:.5}
.story.rt.drop{animation:rtDrop .34s steps(1,end) 1}
@keyframes rtDrop{0%{filter:none}30%{filter:brightness(1.6) contrast(1.2)}55%{filter:brightness(.55)}100%{filter:none}}

/* =====================================================================
   GRID ARCHIVE  (Archiv angekuendigt, The Grid sperrt den Zugriff)
   ===================================================================== */
.story.ga{margin:30px 0 10px;border:1px solid var(--b-line);border-radius:14px;overflow:hidden;
  box-shadow:0 14px 34px rgba(12,12,16,.26);transition:border-color .6s}
.story.ga .ga-archive{position:relative;padding:18px 22px 16px;font-family:var(--mono);transition:filter .7s}
.story.ga .ga-archive p{margin:0;font-size:11.5px;line-height:1.95;letter-spacing:.16em;text-transform:uppercase;color:var(--b-dim)}
.story.ga p.ga-title{color:var(--b-acc);font-weight:700;letter-spacing:.2em}
.story.ga p.ga-subj{color:var(--b-txt);font-weight:700}
.story.ga .ga-grid{padding:18px 22px 20px;border-top:1px solid var(--g-line)}
.story.ga p.ga-denied{margin:4px 0 6px;font-size:19px;line-height:1.4;letter-spacing:.32em;font-weight:700;color:var(--g-txt)}
.story.ga.is-grid,.story.ga:not(.is-js){border-color:var(--g-line)}
.story.ga:not(.is-js) .ga-archive,.story.ga.is-grid .ga-archive{filter:saturate(.22) brightness(.62)}
.story.ga .ga-archive::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--g-acc),transparent);box-shadow:0 0 14px rgba(95,155,255,.6)}
.story.ga.is-scan .ga-archive::after{animation:gaScan .55s cubic-bezier(.4,.1,.3,1) 1}
@keyframes gaScan{0%{top:0;opacity:1}100%{top:100%;opacity:.2}}

.story.ga.is-js .ga-archive p,.story.ga.is-js .ga-grid p{opacity:0;transition:opacity .3s ease}
.story.ga.is-js p.on{opacity:1}
.story.ga.is-js .fold{grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1)}
.story.ga.is-js.is-open .fold{grid-template-rows:1fr}

/* laufende Punkte */
.story .story-dots.run{animation:storyDots 1s steps(4,end) infinite}
@keyframes storyDots{0%{width:0}100%{width:4ch}}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .story.gi .gi-panel,.story.rt,.story.ga .ga-archive,.story.ga .ga-grid{padding-left:16px;padding-right:16px}
  .story.gi .gi-sys p,.story.ga .ga-grid p,.story.ga .ga-archive p,.story.rt .rt-head p{font-size:10.5px;letter-spacing:.12em}
  .story.gi .gi-auth p{font-size:12.5px;letter-spacing:.05em}
  .story.ga p.ga-denied{font-size:16px;letter-spacing:.24em}
  .story.gi .gi-stamp{font-size:10px;letter-spacing:.16em;gap:8px}
  .story.rt .rt-body p{font-size:14.5px}
}

/* =====================================================================
   LOGO REVEAL  .story.lr   (data-lr = elementi | genesis | grid | bastion)
   Das <img> ist immer das echte, unveraenderte Logo. Effekte liegen als
   aria-hidden-Ebenen darueber und verschwinden im Endzustand.
   ===================================================================== */
figure.story.lr{margin:30px 0 28px}
.story.lr .lr-stage{position:relative;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;isolation:isolate}
.story.lr .lr-box{position:relative;line-height:0;margin:0 auto}
.story.lr .lr-box>img{display:block;width:100%;height:auto;transition:opacity .45s ease}
.story.lr figcaption{margin-top:11px;font-size:13px;line-height:1.55;color:var(--text3,#6b7484)}
.story.lr figcaption b{font-family:'Cinzel','Noto Serif JP',serif;font-weight:700;letter-spacing:.06em;color:var(--text,#16202f)}
.story.lr .lr-fx,.story.lr .lr-glint,.story.lr .lr-mesh,.story.lr .lr-scan,
.story.lr .lr-pulse,.story.lr .lr-amb,.story.lr .lr-light,.story.lr .lr-ring{position:absolute;inset:0;pointer-events:none}
.story.lr .lr-pc{position:absolute;inset:0;display:block;background-repeat:no-repeat;background-size:100% 100%;opacity:0}

/* Buehnen */
.story.lr-el .lr-stage{padding:clamp(26px,5vw,46px) 20px;
  background:radial-gradient(85% 95% at 50% 42%,#fffdf8 0%,#f7f1e4 62%,#efe5d0 100%);
  box-shadow:inset 0 0 0 1px rgba(176,138,46,.2)}
.story.lr-el .lr-box{width:min(280px,62%)}
.story.lr-ge .lr-stage{padding:clamp(26px,5vw,44px) 20px;
  background:radial-gradient(70% 95% at 50% 45%,#2b2311 0%,#120f09 58%,#0a0907 100%)}
.story.lr-ge .lr-box{width:min(230px,52%)}
.story.lr-gr .lr-stage{background:#05070d}
.story.lr-lb .lr-stage{background:#0d0a07}
.story.lr-gr .lr-box,.story.lr-lb .lr-box{width:100%}
.story.lr-gr .lr-box>img,.story.lr-lb .lr-box>img{aspect-ratio:2400/1344;object-fit:cover}

/* JS aktiv: Logo wartet unsichtbar, Endzustand blendet es ein */
.story.lr.is-js:not(.is-final) .lr-box>img{opacity:0}
.story.lr.is-final .lr-fx,.story.lr.is-final .lr-mesh,.story.lr.is-final .lr-scan{opacity:0;transition:opacity .5s ease .12s}

/* Glanz (auf die Form des Logos maskiert) */
.story.lr .lr-glint{opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,246,222,.95) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:130% 0}
.story.lr-ge .lr-glint{mix-blend-mode:color-dodge;background-image:linear-gradient(105deg,transparent 40%,rgba(255,226,150,.9) 50%,transparent 60%)}
.story.lr .lr-glint.on{animation:lrGlint 1.25s cubic-bezier(.35,.1,.25,1) forwards}
@keyframes lrGlint{0%{opacity:0;background-position:130% 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:-30% 0}}

/* --- Elementi: vier Elemente nacheinander, dann der Schriftzug --- */
@property --rv{syntax:'<percentage>';inherits:false;initial-value:0%}
.story.lr-el .lr-pc.p-petal{
  -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 var(--rv),transparent calc(var(--rv) + 9%));
  mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 var(--rv),transparent calc(var(--rv) + 9%))}
.story.lr-el .p-water{--cx:29.6%;--cy:39.7%;--re:24%}
.story.lr-el .p-fire{--cx:50%;--cy:18.7%;--re:23%}
.story.lr-el .p-air{--cx:69.7%;--cy:39.7%;--re:24%}
.story.lr-el .p-earth{--cx:50%;--cy:60%;--re:28%}
.story.lr-el .lr-pc.p-petal.on{animation:lrPetal 1.15s cubic-bezier(.3,.6,.25,1) forwards}
@keyframes lrPetal{0%{opacity:0;--rv:0%}20%{opacity:1}100%{opacity:1;--rv:var(--re)}}
.story.lr-el .lr-pc.p-wm{transform:translateY(10px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
.story.lr-el .lr-pc.p-wm.on{opacity:1;transform:none}

/* --- Genesis of the Grid: goldener Ring, dann oeffnet sich das Abzeichen --- */
.story.lr-ge .lr-ring{inset:-7%}
.story.lr-ge .lr-ring svg{width:100%;height:100%;display:block;overflow:visible;transform:rotate(-90deg)}
.story.lr-ge .lr-ring circle{fill:none;stroke-width:1.15;stroke-linecap:round}
.story.lr-ge .lr-ring circle.halo{opacity:0;stroke-width:3.2;filter:blur(1.6px)}
.story.lr-ge .lr-ring circle.draw{stroke-dasharray:100 100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 1.2px rgba(255,170,90,.9)) drop-shadow(0 0 3px rgba(225,80,45,.55))}
.story.lr-ge.is-js .lr-ring.on circle.draw{transition:stroke-dashoffset 1.25s cubic-bezier(.45,.1,.25,1);stroke-dashoffset:0}
.story.lr-ge.is-js .lr-ring.on circle.halo{transition:opacity .9s ease 1.05s;opacity:.35}
.story.lr-ge.is-final .lr-ring circle.draw,.story.lr-ge:not(.is-js) .lr-ring circle.draw{stroke-dasharray:none;stroke-dashoffset:0}
.story.lr-ge.is-final .lr-ring circle.halo{opacity:.35}
.story.lr-ge .lr-pc.p-disc{clip-path:circle(0% at 50% 50%);transform:rotate(-8deg) scale(.94);
  transition:clip-path 1s cubic-bezier(.3,.6,.2,1),transform 1.1s cubic-bezier(.2,.75,.2,1),opacity .3s ease}
.story.lr-ge .lr-pc.p-disc.on{opacity:1;clip-path:circle(71% at 50% 50%);transform:none}

/* --- The Grid: das Signal setzt sich Zeile fuer Zeile zusammen --- */
.story.lr-gr .lr-mesh{opacity:0;
  background-image:linear-gradient(rgba(95,155,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(95,155,255,.16) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 75% at 50% 45%,#000,transparent 80%);
  mask-image:radial-gradient(60% 75% at 50% 45%,#000,transparent 80%)}
.story.lr-gr .lr-mesh.on{animation:lrMesh 1.6s ease forwards}
@keyframes lrMesh{0%{opacity:0}20%{opacity:1}100%{opacity:.35}}
.story.lr-gr .lr-scan{opacity:0;bottom:auto;height:2px;
  background:linear-gradient(90deg,transparent,rgba(140,190,255,.95) 30%,#e6f0ff 50%,rgba(140,190,255,.95) 70%,transparent);
  box-shadow:0 0 14px 3px rgba(80,140,255,.55)}
.story.lr-gr .lr-scan.on{animation:lrScan 1.05s cubic-bezier(.4,.1,.3,1) forwards}
@keyframes lrScan{0%{top:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.story.lr-gr .lr-pc.p-slice{transform:translateX(var(--dx,0))}
.story.lr-gr .lr-pc.p-slice.on{animation:lrSlice .5s steps(6,end) forwards}
.story.lr-gr .lr-pc.p-slice.rgb.on{animation-name:lrSliceRgb}
@keyframes lrSlice{
  0%{opacity:0;transform:translateX(var(--dx))}
  25%{opacity:1;transform:translateX(calc(var(--dx) * -.55))}
  50%{opacity:.55;transform:translateX(calc(var(--dx) * .3))}
  70%{opacity:1;transform:translateX(calc(var(--dx) * -.1))}
  100%{opacity:1;transform:none}}
@keyframes lrSliceRgb{
  0%{opacity:0;transform:translateX(var(--dx));filter:drop-shadow(-4px 0 0 rgba(255,40,110,.7)) drop-shadow(4px 0 0 rgba(40,190,255,.7))}
  30%{opacity:1;transform:translateX(calc(var(--dx) * -.5));filter:drop-shadow(-3px 0 0 rgba(255,40,110,.6)) drop-shadow(3px 0 0 rgba(40,190,255,.6))}
  60%{opacity:.6;transform:translateX(calc(var(--dx) * .2))}
  100%{opacity:1;transform:none;filter:none}}
.story.lr-gr .lr-pulse{opacity:0;mix-blend-mode:screen;
  background:radial-gradient(22% 42% at 50% 42%,rgba(70,130,255,.55),transparent 70%)}
.story.lr-gr .lr-pulse.on{animation:lrPulse 1.4s ease-out forwards}
@keyframes lrPulse{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* --- The Last Bastion: alte Projektion flackert an, Glut steigt auf --- */
.story.lr-lb .lr-pc.p-full.on{animation:lrFlick 1.75s linear forwards}
@keyframes lrFlick{
  0%{opacity:1;filter:brightness(0)}
  7%{filter:brightness(.55) sepia(.5)}
  10%{filter:brightness(.08)}
  19%{filter:brightness(.75) sepia(.4)}
  23%{filter:brightness(.25)}
  36%{filter:brightness(1.12) sepia(.25)}
  41%{filter:brightness(.62)}
  56%{filter:brightness(1.05)}
  100%{opacity:1;filter:none}}
.story.lr-lb .lr-light{opacity:0;mix-blend-mode:screen;
  background:radial-gradient(28% 70% at 50% 50%,rgba(255,170,90,.32),transparent 70%) no-repeat;
  background-size:100% 100%;background-position:-60% 0}
.story.lr-lb .lr-light.on{animation:lrLight 1.6s ease-in-out forwards}
@keyframes lrLight{0%{opacity:0;background-position:-120% 0}25%{opacity:1}75%{opacity:1}100%{opacity:0;background-position:220% 0}}
.story.lr-lb .lr-amb{overflow:hidden}
.story.lr-lb .lr-em{position:absolute;bottom:-6px;width:3px;height:3px;border-radius:50%;opacity:0;
  background:#ffb065;box-shadow:0 0 6px 2px rgba(255,140,60,.75)}
.story.lr-lb .lr-amb.on .lr-em{animation:lrEmber var(--d,2.4s) ease-out 2 both}
@keyframes lrEmber{
  0%{opacity:0;transform:translate(0,0) scale(1)}
  15%{opacity:.95}
  100%{opacity:0;transform:translate(calc(var(--w,0) * 34px),-210px) scale(.4)}}

/* Mobil: kuerzer und ohne Unschaerfe (Werte setzt story.js) */
.story.lr.is-lite .lr-pc{filter:none}

/* Reduzierte Bewegung: sofort das ruhende Logo */
@media (prefers-reduced-motion:reduce){
  .story.lr .lr-fx,.story.lr .lr-glint,.story.lr .lr-mesh,.story.lr .lr-scan,
  .story.lr .lr-pulse,.story.lr .lr-amb,.story.lr .lr-light{display:none}
}

/* =====================================================================
   BIOME  .story.bi   (data-bi = dam | desert | vault | mega)
   Das Regionsbild bleibt unveraendert und immer sichtbar. Die Effekte
   liegen als aria-hidden-Ebene darueber und blenden am Ende aus.
   ===================================================================== */
@property --thaw{syntax:'<percentage>';inherits:false;initial-value:0%}
.story.bi .bi-box{position:relative;line-height:0;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 34px rgba(10,16,28,.18);isolation:isolate}
.story.bi .bi-box img{box-shadow:none}
.story.bi .bi-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:14px}
.story.bi .bi-fx i{position:absolute;display:block;font-style:normal}
.story.bi .bi-fx>*:not(.on){animation-play-state:paused}
.story.bi.is-final .bi-fx{opacity:0;transition:opacity 1s ease}
.story.bi .bi-svg{position:absolute;width:0;height:0}

/* --- Dam Valley: kurzer Zoom auf den Damm, Drohnen leuchten auf, Gischt --- */
.story.bi-dam.is-run .bi-box>img,.story.bi-dam.is-run .bi-zoom{animation:biZoom 3.6s cubic-bezier(.45,.05,.3,1) both}
.story.bi-dam .bi-box>img,.story.bi-dam .bi-zoom{transform-origin:44.5% 22.3%}
.story.bi-dam .bi-zoom{inset:0}
@keyframes biZoom{0%{transform:scale(1)}32%{transform:scale(1.6)}58%{transform:scale(1.6)}100%{transform:scale(1)}}
.story.bi-dam .bi-mist-wrap{inset:0}
.story.bi-dam .bi-mist{top:44%;width:var(--s);height:calc(var(--s) * .6);margin-left:calc(var(--s) * -.5);opacity:0;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent);filter:blur(6px)}
.story.bi-dam .bi-mist-wrap.on .bi-mist{animation:biMist var(--d,3s) ease-out both}
@keyframes biMist{0%{opacity:0;transform:translateY(10px) scale(.7)}30%{opacity:.8}100%{opacity:0;transform:translateY(-34px) scale(1.4)}}
/* Drohnen: rote Lichter leuchten auf (Dam Valley, Data Vault, Megacity) */
.story.bi .bi-drones{inset:0}
.story.bi .bi-drone{width:var(--ds,4%);aspect-ratio:1;margin:calc(var(--ds,4%) * -.5) 0 0 calc(var(--ds,4%) * -.5);border-radius:50%;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,236,228,.95),rgba(255,64,56,.9) 28%,rgba(255,20,20,.35) 55%,transparent 78%)}
.story.bi .bi-drones.on .bi-drone{animation:biDrone 3.2s ease both}
@keyframes biDrone{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.25)}14%{opacity:.25;transform:scale(1)}
  20%{opacity:1}34%{opacity:.5}48%{opacity:1}62%{opacity:.55}76%{opacity:.95}100%{opacity:.8}}

/* --- Desert Oil Fields: gleissende Sonne, Hitzeflimmern, Sand im Wind --- */
.story.bi-desert .bi-glare{inset:0;mix-blend-mode:screen;
  background:radial-gradient(130% 120% at 85% 4%,rgba(255,250,235,1),rgba(255,226,170,.85) 45%,rgba(255,205,140,.6) 100%)}
.story.bi-desert .bi-glare.on{animation:biGlare 2s cubic-bezier(.3,.1,.2,1) forwards}
@keyframes biGlare{0%{opacity:1}100%{opacity:0}}
.story.bi-desert .bi-sun{left:85%;top:4%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;opacity:0;mix-blend-mode:screen;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,248,225,.95),rgba(255,214,140,.35) 35%,transparent 70%),
    repeating-conic-gradient(from 0deg,rgba(255,236,190,.22) 0 4deg,transparent 4deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.story.bi-desert .bi-sun.on{animation:biSun 4.2s ease forwards}
@keyframes biSun{0%{opacity:0;transform:rotate(0) scale(.8)}25%{opacity:.95}70%{opacity:.75}100%{opacity:0;transform:rotate(24deg) scale(1.05)}}
.story.bi-desert .bi-haze{left:0;top:38%;width:100%;height:30%;opacity:0;
  background-repeat:no-repeat;background-size:100% 333.334%;background-position:0 54.286%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.story.bi-desert .bi-haze.on{animation:biHaze 3.6s ease forwards}
@keyframes biHaze{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}
.story.bi-desert .bi-sand-wrap{inset:0}
.story.bi-desert .bi-grain{left:-3%;height:auto;aspect-ratio:1;border-radius:50%;opacity:0;
  background:#f1d2a0;box-shadow:0 0 3px rgba(255,220,160,.7)}
.story.bi-desert .bi-sand-wrap.on .bi-grain{animation:biSand var(--d,2.4s) linear 2 both}
@keyframes biSand{0%{opacity:0;transform:translate(0,0)}12%{opacity:.85}85%{opacity:.6}100%{opacity:0;transform:translate(min(108cqw,900px),var(--y,0))}}
.story.bi-desert .bi-fx{container-type:inline-size}

/* --- Mountain Data Vault: Frost taut auf, Schnee faellt, Drohnen leuchten auf --- */
.story.bi-vault .bi-frost{inset:0;background:rgba(226,238,250,.5);
  -webkit-backdrop-filter:blur(8px) saturate(.55) brightness(1.08);backdrop-filter:blur(8px) saturate(.55) brightness(1.08);
  -webkit-mask-image:radial-gradient(circle at 30% 44%,transparent var(--thaw),#000 calc(var(--thaw) + 22%));
  mask-image:radial-gradient(circle at 30% 44%,transparent var(--thaw),#000 calc(var(--thaw) + 22%))}
.story.bi-vault .bi-frost.on{animation:biThaw 2.4s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes biThaw{0%{--thaw:0%;opacity:1}80%{opacity:1}100%{--thaw:130%;opacity:0}}
.story.bi-vault .bi-snow-wrap{inset:0}
.story.bi-vault .bi-flake{top:-4%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.9)}
.story.bi-vault .bi-snow-wrap:not(.on) .bi-flake{visibility:hidden}
.story.bi-vault .bi-snow-wrap.on .bi-flake{animation:biSnow var(--d,3s) linear 2 both}
@keyframes biSnow{0%{top:-4%;transform:translateX(0)}50%{transform:translateX(calc(var(--x,0px) * .6))}100%{top:104%;transform:translateX(var(--x,0px))}}
/* --- Megacity HQ: die Stadt geht an, Neon flackert, Sonnenstrahlen am Himmel, Drohnen leuchten auf --- */
.story.bi-mega .bi-dark{inset:0;background:#02040a}
.story.bi-mega .bi-dark.on{animation:biLights 1.7s steps(1,end) forwards}
@keyframes biLights{0%{opacity:.92}14%{opacity:.75}22%{opacity:.9}36%{opacity:.5}44%{opacity:.7}60%{opacity:.25}70%{opacity:.4}84%{opacity:.1}100%{opacity:0}}
.story.bi-mega .bi-neon{left:64%;top:26%;width:36%;height:74%;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(60% 50% at 60% 40%,rgba(255,60,200,.45),transparent 70%),radial-gradient(50% 40% at 30% 75%,rgba(40,230,255,.35),transparent 70%)}
.story.bi-mega .bi-neon.on{animation:biNeon 3s linear forwards}
@keyframes biNeon{0%{opacity:0}8%{opacity:.9}11%{opacity:.1}16%{opacity:.8}19%{opacity:.25}30%{opacity:.85}70%{opacity:.6}100%{opacity:0}}
.story.bi-mega .bi-tower{left:46%;top:28%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;opacity:0;mix-blend-mode:screen;border-radius:50%;
  background:radial-gradient(closest-side,rgba(80,170,255,.75),rgba(40,110,255,.25) 45%,transparent 72%)}
.story.bi-mega .bi-tower.on{animation:biTower 2.2s ease-in-out forwards}
@keyframes biTower{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.story.bi-mega .bi-sky{left:0;top:0;width:100%;height:46%;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(70% 120% at 61.4% 58%,rgba(255,150,70,.55),rgba(255,95,60,.18) 45%,transparent 75%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.story.bi-mega .bi-sky.on{animation:biSky 3.4s ease-in-out forwards}
@keyframes biSky{0%{opacity:0;background-position:0 0}35%{opacity:1}70%{opacity:.85}100%{opacity:0}}
.story.bi-mega .bi-rays{left:61.4%;top:58.3%;width:120%;aspect-ratio:1;margin:-60% 0 0 -60%;opacity:0;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,rgba(255,190,120,.20) 0 3deg,transparent 3deg 14deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.6) 30%,transparent 70%);mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.6) 30%,transparent 70%)}
.story.bi-mega .bi-skyclip{left:0;top:0;width:100%;height:46%;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.story.bi-mega .bi-rays.on{animation:biRays 3.4s ease-in-out forwards}
@keyframes biRays{0%{opacity:0;transform:rotate(-4deg)}35%{opacity:1}100%{opacity:0;transform:rotate(6deg)}}

@media (prefers-reduced-motion:reduce){.story.bi .bi-fx{display:none}}

/* ---------- Reduzierte Bewegung: alles statisch ---------- */
@media (prefers-reduced-motion:reduce){
  .story *,.story::after,.story .story-dots{animation:none!important;transition:none!important}
}