/* ==========================================================================
   ARC – Startseite: Hero (Nacht), Abschnitte, Vertrauen, Finale (Nacht).
   Die Demos selbst (Kernquest-Stapel, Wolf-Regler, Zeit kaufen …) stehen in
   demos.css.

   Szenen-Rechnung: Die Hügel-Bilder aus dem Lab sind 1290 × 2311. Die
   „Bühne" hat das Format des Bildes und deckt die Fläche ab (wie
   object-fit: cover, aber als Box). `.scene__orig` ist die Fläche des
   ORIGINAL-Bilds in der Bühne – darin sitzen Wolf und Schatten in Prozent,
   also immer auf derselben Stelle der Kuppe.
   Punkte-Wolf (assets/img/arc-wolf.svg, 220 × 290): 19 % der Bildbreite
   = 13,98 % der Bildhöhe, Pfoten auf 39,4 % (HILL_GROUND im Lab), Körper
   (Spalte 10 von 22) mittig über dem Grat. Kuppe (Grat) bei 38,25 %.
   ========================================================================== */

/* --- Szene ---------------------------------------------------------------- */

.scene {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--floor);
}
.scene__stage {
  /* Telefon: hochkant, deckt die Fläche (Breite mind. Höhe × 0,5582). */
  --ox: 0%;
  --sw: 100%;
  position: absolute;
  left: 50%;
  /* Auf breiteren Hochkant-Schirmen (Tablet, schmales Fenster) wird die Bühne
     höher als die Fläche; dann rückt sie nach oben, damit die Kuppe bei 42 %
     bleibt und der Text darunter Platz hat. Auf dem Telefon bleibt top = 0. */
  top: min(0px, calc(var(--scene-h, 100svh) * 0.42 - 0.3825 * max(var(--scene-h, 100svh), 179.15vw)));
  width: max(100%, calc(var(--scene-h, 100svh) * 0.5582));
  aspect-ratio: 1290 / 2311;
  translate: -50% 0;
}
.scene__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene__orig {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ox);
  width: var(--sw);
}
.scene__wolf {
  position: absolute;
  left: 41%;
  top: 25.42%;
  width: 19%;
  height: auto;
}
.scene__shadow {
  position: absolute;
  left: 39.5%;
  top: 38.24%;
  width: 21%;
  height: auto;
  opacity: 0.75;
}

/* --- Hero ----------------------------------------------------------------- */

/* Anzeige auf Oliv (Brand OS, Bildsprache): ein Satz, der Wolf, viel Platz.
   Abstand nach oben, sonst stößt sie direkt an die Liga-Karte davor (Jakob 11.10.). */
.brand-ad {
  margin-top: var(--section);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding: var(--section) var(--gutter);
  background: var(--olive);
  color: var(--paper);
  text-align: center;
}
.brand-ad__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.brand-ad__wolf {
  display: block;
  height: clamp(7rem, 8vw + 4rem, 11rem);
  width: auto;
}
.brand-ad__lead {
  margin: 0;
  font-size: var(--text-lead);
  color: rgba(242, 240, 232, 0.8);
}

.hero {
  --hero-h: max(100svh, 45rem);
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: var(--hero-h);
  background: var(--floor);
  color: #fff;
  overflow: clip;
}
/* Ebenen: Szene 0 · Verlauf 1 · Text 2. Unten läuft das Bild in den Boden
   der Seite – wie im Lab („Bild läuft nahtlos in den Boden"). */
.hero__scene {
  --scene-h: var(--hero-h);
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(3, 8, 3, 0), rgba(3, 8, 3, 0.7) 55%, var(--bg));
  pointer-events: none;
}
/* Der Text steht mittig in der Wiese unter der Kuppe (Kuppe bei ≤ 42 % der
   Hero-Höhe, siehe .scene__stage) – nicht ganz unten angeklebt. */
.hero__copy {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.95rem;
  padding: calc(var(--hero-h) * 0.44) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  text-align: center;
}
/* Der Satz der Marke (Brand OS): zwei Sätze, der zweite kursiv und gedämpft.
   „Everyone has a vision." muss auf dem Telefon in EINE Zeile passen: er ist
   7,43 × Schriftgröße breit (gemessen), die Textspalte 100vw − 36px → Schrift
   ≤ Spalte / 7,6 = 13,1vw − 4,7px. Telefon drei Zeilen, breite Schirme zwei. */
.hero .t-hero {
  max-width: 62rem;
  font-size: clamp(2rem, calc(13.1vw - 4.7px), 5.6rem);
  line-height: 1.02;
  text-wrap: balance;
}
.hero .t-hero em {
  color: rgba(242, 240, 232, 0.78);
}
/* „scroll past it." bleibt zusammen: Telefon „Most people / scroll past it." */
.hero .t-hero .keep {
  white-space: nowrap;
}

/* Breite Schirme: dieselbe Szene über die ganze Breite. Die breite Fassung
   (3096 × 2311, Original in der Mitte = 29,17 % … 70,83 %) ist 1,79 × so hoch
   wie der Hero; die Kuppe steht bei 44 % der Hero-Höhe (darunter braucht der
   zweizeilige Spruch Platz): top = 0,44 × Hero − 0,3825 × Bühnenhöhe. Reicht die Breite nicht (sehr
   breite Fenster), wächst die Bühne mit der Breite (74,64vw = 100vw / 1,3397). */
@media (min-width: 48rem) and (min-aspect-ratio: 1/1) {
  .hero {
    --hero-h: max(100svh, 44rem);
  }
  .hero__scene .scene__stage {
    --ox: 29.17%;
    --sw: 41.67%;
    aspect-ratio: 3096 / 2311;
    width: max(100%, calc(var(--hero-h) * 2.398));
    top: calc(var(--hero-h) * 0.44 - 0.3825 * max(74.64vw, var(--hero-h) * 1.79));
  }
  .hero::after {
    height: 30%;
  }
  .hero__copy {
    gap: 1.2rem;
    padding-top: calc(var(--hero-h) * 0.47);
  }
  .hero .t-hero {
    max-width: none;
  }
}

/* Erster Auftritt: der Wolf setzt sich auf die Kuppe. Der Text steht sofort
   da – Jakob 04.10.: keine Animationen, bei denen Text auftaucht.
   Nur mit JavaScript (Klasse aus main.js), nicht bei „Bewegung reduzieren". */
@media (prefers-reduced-motion: no-preference) {
  .js-intro .hero .scene__wolf {
    animation: wolf-settle 820ms var(--ease-expo) 380ms both;
  }
  .js-intro .hero .scene__shadow {
    transform-origin: 50% 50%;
    animation: shadow-settle 820ms var(--ease-expo) 380ms both;
  }
}

@keyframes arc-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes wolf-settle {
  from {
    opacity: 0;
    transform: translateY(-9%);
  }
}
@keyframes shadow-settle {
  from {
    opacity: 0;
    transform: scaleX(0.5);
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}

/* Leichte Tiefe beim Scrollen (Parallaxe wie auf „Heute"): die Szene bleibt
   etwas zurück. Nur wo der Browser scroll-gebundene Animationen kann. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__scene .scene__stage {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes hero-drift {
  to {
    transform: translateY(14%);
  }
}

/* --- Abschnitte ---------------------------------------------------------- */

.sec {
  position: relative;
  padding-top: var(--section);
}
.sec__grid {
  display: grid;
  gap: clamp(2.75rem, 6vw, 5.5rem);
  align-items: center;
}
.sec__head {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.sec__head--center {
  justify-items: center;
  max-width: 46rem;
  margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);
  text-align: center;
}
.sec__head--center .t-lead {
  margin-inline: auto;
}
@media (min-width: 60rem) {
  .sec__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
  .sec__grid--flip > :first-child {
    order: 2;
  }
}

/* Beweis-Arten: genau zwei volle Reihen à drei, alle gleich breit. */
.proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 26rem;
  margin-top: 0.6rem;
}
.proofs .chip {
  justify-content: center;
  min-height: 3rem;
  padding: 0.4rem 0.75rem 0.4rem 0.55rem;
}

/* --- Vertrauen: Icon + EIN Satz, ohne grauen Erklärtext ------------------- */

.trust {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.trust__title {
  max-width: 12ch;
}
.trust__list {
  display: grid;
}
.trust__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}
.trust__item img {
  width: 3rem;
  height: 3rem;
}
.trust__claim {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  line-height: 1.12;
  text-wrap: balance;
}
@media (min-width: 60rem) {
  .trust {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
  .trust .link-arrow {
    grid-column: 2;
  }
}

/* --- Finale (Nacht) ---------------------------------------------------------
   Telefon: wie der Hero – Szene als Grund, Text unten auf der Wiese.
   Breite Schirme: Karte links, Text rechts, drumherum die weiche Nacht. */

.finale {
  --fin-h: max(100svh, 42rem);
  position: relative;
  isolation: isolate;
  margin-top: var(--section);
  min-height: var(--fin-h);
  color: #fff;
  background: var(--floor);
  overflow: clip;
}
.finale__env {
  display: none;
}
.finale::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 26%;
  z-index: 1;
  background: linear-gradient(to bottom, var(--bg), rgba(11, 11, 13, 0.6) 45%, rgba(11, 11, 13, 0));
  pointer-events: none;
}
.finale::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(3, 8, 3, 0), rgba(3, 8, 3, 0.78) 50%, var(--floor) 82%);
  pointer-events: none;
}
.finale__layout {
  position: relative;
  display: grid;
  min-height: var(--fin-h);
}
.finale__scene {
  --scene-h: var(--fin-h);
  position: absolute;
  inset: 0;
  z-index: 0;
}
.finale__copy {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 0 var(--gutter) calc(2.75rem + env(safe-area-inset-bottom));
  text-align: center;
}
.finale .t-display {
  max-width: 12ch;
}
.finale__lead {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}
.finale__cta {
  justify-content: center;
  margin-top: 0.4rem;
}
.finale .store-cta__note {
  color: rgba(255, 255, 255, 0.66);
}

@media (min-width: 48rem) and (min-aspect-ratio: 1/1) {
  .finale {
    --fin-h: max(100svh, 44rem);
  }
  .finale::before {
    height: 30%;
    z-index: -1;
  }
  .finale::after {
    height: 18%;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(3, 8, 3, 0), var(--floor));
  }
  .finale__env {
    display: block;
    position: absolute;
    inset: -4rem;
    z-index: -1;
    background: url("../assets/lab/hill-night-blur.webp") center / cover no-repeat;
    filter: blur(28px) brightness(0.62) saturate(1.15);
  }
  .finale__layout {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 7rem);
    width: min(100% - 2 * var(--gutter), var(--shell));
    margin-inline: auto;
    padding-block: 5rem;
  }
  .finale__scene .scene__stage {
    top: 0;
  }
  .finale__scene {
    --scene-h: 0px;
    position: relative;
    inset: auto;
    width: min(30rem, 38vw, calc((var(--fin-h) - 9rem) * 0.5582));
    aspect-ratio: 1290 / 2311;
    border-radius: var(--r-scene);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.09),
      0 60px 120px -50px rgba(0, 0, 0, 0.9);
  }
  .finale__copy {
    align-self: center;
    justify-items: start;
    gap: 1.3rem;
    padding: 0;
    text-align: left;
  }
  .finale__cta {
    justify-content: flex-start;
  }
}

/* Fußzeile: der Boden unter dem Nacht-Hügel läuft weiter. */
.site-footer--night {
  background: var(--floor);
}