/* ============================================================
   KAORU — „Vom Fisch zum Maki"

   Nur auf der Startseite geladen (siehe kaoru_maguro_assets in
   functions.php). Farben, Schriften und Schaltflächen kommen aus
   kaoru.css; hier steht ausschließlich, was diese Sequenz braucht.
   ============================================================ */

.maguro{
  position:relative;
  /* Die Scrollstrecke. Die Vorlage kam mit 520vh — für einen Abschnitt
     kurz vor dem Fuß sind das über fünf Bildschirme, bevor der Besucher
     dort ankommt. 200vh tragen dieselbe Choreografie in einem Viertel.
     Der Fortschritt ist auf die Strecke normiert: Die Zeitpunkte in
     maguro.js bleiben also unverändert, der Ablauf wird nur zügiger. */
  height:200vh;
  background:var(--ink);
  /* Solange der Abschnitt nicht im Bild ist, muss der Browser ihn nicht
     zeichnen. contain-intrinsic-size haelt dabei die Hoehe stabil. */
  content-visibility:auto;
  contain-intrinsic-size:auto 200vh;
}

.maguro__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  color:var(--paper);
}

/* ---- Bildebenen ---- */
.maguro__cam{ position:absolute; inset:0; }
.maguro__slats{ position:absolute; inset:0; }

.maguro__slat{
  position:absolute; top:0; bottom:0; overflow:hidden;
  width:calc(100% / var(--n));
  left:calc(var(--i) * 100% / var(--n));
}
.maguro__layer{ position:absolute; inset:0; }
/* Das i traegt das Bild in voller Buehnenbreite und wird um die eigene
   Lamellenbreite nach links geschoben — so setzen die acht Ausschnitte
   ein einziges Bild zusammen. */
.maguro__layer i{
  position:absolute; top:0; height:100%;
  width:calc(100% * var(--n));
  left:calc(var(--i) * -100%);
  background-repeat:no-repeat; background-position:center;
  background-size:contain;
}
.maguro__layer--fish i{ background-image:var(--fish, none); }
.maguro__layer--maki i{ background-image:var(--maki, none); }
.maguro__layer--maki{ opacity:0; }

/* Eigene Ebene nur, solange der Abschnitt im Bild ist — sonst laegen
   sechzehn Schichten dauerhaft im Speicher. Setzt maguro.js. */
.maguro.is-live .maguro__cam,
.maguro.is-live .maguro__layer{ will-change:transform, opacity; }

/* ---- Messerlinie ---- */
.maguro__knife{
  position:absolute; top:-10%; bottom:-10%; left:0; width:2px; opacity:0;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.9) 20%, rgba(255,255,255,.9) 80%, transparent);
  box-shadow:0 0 24px 4px rgba(255,255,255,.28);
}

.maguro__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, rgba(10,10,11,0) 40%, rgba(10,10,11,.78) 100%);
}

/* ---- Text ---- */
/* Die Texte stehen im selben Raster wie der uebrige Inhalt: Rand ist der
   Gutter, und sobald das Fenster breiter wird als --maxw, wandert die Kante
   mit der Inhaltsspalte nach innen. Die Bildebenen bleiben davon unberuehrt
   und laufen weiter ueber die volle Breite — nur der Text richtet sich aus. */
.maguro__stage{ --maguro-rand:max(var(--gut), (100% - var(--maxw)) / 2); }

.maguro__mid, .maguro__hint, .maguro__step, .maguro__end{
  position:absolute; z-index:3;
}
.maguro__mid{ left:var(--maguro-rand); right:var(--maguro-rand); top:50%; transform:translateY(-50%); text-align:center; }

.maguro__kicker{
  margin:0 0 22px; font-family:var(--f-body); font-weight:600;
  font-size:var(--fs-ui); letter-spacing:.28em; text-transform:uppercase;
  color:var(--paper-faint);
}
.maguro__h{
  margin:0; font-family:var(--f-display); font-weight:var(--fw-display);
  font-size:clamp(52px,10vw,150px); line-height:.9; letter-spacing:-.01em;
}
.maguro__h em{ color:var(--gold); }
.maguro__lede{ margin:28px 0 0; color:var(--paper-dim); font-size:var(--fs-body); }

.maguro__hint{
  left:var(--maguro-rand); right:var(--maguro-rand); bottom:40px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-body); font-size:var(--fs-ui); font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--paper-faint);
}
.maguro__arrow{ font-size:var(--fs-ui); letter-spacing:0; animation:maguro-hint 2.2s ease-in-out infinite; }
@keyframes maguro-hint{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } }

.maguro__step{ left:var(--maguro-rand); bottom:64px; max-width:340px; }
.maguro__no{
  margin:0 0 12px; font-family:var(--f-body); font-weight:600;
  font-size:var(--fs-ui); letter-spacing:.24em; text-transform:uppercase;
  color:var(--red);
}
.maguro__t{ margin:0; font-size:var(--fs-body); line-height:1.45; color:var(--paper); }

.maguro__end{
  left:var(--maguro-rand); right:var(--maguro-rand); bottom:76px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.maguro__title{
  margin:0; font-family:var(--f-display); font-weight:var(--fw-display);
  font-size:clamp(32px,5vw,60px); line-height:1; letter-spacing:0;
}

.maguro__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(244,241,234,.1); z-index:4; }
.maguro__bar i{ display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left center; }

/* ---- Handy ----
   Gleiche Geometrie wie am Schreibtisch: Der Thunfisch liegt quer, die acht
   Lamellen stehen senkrecht, das Messer laeuft von links nach rechts.
   Ein 16:9-Motiv steht damit als Band in der Buehne, oben und unten bleibt
   Schwarz — das ist hier der Abschnittsgrund und faellt nicht als Balken auf.

   Vorher lag hier die gedrehte Fassung mit dem Hochformat-Motiv. Die Bilder
   dafuer (…-hoch-900.jpg) liegen weiterhin im Theme.

   Angepasst wird nur, was der schmale Schirm wirklich braucht: eine kuerzere
   Scrollstrecke und die Textbloecke. */
@media (max-width:700px){
  .maguro{ height:160vh; contain-intrinsic-size:auto 160vh; }

  .maguro__step{ right:var(--maguro-rand); max-width:none; bottom:88px; }
  .maguro__end{ bottom:52px; gap:20px; }
  .maguro__end .btn{ width:100%; }
}

/* ---- Weniger Bewegung ----
   Kein Scroll-Ablauf, sondern ein ruhiges Bild: die Maki-Ebene steht, der
   Schlusstext ist sichtbar, alles andere entfällt. */
@media (prefers-reduced-motion: reduce){
  .maguro{ height:100svh; contain-intrinsic-size:auto 100svh; }
  .maguro__layer--maki{ opacity:1; }
  .maguro__layer--fish, .maguro__knife, .maguro__hint,
  .maguro__mid, .maguro__step, .maguro__bar{ display:none; }
  .maguro__end{ opacity:1; }
  .maguro__arrow{ animation:none; }
}