/* scenes.css — die Bausteine der acht Szenen.
 *
 * LEITSATZ (Konzept, Abschnitt 02): Die Seite zeigt nicht die App, sondern was
 * sie hinterlaesst. Deshalb sind die Hauptdarsteller hier keine Screenshots,
 * sondern Reisefotos, Tagebuchzettel und die Benachrichtigung, die die App
 * wirklich schickt.
 *
 * EINE REGEL, DIE NICHT GEBROCHEN WIRD: Kein Fliesstext liegt frei auf einem
 * Foto. Der Text bekommt entweder eigenen Grund daneben oder eine ruhige
 * Flaeche darueber. Die alte Seite legte weissen Text direkt auf einen
 * Sonnenuntergang — auf dem Entwurf schoen, am Telefon unlesbar.
 */

/* ============ Foto-Szene: Bild als Grund, Text auf eigener Flaeche ============ */

.photo-scene {
  position: relative;
  min-height: min(86svh, 52rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.photo-scene-tall { min-height: min(96svh, 60rem); }

.photo-scene > img.photo-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Der Verlauf, der den Text traegt. Von unten dicht nach oben klar —
   dadurch bleibt das Foto Foto und der Text lesbar. */
.photo-scene::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to top,
    var(--ground) 0%,
    color-mix(in srgb, var(--ground) 92%, transparent) 30%,
    color-mix(in srgb, var(--ground) 62%, transparent) 62%,
    color-mix(in srgb, var(--ground) 22%, transparent) 88%,
    transparent 100%
  );
}

/* TEXT AUF FOTO — die eigentliche Absicherung.
 *
 * Der Verlauf allein reicht nicht: Ueberschriften stehen im oberen Bereich,
 * wo er fast klar ist, und ein helles Foto verschluckt dunklen Text (im
 * dunklen Modus umgekehrt). Deshalb bekommt der Textblock einen eigenen,
 * weichen Grund — hell wie dunkel. Das Foto bleibt daneben sichtbar, der Text
 * ist aber immer lesbar, egal welches Bild dort liegt.
 *
 * Bewusst keine harte Kante: grosser Radius, weicher Rand, Weichzeichner
 * dahinter. Es soll wie Dunst wirken, nicht wie ein aufgeklebtes Kaestchen. */
.photo-scene .on-photo {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-5);
  margin-left: calc(var(--s-5) * -1);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

/* Wo der Browser kein backdrop-filter kann, wird der Grund dichter — sonst
   waere der Text dort schlechter lesbar als ueberall sonst. */
@supports not (backdrop-filter: blur(4px)) {
  .photo-scene .on-photo { background: color-mix(in srgb, var(--ground) 90%, transparent); }
}

@media (max-width: 620px) {
  .photo-scene .on-photo {
    padding: var(--s-5) var(--s-4);
    margin-left: calc(var(--s-4) * -1);
    margin-right: calc(var(--s-4) * -1);
  }
}

.photo-scene .wrap { position: relative; padding-block: var(--s-8) var(--s-7); width: 100%; }

/* ============ Push-Benachrichtigung ============
 * Das stärkste Motiv der alten Seite: die Meldung, die die App wirklich
 * schickt, auf dem Foto des Ortes. Kein Feature-Text nötig. */

.push {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: min(26rem, 100%);
  padding: var(--s-4);
  border-radius: 18px;
  background: color-mix(in srgb, var(--raised) 82%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.push-icon {
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
}
.push-icon svg { width: 1.3rem; height: 1.3rem; }
.push-text { min-width: 0; }
.push-text strong { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.push-text span { display: block; font-size: var(--t-xs); color: var(--ink-soft); margin-top: .1rem; }
.push-when {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: .62rem;
  color: var(--ink-faint);
}

/* Sanft einschweben, wenn die Szene ins Bild kommt */
.push {
  opacity: 0;
  transform: translateY(-12px) scale(.97);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.push.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .push { opacity: 1; transform: none; transition: none; }
}

/* ============ Tagebuchzettel ============
 * Papier, Klebestreifen, leicht gekippt. Der Text in kursiver Newsreader —
 * KEINE Handschrift-Schrift, die wirkt fast immer billig (Konzept, 02). */

.note {
  position: relative;
  width: 100%;
  max-width: 16.5rem;
  padding: .8rem .8rem 1.1rem;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: rotate(var(--note-rot, -2.5deg));
}
.note::before {                     /* Klebestreifen */
  content: "";
  position: absolute;
  top: -.6rem; left: 50%;
  width: 4rem; height: 1.3rem;
  transform: translateX(-50%) rotate(var(--tape-rot, -3deg));
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.note img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.note-place {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--paper-ink);
  opacity: .72;
  margin-top: .55rem;
}
.note-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .96rem;
  line-height: 1.45;
  color: var(--paper-ink);
  margin-top: .28rem;
}
.note-date {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--paper-ink);
  opacity: .5;
  margin-top: .55rem;
}

/* Abwechslung, ohne dass es zufaellig aussieht */
.note-b { --note-rot: 3deg;    --tape-rot: 4deg; }
.note-c { --note-rot: -1.5deg; --tape-rot: 2deg; }

/* Zettel, die frei an der Route haengen (Desktop). Auf schmalen Geraeten
   stehen sie im Fluss mit, statt sich zu ueberlagern. */
.note-pinned { position: absolute; z-index: 2; width: clamp(11rem, 15vw, 15rem); }
@media (max-width: 900px) {
  .note-pinned { position: static; width: 100%; max-width: 15rem; margin-inline: auto; }
}

/* ============ Zettel-Streuung (Szene 3) ============ */

.notes-spread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-6) var(--s-5);
  align-items: start;
  justify-items: center;
}
.notes-spread > :nth-child(2) { margin-top: var(--s-6); }
.notes-spread > :nth-child(3) { margin-top: var(--s-3); }

/* ============ Diagonalschnitt hell/dunkel ============
 * Aus der alten Seite uebernommen — visuell das Beste, was sie hatte. */

/* ============ Hell und Dunkel: ein Geraet auf geteiltem Grund ============
 *
 * So wie es die alte Seite hatte: Der HINTERGRUND ist diagonal geteilt —
 * links hell, rechts dunkel — und genau ein Telefon steht auf der Kante und
 * traegt den Schnitt mit. Dass die beiden Aufnahmen verschiedene Ansichten
 * zeigen, faellt so nicht auf: Die Kante liest sich als Lichtgrenze ueber der
 * ganzen Szene, nicht als Naht zwischen zwei Fremdbildern.
 */
.split-stage {
  position: relative;
  padding-block: var(--s-8);
  overflow: hidden;
  isolation: isolate;
}

/* Der geteilte Grund. Die Kante hat denselben Winkel wie der Schnitt im
   Geraet (siehe .shot-light) — sonst wirkt es wie zwei Effekte statt einem. */
.split-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--ground) 0 49.6%,
    color-mix(in srgb, var(--accent) 60%, transparent) 49.6% 50.4%,
    var(--ink) 50.4% 100%);
}

.split-stage .phone { margin-inline: auto; max-width: 16rem; position: relative; z-index: 1; }

/* Die Beschriftungen liegen jeweils auf ihrer Seite und muessen deshalb
   gegenlaeufig gefaerbt sein — sonst verschwindet eine im Grund. */
.split-stage .split-marks { position: relative; z-index: 1; margin-top: var(--s-5); }
.split-stage .split-marks span:first-child { color: var(--ink); }
.split-stage .split-marks span:last-child  { color: var(--ground); }

/* Der Schnitt im Geraet: die helle Aufnahme wird links beschnitten, darunter
   liegt die dunkle. Der Winkel entspricht der Kante im Hintergrund. */
.split-shot { position: relative; width: 100%; height: 100%; overflow: hidden; }
.split-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.split-shot .shot-light { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.split-shot .seam {
  position: absolute; inset: 0;
  background: linear-gradient(92deg,
    transparent 48.6%,
    color-mix(in srgb, var(--accent) 75%, transparent) 50%,
    transparent 51.4%);
  pointer-events: none;
}

@media (max-width: 620px) {
  /* Schmal wirkt die Diagonale gedraengt — dort senkrecht teilen. */
  .split-stage::before { background: linear-gradient(90deg, var(--ground) 0 50%, var(--ink) 50% 100%); }
  .split-stage .phone { max-width: 13rem; }
}

.split-marks {
  display: flex; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-faint);
}
.split-marks span { display: inline-flex; align-items: center; gap: .4rem; }

/* ============ Grosse Zahlen ============ */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line-soft);
}
.figure-val {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.figure-key { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-2); }

/* ============ Birdys Buehne (Szene 5) ============ */

.stage {
  position: relative;
  min-height: clamp(15rem, 32vw, 24rem);
  display: grid;
  place-items: end center;
  padding-bottom: var(--s-5);
}
/* Ein warmer Schein, damit er nicht im Nichts sitzt */
.stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: min(38rem, 90%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, var(--accent-haze), transparent 62%);
  pointer-events: none;
}
.stage-hint {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============ Freistehendes Buch (Szene 4) ============
 * Das Motiv hat einen transparenten Hintergrund und schwebt daher frei.
 * Es braucht deshalb einen eigenen Bodenschatten, sonst klebt es im Nichts. */

.bookshot {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.bookshot img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 26px 34px var(--drop-shade));
}

/* Der Schatten auf dem Boden — liegt unter dem Buch und wandert beim Schweben
   nicht mit, sondern atmet nur leicht mit. */
.bookshot::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2%;
  width: 74%; height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--bird-shade), transparent 72%);
  filter: blur(6px);
  z-index: 0;
}

@keyframes book-float {
  0%, 100% { transform: translateY(0)     rotate(-.4deg); }
  50%      { transform: translateY(-10px) rotate(.4deg);  }
}
.bookshot img { animation: book-float 7s var(--ease-soft) infinite; }

@media (prefers-reduced-motion: reduce) {
  .bookshot img { animation: none; }
}

/* ============ Store-Galerie ============
 * Die fertigen Store-Grafiken bringen ihren eigenen Rahmen und ihre eigene
 * Bildunterschrift mit. Sie noch einmal in einen Telefonrahmen zu stecken
 * waere Rahmen im Rahmen — deshalb stehen sie hier frei, wie im App Store.
 * Das gibt der Seite auf einen Schlag Farbe und zeigt echte App statt
 * Platzhalter. */

.shots {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--s-2) var(--s-5);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.shots img {
  flex: none;
  width: min(15rem, 60vw);
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
  scroll-snap-align: center;
  transition: transform var(--dur) var(--ease-out);
}
.shots img:hover { transform: translateY(-4px); }

.shots-wrap { position: relative; }
.shots-wrap::before,
.shots-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 2.5rem;
  width: 3.5rem; pointer-events: none; z-index: 1;
}
.shots-wrap::before { left: 0;  background: linear-gradient(90deg,  var(--ground), transparent); }
.shots-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ground), transparent); }
.section-raised .shots-wrap::before { background: linear-gradient(90deg,  var(--raised), transparent); }
.section-raised .shots-wrap::after  { background: linear-gradient(270deg, var(--raised), transparent); }

/* ============ Das Atelier als Buehne ============
 * Der Raum aus der App, und Birdy landet auf dem Stuhl.
 *
 * ZWEI EBENEN: .atelier ist nur der Rahmen (und auf schmalen Geraeten der
 * Scroll-Behaelter), .atelier-canvas ist die eigentliche Buehne. Alles, was
 * im Bild verankert ist — Einrichtung und Sitzplatz — liegt in der Buehne und
 * wandert deshalb beim seitlichen Scrollen korrekt mit.
 *
 * Auf schmalen Geraeten wird das Bild NICHT auf Fensterbreite gequetscht.
 * Dann waere der Raum nur noch ein Streifen und Birdy sitzt auf einem Stuhl,
 * den man kaum erkennt. Stattdessen bleibt die Buehne breit und laesst sich
 * seitlich schieben; site.js stellt sie beim ersten Anzeigen so ein, dass der
 * Stuhl im Blick ist.
 */

.atelier {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  background: var(--sheet);
}

.atelier-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.atelier-canvas > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Sanfter Rand nach innen — sonst schneidet das Bild hart ab und wirkt
   wie eine Fototapete statt wie ein Raum. */
.atelier-canvas::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, color-mix(in srgb, var(--ground) 55%, transparent) 100%);
  pointer-events: none;
}

/* Der Sitzplatz auf dem Stuhl. Unsichtbar, nur ein Ziel fuer die Flugbahn. */
.atelier-perch {
  position: absolute;
  left: 27%; top: 72%;
  width: 1px; height: 1px;
}

/* ---- Schmale Geraete: schieben statt quetschen ---- */
@media (max-width: 720px) {
  .atelier {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  /* Breiter als der Rahmen — dadurch bleibt der Raum ein Raum. */
  .atelier-canvas { width: 190%; min-width: 34rem; }
}

@media (max-width: 480px) {
  .atelier-canvas { width: 240%; }
}

.atelier-hint {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: var(--s-4);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .4rem .9rem;
  border-radius: var(--radius-pill);
}

/* ============ Laenderband ============
 * Aus der alten Seite zurueckgeholt. Es bringt Farbe und, wichtiger, ein
 * Versprechen: die Welt ist gross, und diese App zaehlt sie mit.
 *
 * Bewusst NICHT als Endlos-Laufband wie frueher — Dauerbewegung zieht den
 * Blick vom Text ab und wirkt nach dem dritten Durchlauf billig. Stattdessen
 * ein ruhiger Streifen, der beim Ueberfahren anhaelt und den man von Hand
 * schieben kann.
 */

.flagband {
  border-block: 1px solid var(--line-soft);
  background: var(--raised);
  overflow: hidden;
  position: relative;
}
.flagband-track {
  display: flex;
  gap: var(--s-6);
  width: max-content;
  padding-block: var(--s-4);
  animation: drift 90s linear infinite;
}
.flagband:hover .flagband-track,
.flagband:focus-within .flagband-track { animation-play-state: paused; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.flagband span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.flagband b {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
}
.flagband .flag { font-size: 1.15rem; line-height: 1; }

/* Kanten weich, damit der Streifen nicht abgeschnitten wirkt */
.flagband::before,
.flagband::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 5rem;
  pointer-events: none; z-index: 1;
}
.flagband::before { left: 0;  background: linear-gradient(90deg,  var(--raised), transparent); }
.flagband::after  { right: 0; background: linear-gradient(270deg, var(--raised), transparent); }

@media (prefers-reduced-motion: reduce) {
  .flagband-track { animation: none; }
  .flagband { overflow-x: auto; }
}

/* ============ Einrichtung im Atelier ============
 *
 * Die Stuecke aus der App — Regal, Kompass, Schneekugel, Bild, Pflanze,
 * Globus — tauchen auf, sobald die Szene ins Bild kommt, und schweben danach
 * ganz leicht.
 *
 * ZWEI EBENEN, mit Absicht: Das aeussere <span> traegt Ort und das Aufploppen,
 * das innere <img> das Schweben. Beides in einem Element ginge nicht — die
 * zweite transform-Animation wuerde die erste ueberschreiben.
 *
 * Ort und Groesse kommen aus --x / --y / --w im Markup, alles in Prozent des
 * Atelierbildes. Dadurch bleiben die Stuecke beim Skalieren an ihrem Platz.
 */

.atelier-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.atelier-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
}

/* Aufploppen mit leichtem Ueberschwingen — erst zu gross, dann einrasten.
   Das wirkt lebendiger als ein reines Einblenden. */
@keyframes atelier-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2)  rotate(-10deg); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }
  75%  {             transform: translate(-50%, -50%) scale(.97) rotate(-1.5deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(0deg); }
}

/* Danach ein ruhiges Schweben. Jedes Stueck bekommt im Markup eine eigene
   Dauer, sonst wippen alle im Gleichschritt und es wirkt mechanisch. */
@keyframes atelier-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.atelier.is-in .atelier-item {
  animation: atelier-pop .62s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both;
}
.atelier.is-in .atelier-item img {
  animation: atelier-float var(--f, 5s) ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) + .62s);
}

@media (prefers-reduced-motion: reduce) {
  .atelier-item { opacity: 1; transform: translate(-50%, -50%); }
  .atelier.is-in .atelier-item,
  .atelier.is-in .atelier-item img { animation: none; }
}

/* Auf schmalen Geraeten wird das Bild stark beschnitten — dort nur die
   Stuecke zeigen, die in der Bildmitte liegen. */
@media (max-width: 620px) {
  .atelier-item[data-edge] { display: none; }
}