/* ════════════════════════════════════════════════════════════════
   motion.css – Szenen der DESKTOP-Komposition (Referenz: Desktop V9)
   Hero + Szene 02, horizontales Kapitel „Hinter JUNO“, Orakelkarten.
   Alle Maße stammen aus dem gerenderten V9-Endstand.
   Die Bewegung selbst steuert js/scroll-scenes.js.
   ════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) {

  html, body { background: #182A20; color: #f6f2ee; } /* v1.0.4: JUNO-Grün (vorher #1d361b) */
  body { overflow-x: hidden; }

  /* ─── 01 · HERO ───────────────────────────────────────────── */
  .story { height: 350svh; position: relative; }
  .stage { height: 100svh; width: 100%; position: sticky; top: 0; overflow: hidden; background: #182A20; }
  .hero-frame { position: absolute; inset: 0; }

  /* Artboard 1440 × 900, füllend skaliert (--fit aus scroll-scenes.js) */
  .artboard {
    position: absolute; width: 1440px; height: 900px; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(var(--fit, 1));
    transform-origin: center; overflow: visible;
  }
  .frag {
    position: absolute; display: block; max-width: none; object-fit: fill;
    pointer-events: none; transform-origin: center; will-change: transform, opacity;
  }
  /* v1.0.9 · Variante A: Mond, Zweig, Rahmen, Venus und Blume rechts sitzen
     um --hero-drop tiefer (nur statische Ausgangslage; Bewegung unverändert). */
  .artboard { --hero-drop: 250px; } /* = HERO_DROP in scroll-scenes.js */
  /* v1.0.15: Titelblock 10 % tiefer (78 → 168 px) und 10 % größer */
  .artboard { --t-top: 168px; --t-scale: 1.1; }
  .moon        { left: 880px;  top: var(--hero-drop);                  width: 392px; height: 392px; z-index: 1; }
  .branch-top  { left: 1175px; top: calc(-28px + var(--hero-drop));    width: 280px; height: 335px; z-index: 5; }
  .frame       { left: 921px;  top: calc(140px + var(--hero-drop));    width: 323px; height: 425px; z-index: 3; }
  .cloud       { left: 544px;  top: 563px;  width: 821px; height: 355px; z-index: 2; }
  .venus       { left: 972px;  top: calc(127px + var(--hero-drop));    width: 261px; height: 809px; z-index: 9; transform-origin: 48% 22%; }
  .peacock     { left: 812px;  top: 545px;  width: 350px; height: 360px; z-index: 8; }
  .flower1     { left: 1190px; top: calc(270px + var(--hero-drop));    width: 295px; height: 350px; z-index: 7; }
  .flower2     { left: 1194px; top: 547px;  width: 282px; height: 355px; z-index: 10; }
  .petals      { left: 878px;  top: 790px;  width: 135px; height: 118px; z-index: 12; }
  .branch-left { left: -96px;  top: 540px;  width: 254px; height: 348px; z-index: 6; }

  .title-area {
    /* v1.0.3: JUNO-Wortmarke entfernt. Die Überschrift bleibt an ihrer bisherigen
       Stelle (147 = Oberkante Bilderrahmen 140), Text, Knopf und Countdown ebenso. */
    position: absolute; z-index: 6; left: 270px; top: var(--t-top, 78px); width: 900px;
    transform-origin: top left; will-change: transform;
    text-align: center; /* v1.0.9: Typo mittig über der Collage */
  }
  .title-area .heading {
    font: 400 calc(82px * var(--t-scale, 1))/1.01 Oranienbaum, Georgia, serif; letter-spacing: -.035em; margin: 0;
  }
  .title-area .intro {
    font: calc(30px * var(--t-scale, 1))/1.15 Oranienbaum, Georgia, serif; max-width: calc(720px * var(--t-scale, 1)); margin: calc(30px * var(--t-scale, 1)) auto 0; /* v1.0.9: mittig */
  }
  /* --cta-boost / --lbl-boost / --cnt-boost (v1.0.1): Mindestgrößen für Knopf
     und Countdown, wenn die Komposition stark verkleinert ist (Smartphone quer).
     Gesetzt von scroll-scenes.js; bei 1440 × 900 nicht gesetzt (= 1). */
  .title-area .cta {
    display: inline-block; margin-top: calc(34px * var(--t-scale, 1)); border-radius: 40px;
    padding: calc(13px * var(--cta-boost, 1) * var(--t-scale, 1)) calc(24px * var(--cta-boost, 1) * var(--t-scale, 1));
    background: #930010; color: #fff; text-decoration: none;
    font: calc(19px * var(--cta-boost, 1) * var(--t-scale, 1)) Quicksand, Arial, sans-serif;
  }

  /* In V9 Teil des Titelblocks (left 0 / top 714 darin) → im Artboard 90 / 766.
     Bewegt sich zusammen mit dem Titel. */
  .hero-countdown {
    position: absolute; z-index: 6; left: 90px; top: 766px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    font: 500 12px/1.4 Quicksand, Arial, sans-serif; white-space: nowrap;
    will-change: transform;
    /* v1.0.1: gleicher Bezugspunkt wie der Titelblock (90/52), damit die
       sichere Textzone beide gemeinsam verschiebt/skaliert */
    transform-origin: 0 -619px; /* v1.0.3: Bezugspunkt = Titelblock (90/147) */
  }
  .hero-countdown strong { font: normal calc(22px * var(--cnt-boost, 1))/1.25 Oranienbaum, Georgia, serif; color: #fff; }
  .hero-countdown .count-label { font: 600 calc(11px * var(--lbl-boost, 1))/1.4 Quicksand, Arial, sans-serif; letter-spacing: .14em; }

  /* ─── 02 · „Eine besondere Zeit …“ (schiebt sich über den Hero) ─ */
  .next-overlay {
    position: absolute; inset: 0; height: 100%; z-index: 30;
    display: block; padding: 0; overflow: hidden; text-align: center;
    background: #f6f3ee; color: #080808; box-shadow: 0 -15px 36px #00000012;
    transform: translate3d(0, 100%, 0); will-change: transform;
  }
  .scene2-board {
    position: absolute; width: 1440px; height: 900px; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(var(--scene-fit, 1));
    transform-origin: center; overflow: visible; text-align: left;
  }
  .s2-frag {
    position: absolute; display: block; max-width: none; object-fit: fill;
    pointer-events: none; transform-origin: center; will-change: transform;
  }
  .s2-paper   { right: -10px;  top: -75px; width: 248px; height: 840px; z-index: 1; opacity: .83; }
  /* v1.0.4: Statue und rechte Gruppe (Blumen + Pfau) je 90 px höher
     (vorher 285 / 236 / 548), damit die Szene kompakter endet. */
  .s2-statue  { left: -16px;   top: 195px; width: 400px; height: 565px; z-index: 4; }
  .s2-flowers { right: -160px; top: 146px; width: 492px; height: 625px; z-index: 5; }
  .s2-peacock { right: -17px;  top: 478px; width: 294px; height: 278px; z-index: 6; } /* v1.0.16: 20 px tiefer (vorher 458) */

  .s2-copy { position: absolute; inset: 0; z-index: 15; pointer-events: none; color: #080808; transform-origin: 720px 96px; }
  .s2-copy h2 {
    position: absolute; top: 96px; left: 175px; width: 1110px; max-width: none; margin: 0;
    text-align: center; font: normal 91px/1.02 Oranienbaum, Georgia, serif; letter-spacing: -1.8px;
  }
  .s2-body { position: absolute; top: 355px; left: 365px; width: 733px; }
  /* Schriftgröße setzt scroll-scenes.js: Fließtextgröße ÷ Skalierung (wie V9) */
  .s2-text {
    margin: 0; text-align: center; pointer-events: auto; user-select: text;
    font: 400 23px/1.62 Quicksand, Arial, sans-serif; letter-spacing: 0;
  }

  /* v1.0.2: zweiter Absatz direkt unter dem ersten (vorher eigener Abschnitt
     .continuation unter der Szene). Gleiche Schrift; Größe setzt scroll-scenes.js. */
  .s2-more {
    margin: 1.62em 0 0; text-align: center; pointer-events: auto; user-select: text;
    font: 400 23px/1.62 Quicksand, Arial, sans-serif; letter-spacing: 0;
  }

  /* ─── HINTER JUNO · vertikales Scrollen bewegt vier Karten ─── */
  .hz { position: relative; height: 420vh; background: #eae3d9; color: #20351d; z-index: 2; isolation: isolate; }
  .hz-sticky {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
    display: flex; flex-direction: column; background: #eae3d9;
  }
  .hz-viewport { flex: 1; min-height: 0; overflow: hidden; }
  .hz-track { display: flex; width: 400vw; height: 100%; transform: translate3d(0, 0, 0); will-change: transform; }
  .hz-panel {
    width: 100vw; min-width: 100vw; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 3vh, 36px) clamp(22px, 5vw, 85px);
  }
  .hz-card {
    position: relative; width: 100%; height: 100%; max-height: 840px;
    display: flex; align-items: center;
    /* v1.0.2: oben/unten nach Bildschirmhöhe, seitlich wie bisher – mehr Platz für die längeren Texte */
    padding: clamp(28px, 6vh, 72px) clamp(28px, 5vw, 92px);
    background: #f7f4ee; border: 1px solid rgba(162,133,99,.4); border-radius: 10px;
    box-shadow: 0 15px 70px rgba(42,38,28,.05); overflow: hidden; isolation: isolate;
  }
  /* v1.0.2: Satzbreite und Überschrift für die finalen, längeren Kartentexte.
     Textspalte endet vor dem Kartenbild (Bilder unverändert groß). */
  .hz-copy { position: relative; z-index: 2; width: min(660px, 58%); }
  .hz-card h2 {
    font: normal calc(clamp(34px, 3.7vw, 58px) * var(--hz-fs, 1))/1.06 Oranienbaum, Georgia, serif;
    letter-spacing: -.04em; color: #20351d; margin: 0 0 calc(26px * var(--hz-fs, 1));
  }
  /* --hz-fs (v1.0.1): nur wenn der Text sonst in der Karte abgeschnitten würde,
     verkleinert scroll-scenes.js die Kartenschrift (mind. 80 %). Sonst 1. */
  .hz-card p { font: 400 calc(clamp(16px, 1.25vw, 19px) * var(--hz-fs, 1))/1.62 Quicksand, Arial, sans-serif; margin: 0 0 .8em; }
  .hz-card p:last-child { margin-bottom: 0; }

  /* Kartenbilder zoomen sanft innerhalb ihrer Karte (--zoom aus scroll-scenes.js) */
  .hz-art {
    position: absolute; z-index: 1; height: auto; object-fit: contain; pointer-events: none;
    width: clamp(180px, 34vw, 520px); right: -3%; bottom: -8%; max-height: 105%; opacity: .82;
    transform-origin: 65% 60%; scale: var(--zoom, 1); will-change: transform;
  }
  .hz-art-first {
    width: clamp(160px, 28vw, 450px); right: -1%; bottom: -14%; max-height: none; opacity: 1;
    transform: rotate(-18deg);
  }

  .hz-bottom { height: 18px; flex: none; display: flex; justify-content: center; align-items: center; padding: 0 5vw; z-index: 2; }
  .hz-progress { height: 2px; max-width: 350px; flex: 1; background: #d7c9b9; border-radius: 9px; overflow: hidden; opacity: .5; }
  .hz-progress > div { width: 100%; height: 100%; background: #8b333c; transform: scaleX(var(--p, 0)); transform-origin: left; }

  /* ─── ORAKELKARTEN · fallen beim Scrollen, liegen über den Nachbarabschnitten ─ */
  /* v1.0.5: unten keine Überlappung mehr mit Early Bird (vorher −35vh), damit
     alle Karten bis zum Schluss vollständig auf dem Samt liegen. Die
     Überlappung am Anfang (−30vh) bleibt: Die ersten Karten fallen weiterhin
     über das Ende des vorherigen Abschnitts. */
  .oracle {
    position: relative; z-index: 3; height: 205vh; margin-top: -30vh; margin-bottom: 0;
    background: transparent; overflow: visible; pointer-events: none;
  }
  .oracle-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: transparent; pointer-events: none; }
  /* v1.0.5: Fläche unter den Karten (v1.0.7: einfarbig #182A20), statisch im gepinnten Bild.
     Ihre Oberkante folgt nur der Unterkante des vorherigen Abschnitts
     (--oracle-clip aus scroll-scenes.js), damit dieser nie verdeckt wird.
     Fehlt die Datei, bleibt die Fläche #182A20. */
  .oracle-sticky::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-color: #182A20; /* v1.0.7: einfarbig statt Samt (Textur auf Desktop zu gering aufgelöst) */
    clip-path: inset(var(--oracle-clip, 0px) 0 0 0);
  }
  .oracle-stage { position: absolute; inset: 4% 5% 3% 4%; perspective: 1100px; pointer-events: none; }
  .oracle-card {
    position: absolute; left: var(--x); top: var(--y);
    width: clamp(85px, 9vw, 145px); aspect-ratio: 673 / 1028;
    border-radius: 11px; overflow: hidden; background: #df9aca;
    box-shadow: 0 8px 16px rgba(41,31,23,.14), 0 2px 4px rgba(41,31,23,.17);
    transform-origin: 50% 55%; backface-visibility: hidden;
    transform: translate(-50%, -50%) translate3d(0, -115vh, 0) rotate(-45deg);
    opacity: 0; will-change: transform, opacity;
  }
  .oracle-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

  /* ─── STATISCHE FASSUNG (ohne JS / Bewegung reduzieren) ─────
     v1.0.1: .hz-stacked = gleiches Kartenlayout für „Hinter JUNO“, wenn der
     Text bei sehr flachem Fenster (z. B. Smartphone quer) nicht in die
     gepinnte Karte passt. Setzt scroll-scenes.js nur in diesem Fall. */
  .static .story { height: auto; }
  .static .stage { position: relative; height: auto; overflow: visible; }
  .static .hero-frame { position: relative; height: 100svh; overflow: hidden; }
  .static .next-overlay { position: relative; inset: auto; height: 100svh; transform: none; }
  .static .frag, .static .s2-frag, .static .title-area, .static .hero-countdown,
  .static .hz-art, .static .oracle-card { will-change: auto; }

  .static .hz, .hz-stacked .hz { height: auto; }
  .static .hz-sticky, .hz-stacked .hz-sticky { position: relative; height: auto; display: block; overflow: visible; }
  .static .hz-viewport, .hz-stacked .hz-viewport { overflow: visible; }
  .static .hz-track, .hz-stacked .hz-track { width: auto; height: auto; display: block; transform: none; }
  .static .hz-panel, .hz-stacked .hz-panel { width: 100%; min-width: 0; height: auto; min-height: 60vh; }
  .static .hz-card, .hz-stacked .hz-card { max-height: none; } /* v1.0.2: lange Texte nie kappen */
  .static .hz-progress > div, .hz-stacked .hz-progress > div { transform: none; }

  .static .oracle { height: 95vh; margin-top: 0; margin-bottom: 0; } /* v1.0.5: Samtfläche ohne Überlappung */
  .static .oracle-sticky { position: relative; }
  .static .oracle-card { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) scale(var(--s)); }
}