/* The Cellar Book — unified scroll-driven "brew journey" (v2).
   One winding liquid stream runs down the whole section, behind the copy and
   through each apparatus. The stream itself is built at runtime by scrolly.js
   (it measures the .flow-in/.flow-out anchors and draws bezier segments into
   .flow-svg), then fills with scroll. Loaded only from index.html.
   Palette + fonts inherited from styles.css. NB: the hero already uses
   `.journey` in styles.css, so this section is `.process`. */

.process { position: relative; padding: 24px 0 56px; overflow: hidden; }

/* Full-bleed runtime-drawn stream, behind everything in the section. */
.flow-svg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.process .wrap { position: relative; z-index: 1; }

.process-head { text-align: center; max-width: 640px; margin: 0 auto 6px; }
.process-head .eyebrow { text-align: center; }
.process-head h2 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(28px, 4.4vw, 42px); color: #F5ECDD; line-height: 1.12;
}
.process-head p { color: var(--soft); font-size: 17px; margin-top: 14px; }

/* ── Stages: apparatus one side, copy the other, alternating ── */
.stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  align-items: center; min-height: 66vh;
}
.stage.rev .stage-art { order: 2; }

.stage-art { display: flex; justify-content: center; }
.art { position: relative; width: min(360px, 86%); }
.art svg { width: 100%; height: auto; overflow: visible; }

/* Invisible anchor points scrolly.js measures to route the stream.
   Coordinates are per-scene, as % of the (square) artwork box. */
.flow-in, .flow-out { position: absolute; width: 0; height: 0; }
/* Streams pour INTO each vessel's mouth and leave FROM its tap; the last
   pour ends at the bottle (the bottle then moves to the shelf itself). */
.stage[data-scene="press"]   .flow-out { left: 50%; top: 80%; }     /* trough spout */
.stage[data-scene="ferment"] .flow-in  { left: 44.5%; top: 32%; }   /* carboy neck */
.stage[data-scene="ferment"] .flow-out { left: 62.5%; top: 75%; }   /* spigot tip */
.stage[data-scene="still"]   .flow-in  { left: 38%; top: 43%; }     /* pot mouth */
.stage[data-scene="still"]   .flow-out { left: 57.5%; top: 78%; }   /* condenser tap */
.stage[data-scene="cask"]    .flow-in  { left: 50%; top: 34%; }     /* top of barrel */
.stage[data-scene="cask"]    .flow-out { left: 50%; top: 70%; }     /* barrel tap */
.stage[data-scene="bottle"]  .flow-in  { left: 50%; top: 22%; }     /* filler nozzle */

/* Bottle-travel anchors: where the filled bottle lifts off the bottling
   bench and where it lands on the shelf (scrolly.js rides between them). */
.bottle-from, .bottle-to { position: absolute; width: 0; height: 0; }
.stage[data-scene="bottle"] .bottle-from { left: 71.5%; top: 59%; }
.stage[data-scene="shelf"]  .bottle-to   { left: 70.7%; top: 56.4%; }

/* ── Copy cards: translucent so the stream shows through behind them ── */
.step-card {
  /* translucent but NO backdrop-filter — blurring the animating stream
     behind six cards was a constant repaint cost (jank). */
  background: rgba(26, 19, 14, .82);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 26px 24px;
  opacity: .45; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease, border-color .5s ease;
}
.stage.is-active .step-card {
  opacity: 1; transform: none; border-color: #57422f;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .4);
}
.step-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--amber); margin-bottom: 12px;
}
.step-kicker .dot {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  border: 1px solid var(--amber); color: var(--amber2);
  font-family: 'Fraunces', serif; letter-spacing: 0; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.step-card h3 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 24px; color: #F3E9DA; line-height: 1.15;
}
.step-card > p { color: var(--soft); font-size: 15px; margin-top: 10px; }

/* Little "app diagram" mock inside each step. */
.app-chip {
  margin-top: 18px;
  background: linear-gradient(rgba(24, 16, 8, .9), rgba(20, 13, 6, .9));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.app-chip .chip-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
}
.app-chip .chip-head b { color: var(--amber2); font-weight: 500; font-family: 'Fraunces', serif; }
.app-chip .chip-head .pill {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.metric-row { display: flex; gap: 10px; flex-wrap: wrap; }
.metric {
  flex: 1 1 0; min-width: 84px;
  background: rgba(29, 20, 12, .85); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px;
}
.metric .k { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: #8c7c6c; }
.metric .v { font-family: 'Fraunces', serif; font-size: 19px; color: #F3E9DA; margin-top: 3px; line-height: 1; }
.metric .v small { font-family: 'Sora', sans-serif; font-size: 11px; color: var(--muted); }

/* Thin progress bar used for a couple of chips (attenuation / yield). */
.bar { margin-top: 12px; height: 7px; border-radius: 999px; background: #241a10; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C57A3B, #E8B77F); }

/* ── Liquid stream texture (paths drawn by scrolly.js into .flow-svg) ──
   Two dash layers slide downstream at different speeds so the liquid runs
   even when scrolling stops. -68 is a common multiple of both dash patterns
   (3+31=34, 2+15=17) so the loops are seamless. */
/* Texture is grouped per segment (.segflow) and only runs once that
   segment is full — empty pipe ahead of the pour costs nothing. */
.segflow .flowline {
  opacity: 0; transition: opacity .5s;
  animation: streamFlow 1.15s linear infinite;
  animation-play-state: paused;
}
.segflow .flowline.slow { animation-duration: 2.1s; }
.segflow.on .flowline { opacity: 1; animation-play-state: running; }
@keyframes streamFlow { to { stroke-dashoffset: -68; } }

/* Splash ripples where the stream enters a vessel (rings expand + fade). */
.flow-svg .ripple circle { opacity: 0; transform-origin: 0 0; }
.flow-svg .ripple.on circle { animation: rippleOut 1.7s ease-out infinite; }
.flow-svg .ripple.on circle:nth-of-type(2) { animation-delay: .85s; }
@keyframes rippleOut {
  0%   { opacity: .8; transform: scale(.15); }
  100% { opacity: 0;  transform: scale(1.25); }
}

/* ── Stage theatrics — each scene acts out its step when active ── */

/* 01 · press: the ram descends, apples squash, juice gushes in sync.
   All three share one 3.4s cycle so squeeze → squash → gush line up. */
.cheese { transform-box: fill-box; transform-origin: 50% 100%; }
.gush { opacity: .15; }
.stage.is-active .ram    { animation: ramPress 3.4s ease-in-out infinite; }
.stage.is-active .cheese { animation: cheeseSquash 3.4s ease-in-out infinite; }
.stage.is-active .gush   { animation: gushFlow 3.4s ease-in-out infinite; }
@keyframes ramPress     { 0%, 12% { transform: translateY(0); } 40%, 62% { transform: translateY(22px); } 88%, 100% { transform: translateY(0); } }
@keyframes cheeseSquash { 0%, 12% { transform: scaleY(1); }    40%, 62% { transform: scaleY(.8); }      88%, 100% { transform: scaleY(1); } }
@keyframes gushFlow     { 0%, 14% { opacity: .15; } 42%, 66% { opacity: 1; } 92%, 100% { opacity: .15; } }

/* 02 · ferment: bubbles glug through the airlock water, the cap pops,
   and CO₂ blips escape above — all on one shared 2.4s cycle. */
.alk { opacity: 0; }
.stage.is-active .alk { animation: airBlip 2.4s ease-in infinite; }
@keyframes airBlip {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translateY(-28px) scale(1.15); opacity: 0; }
}
.wbub { opacity: 0; }
.stage.is-active .wbub { animation: bubbleSm 2.4s ease-in infinite; }
@keyframes bubbleSm {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translateY(-14px) scale(1.05); opacity: 0; }
}
.stage.is-active .glug { animation: glugBob 2.4s ease-in-out infinite; }
@keyframes glugBob { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(-4px); } }

/* 03 · still: flames flicker under the pot, heat shimmers beside it. */
.flame { transform-box: fill-box; transform-origin: 50% 100%; }
.stage.is-active .flame { animation: flameFlick .55s ease-in-out infinite alternate; }
@keyframes flameFlick { from { transform: scaleY(.82); } to { transform: scaleY(1.18); } }
.heat { opacity: 0; }
.stage.is-active .heat { animation: heatRise 2.8s ease-out infinite; }
@keyframes heatRise { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .5; } 100% { transform: translateY(-26px); opacity: 0; } }

/* 04 · cask: 12s day/night — sun & moon orbit behind the barrel; the
   night tint and stars fade in exactly while the moon is up (30–70%). */
.orbit { transform-origin: 0 0; }
.stage.is-active .orbit    { animation: orbitSpin 12s linear infinite; }
.stage.is-active .skyNight { animation: skyCycle 12s linear infinite; }
.stage.is-active .star     { animation: starCycle 12s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes skyCycle  { 0%, 28% { opacity: 0; } 36%, 64% { opacity: .55; } 72%, 100% { opacity: 0; } }
@keyframes starCycle { 0%, 28% { opacity: 0; } 36%, 64% { opacity: .9; }  72%, 100% { opacity: 0; } }

/* 05 · bottle: the fill level is scroll-driven — scrolly.js slides
   .btl-liquid via the SVG transform attribute as the journey crosses the
   bottling reach. No CSS transform here: it would override the attribute. */

/* 06 · shelf: the travelling bottle (overlay SVG, scroll-driven) rides
   from the bottling bench and lands here. Handoffs are INSTANT swaps at
   scroll positions — no timed animations — so lift-off (.bottle-gone
   hides the bench bottle) and landing (.arrive shows the shelf bottle)
   stay seamless in both scroll directions. */
.arrive { opacity: 0; }
.stage.is-active .arrive { opacity: 1; }
.stage.bottle-gone .depart { opacity: 0; }

/* Perf: freeze every scene animation while its stage is off-screen
   (scrolly.js toggles .inview via IntersectionObserver). */
.process .stage:not(.inview) svg * { animation-play-state: paused !important; }

/* ── Scene "life" animations — a stage wakes when the liquid reaches it ── */
.stage.is-active .bob    { animation: bob 3.2s ease-in-out infinite; }
.stage.is-active .bubble { animation: bubbleUp 2.6s ease-in infinite; }
.stage.is-active .steam  { animation: steamRise 3.4s ease-in-out infinite; }
.stage.is-active .drip   { animation: drip 2.2s ease-in infinite; }
.stage.is-active .pour   { animation: pourPulse 2.4s ease-in-out infinite; }
.stage.is-active .glow   { animation: glowPulse 3s ease-in-out infinite; }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bubbleUp {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}
@keyframes steamRise {
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  30%  { opacity: .5; }
  100% { transform: translateY(-30px) scale(1.3); opacity: 0; }
}
@keyframes drip {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { transform: translateY(34px); opacity: 1; }
  100% { transform: translateY(38px); opacity: 0; }
}
@keyframes pourPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes glowPulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

/* ── Mobile: single column, apparatus above its card, stream runs on ── */
@media (max-width: 820px) {
  .stage { grid-template-columns: 1fr; gap: 20px; min-height: auto; padding: 34px 0; }
  .stage.rev .stage-art { order: 0; }
  .art { width: min(260px, 72%); }
  .step-card { opacity: 1; transform: none; } /* touch scroll: keep readable */
}

/* ── Reduced motion: stream fully drawn (scrolly.js), everything still ── */
@media (prefers-reduced-motion: reduce) {
  .step-card { opacity: 1; transform: none; transition: none; }
  .stage.is-active .bob, .stage.is-active .bubble, .stage.is-active .steam,
  .stage.is-active .drip, .stage.is-active .pour, .stage.is-active .glow,
  .flow-svg .flowline, .flow-svg .ripple.on circle,
  .stage.is-active .ram, .stage.is-active .cheese, .stage.is-active .gush,
  .stage.is-active .alk, .stage.is-active .flame, .stage.is-active .heat,
  .stage.is-active .orbit, .stage.is-active .skyNight, .stage.is-active .star,
  .stage.is-active .wbub, .stage.is-active .glug {
    animation: none;
  }
  /* static resting state: juice flowing (fill/arrival are JS scroll-driven
     and set to their finished states in the reduced branch) */
  .gush { opacity: 1; }
}