/*
 * The start page story (public/index.html, public/js/story.js). Two layouts share one markup:
 *   - stacked: every scene is a picture with its text below (no script, or "reduce motion")
 *   - .is-scrolly: one sticky stage, the scenes lie on top of each other and are driven by --u, the scene's progress (0 start, 1 end)
 * Where each painted layer sits inside its plate is in story-art.css (generated together with the pictures).
 */
.story-page {
  --story-ink: #2d1d14;
  --story-paper: #f2e8d5;
  --story-muted: #5d4636;
  --story-accent: #b5342b;
  --hero-pos: var(--hero-focus, 50% 50%); /* focal point of an own start page picture (admin tab Design, set in /theme.css; used by js/theme.js) */
  background: var(--story-paper);
}
@media (max-aspect-ratio: 1 / 1) {
  .story-page { --hero-pos: var(--hero-focus-tall, var(--hero-focus, 50% 50%)); }
}

/* The header floats over the painting */
.story-page .site-header {
  position: fixed;
  left: 0;
  right: 0;
  border-bottom: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--story-paper) 92%, transparent), color-mix(in srgb, var(--story-paper) 0%, transparent));
}
.story-page .site-nav { color: var(--story-ink); }
.story-page .nav-links a, .story-page .brand { color: var(--story-ink); }
.story-page .site-header .brand-logo { filter: none; }

/* ---------- the stacked version ---------- */

.story-page .scene {
  position: relative;
  overflow: hidden;
  background: var(--story-paper);
  color: var(--story-ink);
}
.story-page .scene-art {
  position: relative;
  width: 100%;
  aspect-ratio: 2400 / 1500;
  max-height: 80svh;
  overflow: hidden;
}
.story-page .layer {
  position: absolute;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.story-page .scene-text {
  position: relative;
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) var(--space-6);
}
.story-page .scene-text h1,
.story-page .scene-text h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem);
}
.story-page .scene-text h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.6rem); }
.story-page .scene-text p { margin: 0 0 var(--space-2); font-size: var(--text-base); line-height: var(--leading-body); color: var(--story-ink); }
.story-page .scene-text .eyebrow { color: var(--story-muted); }
.story-page .scene-lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }
.story-page .scene-more { color: var(--story-muted); font-style: italic; }
.story-page .scene-fine { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--story-muted); }
.story-page .scene-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-3); }
.story-page .facts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.story-page .facts li {
  padding: 0.35rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--story-ink) 38%, transparent);
  border-radius: 999px;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--story-paper) 70%, transparent);
}
.story-page .facts li:nth-child(1) { --i: 0; }
.story-page .facts li:nth-child(2) { --i: 1; }
.story-page .facts li:nth-child(3) { --i: 2; }
.story-page .scroll-hint, .story-page .story-rail { display: none; }

.story-page .button { background: var(--story-ink); border-color: var(--story-ink); color: var(--story-paper); }
.story-page .button:hover { background: transparent; color: var(--story-ink); }
.story-page .text-button { color: var(--story-ink); }

/* ---------- the scrolling version ---------- */

.story.is-scrolly {
  --len: 135svh;
  height: calc(var(--n, 9) * var(--len) + 100svh);
}
.story.is-scrolly .story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--story-paper);
}
.story.is-scrolly .scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: var(--vis, 1);
  /* progress of the text: in over the first part of the scene, out before the next scene takes over */
  --tin: clamp(0, calc((var(--u, 0) - 0.06) * 7), 1);
  --tout: clamp(0, calc((0.9 - var(--u, 0)) * 7), 1);
  --ta: min(var(--tin), var(--tout));
}
.story.is-scrolly .scene.is-on { visibility: visible; }
.story.is-scrolly .scene-0 { --ta: clamp(0, calc((0.42 - var(--u, 0)) * 4), 1); }
.story.is-scrolly .scene-8 { --tout: 1; }

/* the plate: the whole painting, scaled like "cover" with its focal point kept in view */
.story.is-scrolly .scene-art {
  --art-w: max(100%, 160svh);
  position: absolute;
  width: var(--art-w);
  max-height: none;
  aspect-ratio: 2400 / 1500;
  left: clamp(calc(100% - var(--art-w)), calc(50% - var(--fx, 0.5) * var(--art-w)), 0px);
  top: 50%;
  transform: translateY(-50%);
  overflow: visible;
}
.story.is-scrolly .layer { will-change: transform, opacity; }

.story.is-scrolly .scene-text {
  position: absolute;
  z-index: 5;
  left: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  top: var(--ty, 50%);
  width: min(33rem, 42%);
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
}
.story.is-scrolly .scene-text::before { content: none; }
.story.is-scrolly .scene-text { text-shadow: 0 0 14px color-mix(in srgb, var(--story-paper) 92%, transparent), 0 0 4px color-mix(in srgb, var(--story-paper) 80%, transparent); }
.story.is-scrolly .scene-text .facts li, .story.is-scrolly .scene-text .button { text-shadow: none; }
.story.is-scrolly .scene-text > * {
  opacity: var(--ta, 1);
  transform: translateY(calc((1 - var(--ta, 1)) * 26px));
}
.story.is-scrolly .scene-text .scene-more {
  opacity: min(var(--tout, 1), clamp(0, calc((var(--u, 0) - 0.42) * 9), 1));
  transform: translateY(calc((1 - clamp(0, calc((var(--u, 0) - 0.42) * 9), 1)) * 18px));
}
.story.is-scrolly .scene-text .facts { opacity: 1; transform: none; }
.story.is-scrolly .scene-text .facts li {
  --k: clamp(0, calc((var(--u, 0) - 0.5 - var(--i, 0) * 0.08) * 11), 1);
  opacity: min(var(--tout, 1), var(--k));
  transform: translateY(calc((1 - var(--k)) * 14px)) scale(calc(0.94 + var(--k) * 0.06));
}
.story.is-scrolly .scene-text-hero { --ty: 50%; }
.story.is-scrolly .scene-1 { --ty: 36%; }
.story.is-scrolly .scene-2 { --ty: 33%; }
.story.is-scrolly .scene-4 { --ty: 46%; }
.story.is-scrolly .scene-5 { --ty: 36%; }
.story.is-scrolly .scene-6 { --ty: 31%; }
.story.is-scrolly .scene-7 { --ty: 60%; }
.story.is-scrolly .scene-8 { --ty: 40%; }
.story.is-scrolly .scene-text-end .scene-actions,
.story.is-scrolly .scene-text-end .scene-fine { opacity: clamp(0, calc((var(--u, 0) - 0.3) * 6), 1); }

.story.is-scrolly .scroll-hint {
  display: flex;
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: var(--space-3);
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--story-muted);
  opacity: clamp(0, calc(1 - var(--u, 0) * 6), 1);
  translate: -50% 0;
}
.story.is-scrolly .scroll-hint-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--story-ink));
  animation: story-hint 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes story-hint { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* the chapter rail on the right edge */
.story.is-scrolly .story-rail {
  display: block;
  position: fixed;
  z-index: 60;
  right: var(--space-2);
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.story.is-scrolly .story-rail.is-visible { opacity: 1; pointer-events: auto; }
.story-rail ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.story-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-height: 1.6rem;
  min-width: 1.6rem;
  color: var(--story-ink);
}
.story-rail a::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--story-ink);
  background: transparent;
  transition: transform 200ms ease, background 200ms ease;
}
.story-rail a[aria-current="step"]::after { background: var(--story-accent); border-color: var(--story-accent); transform: scale(1.5); }
.story-rail .rail-label {
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--story-paper);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  translate: 6px 0;
  transition: opacity 160ms ease, translate 160ms ease;
  pointer-events: none;
}
.story-rail a:hover .rail-label, .story-rail a:focus-visible .rail-label, .story-rail a[aria-current="step"] .rail-label { opacity: 1; translate: 0 0; }
.story-rail a[aria-current="step"] .rail-label { opacity: 0.0; }
.story-rail a:hover .rail-label, .story-rail a:focus-visible .rail-label { opacity: 1; }

.story-plain { padding: var(--space-6) 0; }

/* ---------- phones and tall windows: the text sits below the picture ---------- */

@media (max-aspect-ratio: 1 / 1) {
  .story.is-scrolly .scene-art { top: 31%; }
  .story.is-scrolly .scene-0 .l-bean { scale: 0.42; }
  .story.is-scrolly .scene-text {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    padding: 4.5rem var(--gutter) var(--space-3);
    transform: none;
    text-shadow: none;
  }
  .story.is-scrolly .scene-text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--story-paper) 3.6rem);
    opacity: var(--ta, 1);
  }
  .story.is-scrolly .scene-text h1, .story.is-scrolly .scene-text h2 { font-size: clamp(1.7rem, 1.2rem + 3vw, 2.4rem); }
  .story.is-scrolly .scene-text h1 { font-size: clamp(2.1rem, 1.2rem + 5vw, 3rem); }
  .story.is-scrolly .scene-text p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.6rem; }
  .story.is-scrolly .scene-text .eyebrow { margin-bottom: 0.4rem; }
  .story.is-scrolly .scene-text-hero { top: auto; }
  .story.is-scrolly .scene-6 .l-ship { scale: 0.62; }
  .story.is-scrolly .story-rail { right: 0.35rem; }
  .story-rail .rail-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-page .layer, .story-page .scene-text, .story-page .scene-text > * { transition: none; animation: none; }
}

/* ---------- paper tooth over the whole stage ---------- */
.story.is-scrolly .story-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: url("../assets/story/grain.webp") repeat;
  background-size: 320px 320px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}

/* ---------- the movement of every scene, from --u (0 start .. 1 end) ---------- */

.story.is-scrolly .layer.l-bg { scale: calc(1.03 + var(--u, 0) * 0.04); }

/* 0 the bean: it floats, then shrinks and drops towards the soil of the next scene */
.story.is-scrolly .scene-0 .l-bean {
  transform: translate3d(0, calc(var(--u, 0) * 36.7%), 0) rotate(calc(var(--u, 0) * 12deg)) scale(calc(1 - var(--u, 0) * 0.853));
  opacity: clamp(0, calc((1.04 - var(--u, 0)) * 10), 1);
  animation: story-float 7s ease-in-out infinite;
}
.story.is-scrolly .scene-0 .l-bg { transform: translateY(calc(var(--u, 0) * -2%)); }
@keyframes story-float { 0%, 100% { translate: 0 -1.2%; } 50% { translate: 0 1.4%; } }

/* 1 the seed: the shoot grows from the soil */
.story.is-scrolly .scene-1 .l-sprout {
  transform-origin: 50% 100%;
  transform: scale(clamp(0.03, calc((var(--u, 0) - 0.06) * 1.25), 1));
  rotate: calc(sin(var(--u, 0) * 14) * 1.4deg);
}
.story.is-scrolly .scene-1 .l-soil { transform: translateY(calc(var(--u, 0) * -2%)); }

/* 2 the mountain: the sun rises, clouds drift, blossoms turn into cherries */
.story.is-scrolly .scene-2 .l-sun { transform: translateY(calc((0.9 - var(--u, 0)) * 26%)) scale(calc(0.9 + var(--u, 0) * 0.12)); }
.story.is-scrolly .scene-2 .l-cloud { transform: translateX(calc(var(--u, 0) * -9%)); }
.story.is-scrolly .scene-2 .l-hills { transform: translateY(calc(var(--u, 0) * -2%)); }
.story.is-scrolly .scene-2 .l-trees, .story.is-scrolly .scene-2 .l-bloom, .story.is-scrolly .scene-2 .l-ripe { transform: translateY(calc(var(--u, 0) * -4%)); }
.story.is-scrolly .scene-2 .l-bloom { opacity: clamp(0, calc(1.3 - var(--u, 0) * 3.2), 1); }
.story.is-scrolly .scene-2 .l-ripe { opacity: clamp(0, calc((var(--u, 0) - 0.4) * 3.4), 1); }

/* 3 the cherries: green, then gold, then red */
.story.is-scrolly .scene-3 .l-branch, .story.is-scrolly .scene-3 .l-green, .story.is-scrolly .scene-3 .l-gold, .story.is-scrolly .scene-3 .l-ripe {
  transform-origin: 70% 60%;
  transform: translate3d(calc(var(--u, 0) * -3%), calc(var(--u, 0) * -3%), 0) scale(calc(1 + var(--u, 0) * 0.08));
}
.story.is-scrolly .scene-3 .l-green { opacity: clamp(0, calc((0.52 - var(--u, 0)) * 5), 1); }
.story.is-scrolly .scene-3 .l-gold { opacity: min(clamp(0, calc((var(--u, 0) - 0.22) * 5), 1), clamp(0, calc((0.8 - var(--u, 0)) * 5), 1)); }
.story.is-scrolly .scene-3 .l-ripe { opacity: clamp(0, calc((var(--u, 0) - 0.55) * 4), 1); }

/* 4 the harvest: the basket rises into view, cherries drop in */
.story.is-scrolly .scene-4 .l-bush { transform: translateY(calc(var(--u, 0) * -2%)); }
.story.is-scrolly .scene-4 .l-basket { transform: translateY(calc((1 - clamp(0, calc(var(--u, 0) * 2.6), 1)) * 45%)); }
.story.is-scrolly .scene-4 .l-drops {
  transform: translateY(calc(var(--u, 0) * 150%)) rotate(calc(var(--u, 0) * 25deg));
  opacity: min(clamp(0, calc((var(--u, 0) - 0.08) * 6), 1), clamp(0, calc((0.82 - var(--u, 0)) * 7), 1));
}

/* 5 the drying: red cherries become pale beans */
.story.is-scrolly .scene-5 .l-beds, .story.is-scrolly .scene-5 .l-wet, .story.is-scrolly .scene-5 .l-dry { transform: translateY(calc(var(--u, 0) * -2%)); }
.story.is-scrolly .scene-5 .l-wet { opacity: clamp(0, calc(1.4 - var(--u, 0) * 2.6), 1); }
.story.is-scrolly .scene-5 .l-dry { opacity: clamp(0, calc((var(--u, 0) - 0.34) * 2.8), 1); }

/* 6 the journey: the ship sails across, the waves rock, sacks wait on the pier */
.story.is-scrolly .scene-6 .l-ship { transform-origin: 100% 70%; scale: 0.84; transform: translateX(calc((0.55 - var(--u, 0)) * 95%)); animation: story-bob 5s ease-in-out infinite; }
.story.is-scrolly .scene-6 .l-waves { transform: translateX(calc(var(--u, 0) * -3%)); animation: story-bob 6.5s ease-in-out infinite reverse; }
.story.is-scrolly .scene-6 .l-sacks { transform: translateY(calc((1 - clamp(0, calc(var(--u, 0) * 3), 1)) * 22%)); }
@keyframes story-bob { 0%, 100% { translate: 0 -0.6%; } 50% { translate: 0 0.8%; } }

/* 7 the roasting: the drum turns, the flame flickers, the roast degrees appear one by one */
.story.is-scrolly .scene-7 .l-machine { transform: translateY(calc(var(--u, 0) * -1.5%)); }
.story.is-scrolly .scene-7 .l-drum { rotate: calc(var(--u, 0) * 540deg); }
.story.is-scrolly .scene-7 .l-glow { opacity: calc(0.45 + var(--u, 0) * 0.55); animation: story-flicker 1.6s ease-in-out infinite; }
.story.is-scrolly .scene-7 .l-roast { clip-path: inset(0 calc((1 - clamp(0, calc((var(--u, 0) - 0.3) * 2.2), 1)) * 100%) 0 0); }
@keyframes story-flicker { 0%, 100% { scale: 1; } 40% { scale: 1.03 1.06; } 70% { scale: 0.99 0.97; } }

/* 8 the cup: steam rises */
.story.is-scrolly .scene-8 .l-cup { transform: scale(calc(0.95 + var(--u, 0) * 0.05)); transform-origin: 50% 70%; }
.story.is-scrolly .scene-8 .l-steam { opacity: clamp(0, calc(var(--u, 0) * 4), 1); transform: translateY(calc(var(--u, 0) * -5%)); animation: story-steam 5s ease-in-out infinite; }
@keyframes story-steam { 0% { translate: 0 3%; } 50% { translate: 1% -2%; } 100% { translate: 0 3%; } }

@media (prefers-reduced-motion: reduce) {
  .story.is-scrolly .layer { animation: none !important; }
}