/* ==========================================================================
   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, Schatten und Bogen in
   Prozent, also immer auf derselben Stelle der Kuppe.
   Wolf wie im Lab (DayWolf.tsx, WolfHill): Leinwand 36,3 % der Bildbreite,
   Pfoten auf 39,4 % der Bildhöhe (HILL_GROUND), Schatten 62 % × 12 % der
   Leinwand. Kuppe (Grat) bei 38,25 % der Bildhöhe.
   ========================================================================== */

/* --- 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__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene__wolf {
  position: absolute;
  left: 31.85%;
  top: 19.46%;
  width: 36.3%;
  height: auto;
}
.scene__shadow {
  position: absolute;
  left: 38.75%;
  top: 38.18%;
  width: 22.5%;
  height: auto;
  opacity: 0.9;
}

/* Bogen (Oura „Steps progress" im Lab): feine Spur, Punkte, glimmender Start. */
.arc__track {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.3;
  stroke-width: 5;
  stroke-linecap: round;
}
.arc__day {
  fill: #fff;
  opacity: 0.5;
}
.arc__start {
  fill: #fff;
}
.arc__glow {
  fill: #fff;
  opacity: 0.14;
}
/* Ziel am rechten Ende (3/3): derselbe Punkt, nur noch nicht erreicht. */
.arc__end {
  fill: #fff;
  opacity: 0.5;
}

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

.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;
}
.hero__count {
  font-size: 2.35rem;
  color: #fff;
  margin-bottom: -0.15rem;
}
/* Der Spruch: höchstens drei Zeilen (Jakob 04.10.). Der zweite Satz steht
   immer allein (br im HTML) und muss in EINE Zeile passen: „Und scrollst
   trotzdem." ist kursiv 7,82 × Schriftgröße breit, die Textspalte auf dem
   Telefon 96,4vw − 24px → Schrift ≤ Spalte / 8,1 = 11,9vw − 2,96px. */
.hero .t-hero {
  max-width: none;
  font-size: clamp(2rem, calc(11.9vw - 2.96px), 4.75rem);
  line-height: 1.02;
}
.hero__lead {
  color: rgba(255, 255, 255, 0.8);
}

/* 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__count {
    font-size: 2.5rem;
  }
  .hero .t-hero {
    max-width: none;
  }
}

/* Erster Auftritt: Bogen zeichnet sich, Punkte erscheinen, der Welpe setzt
   sich auf die Kuppe. Der Text steht sofort da – Jakob 04.10.: keine
   Animationen, bei denen Text auftaucht; nur Bogen und Karten bewegen sich.
   Nur mit JavaScript (Klasse aus main.js), nicht bei „Bewegung reduzieren". */
@media (prefers-reduced-motion: no-preference) {
  .js-intro .arc__track {
    stroke-dasharray: 1;
    animation: arc-draw 1300ms var(--ease-in-out) 150ms both;
  }
  .js-intro .arc__day {
    animation: fade-in 500ms var(--ease-out) both;
  }
  .js-intro .arc__day:nth-of-type(1) {
    animation-delay: 700ms;
  }
  .js-intro .arc__day:nth-of-type(2) {
    animation-delay: 1050ms;
  }
  .js-intro .arc__end {
    animation: fade-in 500ms var(--ease-out) 1350ms both;
  }
  .js-intro .arc__start,
  .js-intro .arc__glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: glow-in 900ms var(--ease-out) 120ms both;
  }
  .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 glow-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}
@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);
}