/* ============================================================================
   Belebung der Startseite: Bewegungssprache aus dem Shop (Lagetisch, HUD,
   Scanlinie, Fadenkreuz). Rein additiv, eigene Klassen mit Praefix "bel-".
   Der Kaufbereich (#kaufen) bekommt keine dieser Klassen; belebung.js laesst
   ihn bewusst aus. Mit prefers-reduced-motion bleibt alles ruhig.
   ============================================================================ */

/* Fortschritt beim Scrollen: eine rote Linie am oberen Rand */
.bel-fortschritt{ position:fixed; z-index:60; left:0; top:0; height:2px; width:100%; pointer-events:none;
  background:linear-gradient(90deg, rgba(217,52,43,.4), #D9342B 70%, #F0564B); box-shadow:0 0 12px rgba(217,52,43,.6);
  transform-origin:0 50%; transform:scaleX(var(--bel-p, 0)); }

/* ---- Hero: HUD-Rahmen, Uhr, Koordinaten, Korn, Fadenkreuz ---- */
.bel-hud{ position:absolute; z-index:2; inset:clamp(76px, 7vw, 96px) clamp(14px, 2.4vw, 32px) clamp(14px, 2.4vw, 32px); pointer-events:none; }
.bel-hud i{ position:absolute; width:26px; height:26px; border:0 solid rgba(245,241,234,.55); opacity:0; animation:bel-ecke .9s cubic-bezier(.16,1,.3,1) .5s forwards; }
.bel-hud i.tl{ left:0; top:0; border-left-width:1px; border-top-width:1px; --dx:-10px; --dy:-10px; }
.bel-hud i.tr{ right:0; top:0; border-right-width:1px; border-top-width:1px; --dx:10px; --dy:-10px; }
.bel-hud i.bl{ left:0; bottom:0; border-left-width:1px; border-bottom-width:1px; --dx:-10px; --dy:10px; }
.bel-hud i.br{ right:0; bottom:0; border-right-width:1px; border-bottom-width:1px; --dx:10px; --dy:10px; }
.bel-hud span{ position:absolute; font:500 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(168,176,181,.7); opacity:0; animation:bel-auf .8s ease .9s forwards; white-space:nowrap; }
.bel-hud span b{ color:#F0564B; font-weight:500; }
.bel-hud .tl{ left:38px; top:9px; } .bel-hud .tr{ right:38px; top:9px; }
.bel-hud .bl{ left:38px; bottom:9px; } .bel-hud .br{ right:38px; bottom:9px; }
.bel-korn{ position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:var(--bel-korn); }
/* Scanlinie: Die Ebene ist so hoch wie der Hero und wird per transform verschoben
   (translateY um die eigene Hoehe). Frueher lief "top" von 0 auf 100 %; das ist eine
   Layout-Verschiebung je Bild und hat den CLS der Startseite auf ~0,15 getrieben.
   Die Linie samt Leuchten ist ein Verlauf am oberen Rand der Ebene (top:-24px, damit
   das Leuchten auch oberhalb der Linie sichtbar ist). */
.bel-scan{ position:absolute; z-index:2; left:0; right:0; top:-24px; height:100%; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, rgba(217,52,43,0) 0, rgba(217,52,43,.22) 14px, rgba(217,52,43,.55) 22px, #D9342B 24px, #D9342B 25px,
    rgba(217,52,43,.55) 27px, rgba(217,52,43,.22) 35px, rgba(217,52,43,0) 49px) 0 0 / 100% 49px no-repeat;
  will-change:transform, opacity; animation:bel-scan 1.6s cubic-bezier(.65,0,.35,1) .15s; }

/* ---- Hero-Cover als Hardcover (wie das 3D-Buch im Shop) ---- */
.cover-stage{ container-type:inline-size; }
/* Etwas staerker gedreht als das flache Cover; die Drehung aus index.html (inline transform) kommt dazu */
.cover.bel-hardcover{ --dicke:3.4cqw; rotate:0 1 0 -12deg; }
.cover.bel-hardcover .cover-face{ transform:translateZ(var(--dicke)); }
.cover.bel-hardcover .cover-face::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(255,255,255,.24) 1.3%, rgba(0,0,0,.2) 2.8%, rgba(0,0,0,0) 6%); }
.cover.bel-hardcover .cover-spine{ display:none; }
.bel-rueck{ position:absolute; inset:0; background:#1c1f22; transform:rotateY(180deg) translateZ(var(--dicke)); backface-visibility:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8); }
.bel-seiten{ position:absolute; top:.8%; bottom:.8%; left:calc(100% - var(--dicke)); width:calc(var(--dicke) * 2); transform:rotateY(90deg) translateZ(-.25cqw);
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.12)), repeating-linear-gradient(90deg, #efe8da 0 1px, #cfc6b4 1px 2px); }
.bel-ruecken{ position:absolute; top:0; bottom:0; left:calc(var(--dicke) * -1); width:calc(var(--dicke) * 2); transform:rotateY(-90deg);
  background:linear-gradient(90deg, #0b0c0d, #2a1312 45%, #0b0c0d); box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }

/* ---- Abschnitte: Ueberschriften, Augenbrauen, Trennlinien ---- */
.bel-titel{ clip-path:inset(0 0 105% 0); transform:translateY(.35em); transition:clip-path 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.bel-titel.bel-in{ clip-path:inset(-0.2em -0.2em -0.3em -0.2em); transform:none; }
.bel-braue::before{ transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.16,1,.3,1) .15s; }
.bel-braue.bel-in::before{ transform:scaleX(1); }
.bel-strich{ position:relative; overflow:visible; }
.bel-strich::after{ content:""; position:absolute; left:0; top:-1px; height:3px; width:22%; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, #D9342B, transparent); filter:blur(.5px); transform:translateX(-100%); }
.bel-strich.bel-in::after{ animation:bel-wisch 1.8s cubic-bezier(.65,0,.35,1) .1s; }

/* ---- Fotos: Verschluss, Scanlinie, HUD-Ecken, langsamer Zoom ---- */
.bel-foto{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s cubic-bezier(.16,1,.3,1); }
.bel-foto > img{ transform:scale(1.14); transition:transform 2.4s cubic-bezier(.16,1,.3,1); }
.bel-foto.bel-in{ clip-path:inset(0); }
.bel-foto.bel-in > img{ transform:scale(1); }
.bel-foto:hover > img{ transform:scale(1.035); transition-duration:1.2s; }
.bel-foto .bel-ecken{ position:absolute; z-index:3; inset:12px; pointer-events:none; }
.bel-foto .bel-ecken i{ position:absolute; width:18px; height:18px; border:0 solid rgba(245,241,234,.7); opacity:0; transition:opacity .6s ease .9s, transform .8s cubic-bezier(.16,1,.3,1) .9s; }
.bel-foto .bel-ecken i:nth-child(1){ left:0; top:0; border-left-width:1px; border-top-width:1px; transform:translate(8px, 8px); }
.bel-foto .bel-ecken i:nth-child(2){ right:0; top:0; border-right-width:1px; border-top-width:1px; transform:translate(-8px, 8px); }
.bel-foto .bel-ecken i:nth-child(3){ left:0; bottom:0; border-left-width:1px; border-bottom-width:1px; transform:translate(8px, -8px); }
.bel-foto .bel-ecken i:nth-child(4){ right:0; bottom:0; border-right-width:1px; border-bottom-width:1px; transform:translate(-8px, -8px); }
.bel-foto.bel-in .bel-ecken i{ opacity:1; transform:none; }
.bel-foto .bel-marke{ position:absolute; z-index:3; left:36px; bottom:18px; font:500 9.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(245,241,234,.8); opacity:0; transition:opacity .6s ease 1.1s; text-shadow:0 1px 8px rgba(0,0,0,.8); }
.bel-foto .bel-marke b{ color:#F0564B; font-weight:500; }
.bel-foto.bel-in .bel-marke{ opacity:1; }
/* Scanlinie ueber dem Foto: wie .bel-scan eine bildhohe Ebene, die per transform laeuft. */
.bel-foto::after{ content:""; display:block !important; position:absolute; z-index:4; left:0; right:0; top:-18px; height:100%; width:auto; pointer-events:none;
  background:linear-gradient(to bottom, rgba(217,52,43,0) 0, rgba(217,52,43,.25) 10px, rgba(217,52,43,.6) 16px, #D9342B 18px, #D9342B 19px,
    rgba(217,52,43,.6) 21px, rgba(217,52,43,.25) 27px, rgba(217,52,43,0) 37px) 0 0 / 100% 37px no-repeat;
  box-shadow:none; opacity:0; }
.bel-foto.bel-in::after{ animation:bel-scan 1.35s cubic-bezier(.65,0,.35,1) .05s; }

@keyframes bel-ecke{ from{ opacity:0; transform:translate(var(--dx), var(--dy)); } to{ opacity:1; transform:none; } }
@keyframes bel-auf{ to{ opacity:1; } }
/* Nur transform und opacity: laeuft auf dem Compositor und verschiebt kein Layout (CLS 0).
   bel-wisch: Breite 22 % des Strichs; -100 % entspricht left:-22 %, 454,55 % (= 100/22) left:100 %. */
@keyframes bel-scan{ 0%{ transform:translateY(0); opacity:1; } 85%{ opacity:1; } 100%{ transform:translateY(100%); opacity:0; } }
@keyframes bel-wisch{ 0%{ transform:translateX(-100%); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateX(454.55%); opacity:0; } }

@media (max-width:880px){
  .bel-hud .tr, .bel-hud .br{ display:none; }
  .bel-hud i{ width:18px; height:18px; }
  .bel-hud span{ font-size:9px; }
}
/* Kleine Bildschirme: weniger Effekte. Das Korn (Mischmodus ueber dem ganzen Hero)
   kostet auf schwachen Handys bei jedem Bild Rechenzeit; Foto-Scanlinien und der
   Wisch auf den Trennlinien entfallen. Hero-Scanlinie, Titel und Fotos bleiben. */
@media (max-width:600px){
  .bel-korn{ display:none !important; }
  .bel-foto::after, .bel-strich::after{ display:none !important; animation:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .bel-titel, .bel-foto{ clip-path:none !important; transform:none !important; transition:none !important; }
  .bel-foto > img{ transform:none !important; transition:none !important; }
  .bel-hud i, .bel-hud span{ animation:none !important; opacity:1 !important; }
  .bel-scan, .bel-foto::after, .bel-strich::after{ display:none !important; }
  .bel-braue::before{ transform:none !important; }
}