/* ============================================================
   AvB Seiten-Effekte (additiv)
   1 Auftakt "Prägung"   2 Seitenwechsel-Vorhang   3 Zählwerk 1946
   4 Überschriften wie gesetzt   5 Lesefortschritt
   Bei "Bewegung reduzieren" oder ohne JavaScript greift nichts.
   ============================================================ */

/* Sofort-Abdeckung bis der Auftakt steht (verhindert kurzes Aufblitzen) */
html.fx-intro body{overflow:hidden;}
html.fx-intro body::after{content:""; position:fixed; inset:0; z-index:300; background:#081a2e;}

/* ---------- 1 · Auftakt ---------- */
.fx-intro-ov{position:fixed; inset:0; z-index:310; display:grid; place-items:center; overflow:hidden; cursor:pointer;}
.fx-half{position:absolute; left:0; right:0; height:50.5%; background:var(--navy-deep);
  transition:transform .9s cubic-bezier(.76,0,.24,1);}
.fx-half.top{top:0;}
.fx-half.bot{bottom:0;}
.fx-intro-glow{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.2s ease;
  background:radial-gradient(700px 360px at 50% 52%, rgba(160,138,91,.18), transparent 70%);}
.fx-intro-in{position:relative; text-align:center; padding:0 24px; transition:opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.fx-intro-ey{display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); opacity:0; transform:translateY(6px); transition:opacity .8s ease .15s, transform .8s ease .15s;}
.fx-intro-claim{margin-top:26px; font-family:var(--serif); font-weight:500; font-size:clamp(30px,5.4vw,66px); line-height:1.12; letter-spacing:-.01em;}
.fx-intro-claim span{display:inline-block; opacity:0; filter:blur(10px); letter-spacing:.22em;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(100deg, var(--c) 0 42%, #fff7e2 50%, var(--c) 58% 100%);
  background-size:300% 100%; background-position:100% 0;
  transition:opacity 1s ease, filter 1s ease, letter-spacing 1.2s cubic-bezier(.2,.7,.2,1);}
.fx-intro-claim span{--c:#ffffff;}
.fx-intro-claim span.g{--c:var(--gold-soft);}
.fx-intro-line{display:block; width:min(340px,60vw); height:1px; margin:30px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .3s;}
.fx-intro-name{display:block; margin-top:22px; font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.8vw,21px); color:var(--on-navy-soft);
  letter-spacing:.01em; opacity:0; transform:translateY(8px); transition:opacity 1s ease 1.5s, transform 1.1s cubic-bezier(.2,.7,.2,1) 1.5s;}
.fx-intro-ov.go .fx-intro-name{opacity:1; transform:none;}
.fx-intro-skip{position:absolute; right:24px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); background:none; border:1px solid rgba(160,138,91,.35);
  color:var(--on-navy-soft); font:500 12px var(--sans); letter-spacing:.08em; padding:8px 14px; border-radius:8px; cursor:pointer;
  opacity:0; transition:opacity .6s ease .8s, color .2s ease, border-color .2s ease;}
.fx-intro-skip:hover{color:#fff; border-color:var(--gold);}
.fx-intro-ov.go .fx-intro-glow{opacity:1;}
.fx-intro-ov.go .fx-intro-ey{opacity:1; transform:none;}
.fx-intro-ov.go .fx-intro-line{transform:scaleX(1);}
.fx-intro-ov.go .fx-intro-skip{opacity:1;}
.fx-intro-claim span.on{opacity:1; filter:blur(0); letter-spacing:-.01em;}
.fx-intro-ov.sheen .fx-intro-claim span{background-position:0 0; transition:opacity 1s ease, filter 1s ease, letter-spacing 1.2s cubic-bezier(.2,.7,.2,1), background-position 1.4s cubic-bezier(.4,0,.2,1);}
.fx-intro-ov.out .fx-intro-in, .fx-intro-ov.out .fx-intro-glow, .fx-intro-ov.out .fx-intro-skip{opacity:0; transition:opacity .35s ease;}
.fx-intro-ov.out .fx-intro-in{transform:scale(.985);}
.fx-intro-ov.out .fx-half.top{transform:translateY(-101%);}
.fx-intro-ov.out .fx-half.bot{transform:translateY(101%);}
.fx-half.top::after, .fx-half.bot::before{content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity .3s ease;}
.fx-half.top::after{bottom:0;} .fx-half.bot::before{top:0;}
.fx-intro-ov.out .fx-half.top::after, .fx-intro-ov.out .fx-half.bot::before{opacity:.9;}

/* ---------- 2 · Seitenwechsel-Vorhang (von rechts nach links) ---------- */
.fx-curtain{position:fixed; inset:0; z-index:250; background:var(--navy-deep); display:grid; place-items:center;
  transform:translateX(100%); pointer-events:none; visibility:hidden;}
.fx-curtain::before{content:""; position:absolute; top:0; bottom:0; left:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);}
.fx-curtain.in{visibility:visible; transform:translateX(0); transition:transform .7s cubic-bezier(.45,.05,.25,1);}
.fx-curtain.out{visibility:visible; transform:translateX(-100%); transition:transform .8s cubic-bezier(.55,0,.3,1);}
/* weiche Kanten statt harter Wand */
.fx-curtain{box-shadow:-60px 0 80px -20px rgba(8,26,46,.55), 60px 0 80px -20px rgba(8,26,46,.55);}
.fx-curtain .box{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.fx-curtain .ey{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:16px; opacity:0; transform:translateX(24px); transition:opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.fx-curtain .ey::before, .fx-curtain .ey::after{content:""; width:32px; height:1px; background:var(--gold-line);}
.fx-curtain .ttl{font-family:var(--serif); font-weight:500; font-size:clamp(30px,4vw,48px); color:#fff; letter-spacing:-.01em;
  opacity:0; transform:translateX(36px); transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.fx-curtain.in .ey{opacity:1; transform:none; transition-delay:.35s;}
.fx-curtain.in .ttl{opacity:1; transform:none; transition-delay:.45s;}
.fx-curtain.out .ey, .fx-curtain.out .ttl{opacity:0; transform:translateX(-30px); transition:opacity .3s ease, transform .5s ease;}

/* ---------- 3 · Zählwerk ---------- */
.fx-odo{display:inline-flex; height:1.6em; line-height:1.6em; overflow:hidden; vertical-align:top;}
.fx-odo-d{display:block; transform:translateY(0);}
.fx-odo-d span{display:block; height:1.6em; text-align:center;}
.fx-odo.run .fx-odo-d{transition:transform 2.6s cubic-bezier(.2,.8,.2,1); transition-delay:calc(.3s + var(--i) * .22s);}
.fx-odo{transition:text-shadow .8s ease, color .8s ease;}
.fx-odo.glow{text-shadow:0 0 14px rgba(194,173,130,.85); color:#f6ecd2;}
.fx-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- 4 · Überschriften wie gesetzt ---------- */
.fx-w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .06em .16em 0; margin:0 -.06em -.16em 0;}
.fx-wi{display:inline-block; transform:translateY(110%);}
.fx-set-in .fx-wi{transform:none; transition:transform 1s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 55ms);}

/* ---------- 5 · Lesefortschritt ---------- */
.fx-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft)); transform-origin:left; transform:scaleX(0);}

@media (max-width:520px){ .fx-intro-ey{letter-spacing:.16em; font-size:10px;} }