/* THOMAS / 01 "Winter, in a different shade." — scenes 1–7 (fictional product).
   Composition lives here. script.js only interpolates the can between keyframes
   (an opening pose and the .slot--k2…k5 boxes) and sets the progress variables. */

/* ---------- Fonts (self-hosted, OFL-1.1, see references/sources.md) ---------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"),
       url("assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations"),
       url("assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --glacier: #f4f8fa;          /* glacial white: base */
  --glacier-cool: #e4ebef;     /* floor / depth */
  --ice: #ffffff;
  --lilac-pale: #e6deef;       /* pale lilac light */
  --lilac-ink: #5b3d72;        /* text in lilac tone */
  --silver: #c7cdd3;           /* hairlines */
  --silver-ink: #5d6870;       /* small UI text */
  --plum: #6a3a66;             /* plum accent: lighter than the can, so it stands out */
  --plum-deep: #2c1529;        /* plum atmosphere, shadow side */
  --plum-text: #ece0ea;        /* small text on plum */
  --ink: #1e2a33;              /* primary text */
  --ink-soft: #3a4751;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: max(1.5rem, env(safe-area-inset-left, 0px));

  /* Upper limit for the can's on-screen height, set by script.js from the
     device pixel ratio so the image is never enlarged beyond 1.5× its pixels. */
  --can-cap: 9999px;

  /* Progress variables, driven by script.js. Defaults = the static fallback. */
  --cue: 0;  --land: 1;  --glow: 1;
  --f1: 1;  --amp: 1;  --f2: 1;  --rule: 1;  --s2out: 0;
  --lilac: 0;  --plum-in: 0;  --lift: 0;  --recolour: 0;
  --w1: 0;  --w2: 0;  --wout: 0;
  --eyebrow: 1;  --n1: 1;  --n2: 1;  --n3: 1;  --foot: 1;  --tout: 0;
  --sel: 1;  --rise: 1;  --photo: 0;

  /* ----- Composition: phone portrait ----- */
  --headline-size: clamp(2.35rem, 11vw, 3.6rem);
  --flavour-size: clamp(1.55rem, 7.4vw, 2.4rem);
  --flavour-gap: clamp(0.9rem, 2.4svh, 1.4rem);
  --rule-w: min(14rem, 60vw);
  --bigword-size: clamp(3.1rem, 16.5vw, 5.6rem);
  --note-size: clamp(1.55rem, 6.8vw, 2.2rem);

  /* Keyframe slots: centre x, height, distance of the can base from the bottom. */
  --k2-x: 50%;  --k2-h: 54svh;  --k2-b: calc(var(--safe-bottom) + 6svh);
  --k3-x: 50%;  --k3-h: 44svh;  --k3-b: calc(var(--safe-bottom) + 22svh);
  --k4-x: 72%;  --k4-h: 36svh;  --k4-b: 38svh;
  --k5-x: 50%;  --k5-h: 40svh;  --k5-b: 47svh;
}

/* Short phones: keep the taste-scene can clear of the notes. */
@media (orientation: portrait) and (max-height: 720px) {
  :root { --k4-h: 31svh; --k4-b: 46svh; }
}

@media (orientation: landscape), (min-width: 821px) {
  .copy .headline__line { white-space: nowrap; }
  :root {
    --gutter: max(8vw, 1.5rem);
    --headline-size: clamp(3.1rem, min(6.4vw, 12vh), 7.75rem);
    --flavour-size: clamp(1.6rem, min(3.4vw, 6vh), 3.6rem);
    --flavour-gap: clamp(0.9rem, 2.6vh, 1.75rem);
    --rule-w: min(20rem, 26vw);
    --bigword-size: min(6.8vw, 14vh);
    --note-size: clamp(1.6rem, min(3.9vw, 7vh), 3.9rem);

    --k2-x: 67%;  --k2-h: 84vh;  --k2-b: 5vh;
    --k3-x: 50%;  --k3-h: 78vh;  --k3-b: 9vh;
    --k4-x: 29%;  --k4-h: 76vh;  --k4-b: 10vh;
    --k5-x: 50%;  --k5-h: 68vh;  --k5-b: 17vh;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--glacier);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--glacier);
  font-family: var(--font-ui);
  overflow-x: clip;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   STORY (scenes 1–5)
   With JavaScript: every child of .story sits in the same grid cell and is
   sticky, so the stage and all scene layers stay on screen together while
   the tall section scrolls past. Without JavaScript: normal reading order.
   ============================================================ */

.story {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  overflow-x: clip;
}

.stage,
.scene--opening {
  grid-area: 1 / 1;
  position: relative;
  height: 100vh;
  height: 100svh;
}

.js .story {
  height: calc((var(--story-screens, 6.4) + 1) * 100svh);
}

.js .story > * {
  grid-area: 1 / 1;
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.stage {
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.scene {
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

/* ---------- Light and atmosphere ---------- */

.backdrop,
.bg {
  position: absolute;
  inset: 0;
}

.backdrop {
  z-index: 0;
  background: var(--glacier);
  isolation: isolate;
}

/* Cool key light from the upper left. */
.bg--light {
  z-index: 0;
  background:
    radial-gradient(120% 80% at 12% -10%, #ffffff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(90% 70% at 100% 0%, rgba(199, 205, 211, 0.28), rgba(199, 205, 211, 0) 60%);
}

/* Scene 3, beat A: pale lilac light floods the frame. */
.bg--lilac {
  z-index: 1;
  background:
    radial-gradient(85% 65% at 50% 42%, #f2edf7 0%, rgba(242, 237, 247, 0) 70%),
    linear-gradient(to bottom, #ece5f3 0%, var(--lilac-pale) 55%, #d4c7e3 100%);
  opacity: calc(var(--lilac) * (1 - var(--lift)));
}

/* A soft, cooler floor plane for the light scenes. */
.bg--floor {
  z-index: 2;
  top: auto;
  height: 34%;
  background: linear-gradient(to bottom, rgba(228, 235, 239, 0) 0%, rgba(228, 235, 239, 0.9) 70%, rgba(221, 229, 234, 0.95) 100%);
  opacity: calc(1 - 0.75 * var(--lilac) * (1 - var(--lift)));
}

/* Scene 3, beat B: a deep plum wash rises from below and takes the frame.
   Scene 5: it lifts away upwards. */
.bg--plum {
  z-index: 3;
  inset: -22% 0;
  background:
    radial-gradient(70% 45% at 50% 58%, rgba(118, 66, 126, 0.55), rgba(118, 66, 126, 0) 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 248, 0.32) 0.35%, var(--plum) 0.9%, #4f2a4d 50%, var(--plum-deep) 99.1%, rgba(255, 244, 248, 0.32) 99.65%, rgba(255, 255, 255, 0) 100%);
  /* Arrives from below; leaves upwards. Hard, frost-lit edges, so no muddy half-tone band. */
  transform: translateY(calc((1 - var(--plum-in)) * 112% - var(--lift) * 118%));
}

/* A crisp diagonal band of winter light. */
/* Scene 4: the flavour still life (AI-generated photograph) fills the frame. */
.bg--photo {
  z-index: 3;
  background: url("assets/images/thomas-01-flavour-still-life-1536w.webp") 72% 62% / cover no-repeat;
  opacity: var(--photo);
}

/* Phones: keep the can in view and give the notes a pale base to sit on. */
/* Phones: the photograph sits in the lower 60% (can centred, no crop), and its
   pale wall continues upwards as a flat tone for the notes. Keep in step with
   PHOTO_LAYOUT in script.js, which lands the moving can on the photo's can. */
@media (orientation: portrait) and (max-width: 820px) {
  .bg--photo {
    background:
      linear-gradient(to bottom, #d9cfd9 0%, #d9cfd9 40%, rgba(217, 207, 217, 0) 50%),
      url("assets/images/thomas-01-flavour-still-life-1536w.webp") 85% 100% / auto 60% no-repeat,
      #d9cfd9;
  }
  .scene--taste .taste { grid-template-rows: auto auto auto 1fr; }
  .scene--taste .notes { align-self: start; margin-top: clamp(1rem, 3svh, 1.75rem); }
}

.bg--beam {
  z-index: 4;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.55) 47%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  opacity: calc((0.45 + 0.55 * var(--lilac) * (1 - var(--lift))) * (1 - 0.55 * var(--plum-in) * (1 - var(--lift))) * (1 - var(--photo)));
}

/* Restrained frost: fine crystalline grain plus two faint ice facets. */
.bg--frost {
  z-index: 5;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 22%) top left / 60% 55% no-repeat,
    linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 20%) bottom right / 55% 50% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: calc((0.25 + 0.5 * var(--plum-in) * (1 - var(--lift))) * (1 - 0.85 * var(--photo)));
}

/* ---------- Keyframe slots (invisible) ---------- */

.slot,
html:not(.js) .can-rig {
  position: absolute;
  left: var(--x);
  bottom: var(--b);
  height: min(var(--h), var(--can-cap));
  width: auto;
  aspect-ratio: 598 / 1522;
  transform: translateX(-50%);
}

.slot { visibility: hidden; pointer-events: none; }
.slot--k2, html:not(.js) .can-rig { --x: var(--k2-x); --h: var(--k2-h); --b: var(--k2-b); }
.slot--k3 { --x: var(--k3-x); --h: var(--k3-h); --b: var(--k3-b); }
.slot--k4 { --x: var(--k4-x); --h: var(--k4-h); --b: var(--k4-b); }
.slot--k5 { --x: var(--k5-x); --h: var(--k5-h); --b: var(--k5-b); }

/* ---------- The can (story, closing) ---------- */

.can-rig,
.closing__can {
  isolation: isolate;
}

.can-rig { z-index: 1; }

.js .can-rig {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  /* width, height and transform are set by script.js */
}

.can-img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.45s ease;
}

.can-img {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Glow behind the can, and a two-layer grounding shadow. Both travel with it. */
.can-rig::before,
.closing__can::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 380%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 226, 242, 0.9), rgba(222, 210, 236, 0.4) 45%, rgba(222, 210, 236, 0) 100%);
  /* On plum, a soft lilac halo keeps the dark can separate from the wash. */
  opacity: calc(var(--glow) * (1 - 0.45 * var(--plum-in) * (1 - var(--lift))));
}

.can-rig::after,
.closing__can::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0.4%;
  width: 150%;
  height: 7%;
  transform: translate(-50%, 50%) scaleX(calc(0.7 + 0.3 * var(--land)));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 42, 51, 0.38), rgba(30, 42, 51, 0.12) 55%, rgba(30, 42, 51, 0) 100%);
  filter: blur(2px);
  opacity: var(--land);
}

/* ---------- Scenes 1–2: opening copy ---------- */

.scene--opening { z-index: 2; }

.copy {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--safe-top) + 7svh);
  opacity: calc(1 - var(--s2out));
  translate: 0 calc(var(--s2out) * -2.5rem);
}

.headline,
.closing__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 430;
  /* A sturdier optical size than the hairline display cut. */
  font-variation-settings: "opsz" 48;
  font-size: var(--headline-size);
  line-height: 1;
  letter-spacing: -0.015em;
  word-spacing: 0.04em;
  color: var(--ink);
}

.headline:focus { outline: none; }
.headline:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.headline__line { display: block; }

.headline em,
.closing__headline em {
  font-style: italic;
  font-weight: 400;
}

.flavour {
  margin: var(--flavour-gap) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 440;
  font-variation-settings: "opsz" 36;
  font-size: var(--flavour-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.flavour__word,
.flavour__amp { display: inline-block; }

.flavour__word--first {
  color: var(--lilac-ink);
  opacity: var(--f1);
  transform: translateY(calc((1 - var(--f1)) * 0.45em));
}

.flavour__amp {
  margin: 0 0.06em;
  font-weight: 300;
  color: var(--silver-ink);
  opacity: var(--amp);
  transform: translateY(calc((1 - var(--amp)) * 0.45em));
}

.flavour__word--second {
  color: var(--plum);
  opacity: var(--f2);
  transform: translateY(calc((1 - var(--f2)) * 0.45em));
}

.flavour__rule {
  display: block;
  width: var(--rule-w);
  height: 1px;
  margin-top: calc(var(--flavour-gap) * 0.7);
  background: linear-gradient(to right, var(--silver), var(--lilac-ink) 45%, var(--plum));
  transform-origin: 0 50%;
  transform: scaleX(var(--rule));
}

.cue {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  bottom: calc(var(--safe-bottom) + 1.25rem);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-ink);
  opacity: var(--cue);
}

.cue__line {
  position: relative;
  width: var(--cue-line, 1.75rem);
  height: 1px;
  overflow: hidden;
  background: var(--silver);
}

.cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--ink);
  animation: cue-sweep 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cue-sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(260%); }
}

/* ---------- Scene 3: flavour contrast ---------- */

.scene--flavour { z-index: 2; }

.bigword {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "opsz" 72;
  font-size: var(--bigword-size);
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.bigword--first {
  left: var(--gutter);
  top: calc(var(--safe-top) + 8svh);
  color: color-mix(in srgb, var(--lilac-ink), var(--lilac-pale) calc(var(--recolour) * 100%));
  opacity: calc(var(--w1) * (1 - var(--wout)));
  transform: translateX(calc((1 - var(--w1)) * -5vw));
}

.bigword--second {
  right: var(--gutter);
  bottom: calc(var(--safe-bottom) + 8svh);
  color: var(--glacier);
  opacity: calc(var(--w2) * (1 - var(--wout)));
  transform: translateX(calc((1 - var(--w2)) * 5vw));
}

/* ---------- Scene 4: taste profile ---------- */

.scene--taste { z-index: 2; color: var(--ink); }

.taste {
  position: absolute;
  inset: calc(var(--safe-top) + 9svh) var(--gutter) calc(var(--safe-bottom) + 5svh);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-ink);
}

.eyebrow--light {
  max-width: 55%;
  color: var(--lilac-ink);
  opacity: calc(var(--eyebrow) * (1 - var(--tout)));
}

.notes {
  align-self: end;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.9rem, 2.4svh, 1.6rem);
}

.note {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  opacity: calc(var(--n) * (1 - var(--tout)));
  transform: translateY(calc((1 - var(--n)) * 0.75rem));
}

.note--1 { --n: var(--n1); }
.note--2 { --n: var(--n2); }
.note--3 { --n: var(--n3); }

.note__index {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--lilac-ink);
}

.note__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--note-size);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.taste__foot {
  margin: clamp(1.25rem, 3svh, 2rem) 0 0;
  max-width: 34rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
  opacity: calc(var(--foot) * (1 - var(--tout)));
}

/* ---------- Scene 5: the product ---------- */

.scene--select { z-index: 2; }

.select-summary {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  opacity: var(--sel);
  translate: 0 calc((1 - var(--sel)) * 1.5rem);
}

.select-summary {
  top: 57svh;
  text-align: center;
}

.select-summary__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 430;
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.5rem, 6.4vw, 2.4rem);
  line-height: 1.1;
}

.select-summary__facts {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Desktop and landscape: scenes 3–5 ---------- */

@media (orientation: landscape), (min-width: 821px) {
  .cue { bottom: 2rem; --cue-line: 2.5rem; }

  .copy {
    top: 50%;
    right: auto;
    max-width: 48vw;
    transform: translateY(-58%);
  }

  .bigword--first { left: 5vw; top: 19vh; }
  .bigword--second { right: 5vw; bottom: 17vh; }

  .taste {
    inset: auto 50vw auto 7vw;
    top: 50%;
    transform: translateY(-50%);
    display: block;
  }

  .eyebrow--light { max-width: none; margin-bottom: clamp(1.25rem, 4vh, 2.25rem); }

  .select-summary {
    top: 50%;
    left: 7vw;
    right: auto;
    width: 30vw;
    transform: translateY(-50%);
    text-align: left;
  }

  .select-summary__name { font-size: clamp(1.75rem, min(3.4vw, 6vh), 3.4rem); }


}

/* ============================================================
   SCENE 6: the concept
   ============================================================ */

.info {
  position: relative;
  padding: clamp(4.5rem, 14vh, 8rem) var(--gutter) clamp(4rem, 12vh, 7rem);
  background: linear-gradient(to bottom, var(--glacier) 0%, #faf8fb 45%, var(--glacier) 100%);
  border-top: 1px solid rgba(199, 192, 210, 0.6);
}

.info__inner {
  max-width: 64rem;
  margin: 0 auto;
}

.concept__lede {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.concept__list {
  display: grid;
  gap: 0;
  margin: clamp(2.5rem, 7vh, 4rem) 0 0;
  border-top: 1px solid var(--silver);
}

.concept__item {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--silver);
}

.concept__item dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lilac-ink);
}

.concept__item dd {
  margin: 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.concept__photo {
  margin: clamp(2rem, 6vh, 3rem) 0 0;
}

.concept__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}

.concept__photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--silver-ink);
}

@media (min-width: 760px) and (max-width: 959px) {
  .concept__item { grid-template-columns: 14rem 1fr; gap: 2rem; padding: 1.6rem 0; }
}

/* Wide screens: text on the left, the photograph large on the right. */
@media (min-width: 960px) {
  .concept .info__inner {
    max-width: 82rem;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "head photo" "list photo";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .concept__head { grid-area: head; }
  .concept__list { grid-area: list; align-self: start; }
  .concept__photo {
    grid-area: photo;
    margin: 0;
    align-self: start;
    position: sticky;
    top: 10vh;
  }
}

/* ============================================================
   SCENE 7: closing
   ============================================================ */

.closing {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--safe-top) + 8svh) var(--gutter) calc(var(--safe-bottom) + 4svh);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  text-align: center;
}

.closing__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(75% 55% at 50% -5%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(45% 38% at 50% 62%, rgba(222, 210, 236, 0.85), rgba(222, 210, 236, 0) 72%),
    linear-gradient(to bottom, #f9fbfc 0%, #f1f5f7 62%, #e2e9ee 100%);
}

.closing__light .bg--frost { opacity: 0.35; }

.closing__facet {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(199, 205, 211, 0.18));
  opacity: 0.55;
}

.closing__facet--a {
  left: -14vmax;
  top: -10vmax;
  clip-path: polygon(0 0, 100% 18%, 62% 58%, 0 100%);
}

.closing__facet--b {
  right: -16vmax;
  bottom: -14vmax;
  clip-path: polygon(30% 0, 100% 10%, 100% 100%, 0 80%);
  opacity: 0.4;
}

.closing__headline { text-align: center; }

.closing__can {
  position: relative;
  /* Large, but always leaves room for the headline, button and note. */
  height: min(52svh, calc(100svh - 21rem), var(--can-cap));
  min-height: 12rem;
  aspect-ratio: 598 / 1522;
  margin: 3svh 0 3.5svh;
  /* Entrance (driven by --rise from script.js): rises and settles; still once landed. */
  opacity: var(--rise);
  translate: 0 calc((1 - var(--rise)) * 12vh);
  scale: calc(0.94 + 0.06 * var(--rise));
}

.closing__light { opacity: calc(0.35 + 0.65 * var(--rise)); }

.closing__headline { opacity: calc(0.4 + 0.6 * var(--rise)); }

.closing__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.explore { padding-inline: 1.75rem; }

.replay--link {
  padding: 0.35rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(30, 42, 51, 0.35);
  text-underline-offset: 0.25em;
}

.replay--link:hover { text-decoration-color: currentColor; }

.replay--link:focus-visible,
.explore:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--glacier);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.button__meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
}

.button--ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}

.button:hover { background: #2c3a45; color: var(--glacier); }
.button--ghost:hover { background: var(--ice); color: var(--ink); }

.closing__note {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--silver-ink);
}

@media (orientation: landscape), (min-width: 821px) {
  .closing { padding-top: 7vh; }
  /* One line on wide screens, so the can can stay large. */
  .closing__headline { font-size: clamp(2.6rem, min(6vw, 10.5vh), 7rem); }
  .closing__headline .headline__line { display: inline; }
  .closing__can { height: min(60vh, calc(100vh - 20vh - 15rem), var(--can-cap)); }
}

/* Phones held sideways: can on the left, words and links on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .closing {
    grid-template-columns: auto minmax(0, 26rem);
    grid-template-rows: 1fr auto 1fr;
    column-gap: 7vw;
    justify-content: center;
    padding-block: 6vh;
  }
  .closing__can { grid-column: 1; grid-row: 1 / -1; height: min(84vh, var(--can-cap)); min-height: 0; margin: 0; }
  .closing__headline { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(1.9rem, 10vh, 3rem); }
  .closing__headline .headline__line { display: block; }
  .closing__actions { grid-column: 2; grid-row: 2; margin-top: 1rem; }
  .closing__note { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0.75rem; }
}

/* ============================================================
   Static fallback (no JavaScript)
   ============================================================ */

html:not(.js) .cue,
html:not(.js) .scene--flavour,
html:not(.js) .scene--select { display: none; }

html:not(.js) .scene--taste {
  grid-area: auto;
  position: relative;
  min-height: 0;
  padding: 4rem var(--gutter);
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(118, 66, 126, 0.5), rgba(118, 66, 126, 0) 70%),
    linear-gradient(to bottom, var(--plum), var(--plum-deep));
}

html:not(.js) .taste {
  position: static;
  inset: auto;
  transform: none;
  display: block;
  max-width: 40rem;
  margin: 0 auto;
}

html:not(.js) .notes { margin: 1.5rem 0; }

/* ============================================================
   Reduced motion: stills with short crossfades
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cue__line::after { animation: none; transform: none; width: 100%; background: var(--silver-ink); }

  .js .scene *,
  .js .bg {
    transition: opacity 0.2s linear;
  }

  .can-img { transition-duration: 0.15s; }
}

/* ============================================================
   Frost particles (frost.js): opening and finale only.
   Inside the backdrop / closing light, so always behind the can and type.
   ============================================================ */

.frost-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================================
   Coming soon: THOMAS / 02 (fictional, in development)
   ============================================================ */

.next {
  --sage: #edf1e9;
  --forest: #2e4434;
  --forest-ink: #34503b;
  position: relative;
  padding: clamp(4.5rem, 14vh, 8rem) var(--gutter);
  background:
    radial-gradient(60% 70% at 30% 55%, rgba(205, 220, 190, 0.75), rgba(205, 220, 190, 0) 70%),
    linear-gradient(to bottom, var(--glacier) 0%, var(--sage) 22%, var(--sage) 78%, var(--glacier) 100%);
  overflow: hidden;
  overflow: clip;
}

.next__inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 5vh, 3rem);
  text-align: center;
}

.next__can {
  position: relative;
  margin: 0;
  height: min(56svh, 34rem);
  aspect-ratio: 598 / 1521;
  max-width: 100%;
}

.next__can img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Grounding shadow, as for the plum can. */
.next__can::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.4%;
  width: 150%;
  height: 7%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 42, 34, 0.32), rgba(30, 42, 34, 0) 100%);
  filter: blur(2px);
  z-index: -1;
}

.next__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-ink);
}

.next__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #6f8f5e;
  box-shadow: 0 0 0 0 rgba(111, 143, 94, 0.45);
}

.next__title {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-weight: 430;
  font-variation-settings: "opsz" 72;
  font-size: clamp(2.4rem, min(8vw, 4.25rem), 4.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--ink);
}

.next__flavour {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--forest-ink);
}

.next__text {
  margin: 1.1rem auto 0;
  max-width: 36ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.next__status {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--silver-ink);
}

@media (min-width: 821px) {
  .next__inner {
    grid-template-columns: auto minmax(0, 30rem);
    justify-content: center;
    align-items: center;
    column-gap: clamp(3rem, 8vw, 7rem);
    text-align: left;
  }
  .next__can { height: min(64vh, 38rem); }
  .next__text { margin-inline: 0; }
}

/* Entrance and "in the works" details: only with JavaScript and full motion. */
.js .next__can { opacity: 0; translate: 0 5vh; transition: opacity 0.9s ease, translate 1.1s cubic-bezier(0.2, 0.7, 0.1, 1); }
.js .next__copy { opacity: 0; transition: opacity 0.9s ease 0.25s; }
.js .next.is-in .next__can { opacity: 1; translate: 0 0; }
.js .next.is-in .next__copy { opacity: 1; }

/* One soft sheen passes over the can as it arrives. */
.next__can::before {
  content: "";
  position: absolute;
  inset: 3% 6%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 65%) -150% 0 / 200% 100% no-repeat;
  mix-blend-mode: soft-light;
  border-radius: 6% / 2%;
}
.js .next.is-in .next__can::before { animation: next-sheen 1.8s ease 0.6s 1 both; }
.js .next.is-in .next__dot { animation: next-pulse 2.4s ease-out infinite; }

@keyframes next-sheen { to { background-position: 150% 0; } }
@keyframes next-pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 143, 94, 0.45); }
  70%, 100% { box-shadow: 0 0 0 0.6rem rgba(111, 143, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .next__can, .js .next__copy { opacity: 1; translate: none; transition: none; }
  .js .next.is-in .next__can::before, .js .next.is-in .next__dot { animation: none; }
}