/* ==========================================================================
   Tabiyume · Hero-Motion
   Gemeinsame Quelle fuer /landing/index.html und /landing/en/index.html —
   bewusst NICHT inline, damit DE und EN nicht auseinanderlaufen koennen.

   Fokusmoment "Der Wisch zieht die Linie": ein Papierschleier gleitet auf
   der Routenachse weg und legt den Vermessungstisch frei; in seiner Spur
   wird die Route eingetragen, zwei Stationen stempeln ein, das Token
   laeuft die Strecke ab. Danach nur noch ein sehr langsamer Atem.

   Prototypen und Herleitung: static/landing/prototypes/hero-motion/
   ========================================================================== */

/* --- Der Vermessungstisch bekommt Rand ------------------------------------
   Vorher min(1720px, calc(100% - 28px)) -> 14px sichtbarer Tisch bei 1280px,
   zu wenig, als dass eine Bewegung darauf traegt. */
@media (min-width: 1200px) {
  .hero.wrap { width: min(1720px, calc(100% - 96px)); }
}

/* --- Folio schrumpft mit der Fensterhoehe ---------------------------------
   Die sichtbaren Baender ueber und unter dem Folio sind reine Restrechnung:

       Bandhoehe = (Fensterhoehe - 76 Header - 96 Proofbar
                    - 20 Hero-Padding - Foliohoehe) / 2

   Bei fester Foliohoehe 650 bleibt unter ~900px Fensterhoehe kein Platz
   mehr und die eingetragene Route ist unsichtbar. min-height allein zu
   senken reicht nicht — min-height ist eine Untergrenze, die reale Hoehe
   kommt vom Inhalt. Also haengen Typo und Abstaende ebenfalls an svh.

   Kein max-height-Breakpoint, sondern stufenlos: ein Umschalter wuerde
   beim Resizen sichtbar springen. Die Zielbandhoehe steht in der Formel —
       342px = 76 + 96 + 20 + 2 x 75 Band
   360px ist die Untergrenze fuer sehr flache Fenster. */
@media (min-width: 1200px) {
  .atlas-wrap { min-height: clamp(360px, calc(100svh - 342px), 650px); }
  .atlas-copy {
    padding: clamp(26px, 4.6svh, 66px);
    gap: clamp(14px, 2.2svh, 25px);
  }
  .atlas-title { font-size: clamp(2.4rem, min(3.7vw, 5.4svh), 4.6rem); }
  .atlas-lead { font-size: clamp(.95rem, 1.9svh, 1.18rem); }
  .atlas-cta { min-height: clamp(50px, 6svh, 58px); }
  .atlas-copy::after { bottom: clamp(16px, 2.6svh, 28px); }
}

/* --- Buehne ---------------------------------------------------------------
   Ersetzt .first-fold::before durch echte Elemente, damit JS das transform
   direkt setzen kann: eine CSS-Variable auf .first-fold wuerde bei jedem
   Frame den Style des gesamten Hero-Subtrees neu berechnen.

   Die Umschaltung haengt an html.hero-motion, das erst gesetzt wird, wenn
   die Buehne im DOM steht — ohne diese Klammer gaebe es einen Frame mit
   verstecktem ::before und noch fehlender Buehne, also blankes Papier.
   Ohne JavaScript bleibt schlicht das bisherige ::before-Feld stehen. */
html.hero-motion .first-fold::before { display: none !important; }

.fold-stage {
  position: absolute;
  z-index: -1;
  /* bottom MUSS 0 sein: die Buehne endet damit an der Unterkante des First
     Fold, die letzten ~96px liegen hinter der deckenden Proofbar. Negativ
     ragte der Streckenanfang unter der schwarzen Leiste hervor. */
  inset: -76px -34px 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.fold-field {
  position: absolute;
  /* Reserve fuer Atem (14/8px) + Zeiger-Parallaxe (8px) = 22/16px Worst Case */
  inset: -40px;
  background-color: var(--paper);
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 12%, transparent),
                    color-mix(in srgb, var(--paper) 12%, transparent)),
    url("/landing/prototypes/assets/hero-topographic-map.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 640px) {
  .fold-stage { inset: -74px 0 0; }
  .fold-field { inset: 0; background-position: 20% top; background-size: auto 100svh; }
}

/* --- Das Folio wird aufgelegt ---------------------------------------------
   Ersetzt folio-open. Weg: filter:saturate() auf einem grossen Subtree
   (Repaint pro Frame). Dafuer eine Schattenbluete von eng nach "Ambient
   Folio" — der Schatten erklaert die Lage (DESIGN.md, Structural Shadow). */
@media (prefers-reduced-motion: no-preference) {
  .atlas-wrap {
    animation: folio-place 700ms 120ms cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes folio-place {
    from {
      opacity: .88;
      transform: perspective(1200px) rotateX(1.4deg) translateY(18px);
      box-shadow: 4px 6px 10px color-mix(in srgb, var(--ink) 8%, transparent);
    }
    to {
      opacity: 1;
      transform: perspective(1200px) rotateX(0) translateY(0);
      box-shadow: 11px 14px 28px color-mix(in srgb, var(--ink) 13%, transparent);
    }
  }

  /* Copy: Stagger 70 -> 60ms, Weg 14 -> 10px, Dauer .65 -> .52s.
     Gesamtstagger bleibt unter 200ms, sonst liest sich das Fold traege. */
  @keyframes copy-arrive {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .atlas-copy .hero-brand,
  .atlas-copy .atlas-title,
  .atlas-copy .atlas-lead,
  .atlas-copy .atlas-cta { animation-duration: .52s; }

  .atlas-copy .hero-brand { animation-delay: .18s; }
  .atlas-copy .atlas-title { animation-delay: .24s; }
  .atlas-copy .atlas-lead  { animation-delay: .30s; }
  .atlas-copy .atlas-cta   { animation-delay: .36s; }
}

/* --- Header · Kartenrand statt durchscheinender Route ---------------------
   Der gedruckte rote Streckenzug schnitt die Masthead-Flaeche an und wirkte
   dort wie ein Fehldruck. Ersetzt durch eine Teilstrichskala, wie sie auf
   der Randleiste einer topografischen Karte steht: kurze Striche alle 8px,
   lange alle 40px. Reines CSS, kein Bild.

   backdrop-filter faellt weg — er war wirkungslos, weil background-color
   mit #f7f7f4 vollstaendig deckt, erzwang auf einem sticky Element beim
   Scrollen aber eine eigene Compositing-Schicht.

   Abweichung von DESIGN.md ("masthead over the same topographic field as
   the hero"), bewusst. Mobile bleibt die Sumi-Departure-Bar. */
@media (min-width: 641px) {
  header {
    background-color: var(--paper);
    background-image:
      repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--ink) 32%, transparent) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--ink) 15%, transparent) 0 1px, transparent 1px 8px);
    background-position: left bottom, left bottom;
    background-size: 100% 13px, 100% 6px;
    background-repeat: repeat-x, repeat-x;
    backdrop-filter: none;
  }
}

/* --- Der Papierschleier ---------------------------------------------------
   Geometrie gemessen, nicht geschaetzt: die Route laeuft im Asset
   (1678x937) von (413,937) nach (1275,0), Richtung (0.677,-0.736), also
   42.6 Grad von der Vertikalen. Der Schleier wird um genau diesen Winkel
   gedreht und in seiner eigenen -Y-Achse verschoben — seine Kante steht
   damit senkrecht auf der Route und wischt sie von unten-links nach
   oben-rechts frei. Nachgerechnet: alle Streckenpunkte haben im lokalen
   System des Schleiers dieselbe x-Koordinate.

   Eine einzige transform-Animation. Compositor-only, kein Repaint. Die
   weiche Kante ist eine STATISCHE Maske — eine animierte Maske muesste
   jeden Frame neu rastern. */
.fold-veil {
  position: absolute;
  left: -60%;
  top: -60%;
  width: 220%;
  height: 220%;
  background-color: var(--paper);
  background-image: var(--paper-grain);
  background-size: 17px 19px, 23px 29px, 31px 37px;
  transform-origin: 50% 50%;
  /* Ruhezustand = bereits weggefahren. Faellt die Animation aus, ist das
     Feld einfach sichtbar. */
  transform: rotate(42.6deg) translateY(-142%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 74%, rgba(0, 0, 0, .5) 87%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0 74%, rgba(0, 0, 0, .5) 87%, transparent 100%);
}

/* --- Die eingetragene Route ----------------------------------------------
   Die im JPG GEDRUCKTE rote Route wird von einer papierfarbenen Linie exakt
   ueberdeckt (gemessene Papierfarbe daneben: #f6f5f1, Streuung 1-2, an 36
   Punkten abgetastet — die Ueberdeckung ist unsichtbar). Darueber laeuft
   die animierte Linie. Spart ein zweites Feld-Asset ohne Route.

   Das SVG traegt viewBox="0 0 1678 937" (Assetmasse) und
   preserveAspectRatio="xMidYMid slice" — das entspricht exakt
   background-size:cover + background-position:center des Feldes, SVG- und
   Bildkoordinaten decken sich also in jeder Fenstergroesse. */
:root {
  /* Timing der Eintragung an EINER Stelle. Die Stationen leiten ihre
     Stempelverzoegerung daraus ab: sie stempeln, wenn der Strich sie
     erreicht. Start 90ms ist bewusst 30ms nach dem Schleier — gemessen
     wird der Streckenanfang bei 82ms frei, das Ende bei 458ms
     (tau_frei(t) = 82ms + 376ms * t). Damit bleibt die Linie durchgehend
     im bereits Freigelegten; der Abstand zur Kante waechst von 8 auf
     532ms. Bei identischem Start wuerde das untere Sichtband unter der
     Abdeckung gezeichnet und erschiene fertig statt gezogen. */
  --line-delay: 90ms;
  --line-dur: 900ms;
}

.fold-survey-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Kein vector-effect: die Strichbreite soll mit dem Bild skalieren, genau
   wie die gedruckte Linie darunter. */
.fold-erase {
  stroke: #f6f5f1;
  stroke-width: 13;
  stroke-linecap: butt;
}

.fold-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-dasharray: 16 13;
  stroke-linecap: butt;
}

/* Maskenlinie, volle Laenge 1274 = sqrt(862^2 + 937^2). Ruhezustand
   offengelegt, damit ohne Animation die Route einfach dasteht.
   Eine gestrichelte Linie laesst sich nicht per dashoffset "zeichnen" —
   deshalb Maske statt direkter Animation. */
.fold-reveal {
  stroke: #fff;
  stroke-width: 60;
  stroke-dasharray: 1274;
  stroke-dashoffset: 0;
}

.fold-station {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 4;
  transform-box: fill-box;   /* ohne das greift transform-origin auf SVG nicht */
  transform-origin: center;
}

/* Das ✈︎-Token, das die Strecke ablief, ist bewusst entfernt: es kostete
   900ms Sequenzlaenge fuer eine zu rund 85% verdeckte Strecke. Die Sequenz
   endet damit bei 1.13s statt 1.84s. Der Prototyp unter
   /landing/prototypes/hero-motion/ zeigt die Fassung mit Token weiterhin. */

@media (prefers-reduced-motion: no-preference) {
  .fold-veil {
    will-change: transform;
    /* linear ist Absicht: gemessen sind mit cubic-bezier(.16,1,.3,1) nach
       380 von 900ms bereits ~93% des Weges zurueckgelegt — der Wisch
       blitzt, statt zu vermessen. Ein Zeichengeraet laeuft mit konstanter
       Geschwindigkeit, das Ausrollen uebernimmt die Maskenkante. */
    animation: veil-survey 800ms 60ms linear both;
  }

  @keyframes veil-survey {
    from { transform: rotate(42.6deg) translateY(0); }
    to   { transform: rotate(42.6deg) translateY(-142%); }
  }

  .fold-reveal {
    animation: survey-draw var(--line-dur) var(--line-delay) linear both;
  }

  @keyframes survey-draw {
    from { stroke-dashoffset: 1274; }
    to   { stroke-dashoffset: 0; }
  }

  /* Stempelt genau dann, wenn der Strich die Station erreicht.
     --t setzt placeStations() zur Laufzeit auf den Streckenparameter.
     Nie aus scale(0) — nichts in der echten Welt taucht aus dem Nichts auf. */
  .fold-station {
    animation: station-stamp 260ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--line-delay) + var(--t, 0) * var(--line-dur));
  }

  @keyframes station-stamp {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: scale(1); }
  }

}

/* --- Nebenbefunde ---------------------------------------------------------
   Im Original gab es kein einziges @media (hover:hover) — auf Touch bleibt
   der Hover-Lift nach dem Tap haengen. */
@media (hover: none), (pointer: coarse) {
  .atlas-cta:hover,
  .ticket-cta:hover,
  .navlinks .nav-cta:hover,
  .livery-option:hover,
  .dossier-tab:hover { transform: none; }
}

/* drop-shadow() nicht mittransitionieren: der Filter wird pro Frame neu
   gerastert. Der Schattenwechsel schnappt jetzt, die Bewegung bleibt weich.
   (box-shadow scheidet aus — die CTAs sind clip-path-Tickets.) */
.atlas-cta  { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ticket-cta { transition: transform .4s cubic-bezier(.16, 1, .3, 1),
                          background-color .4s, color .4s; }