/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-white:      #FFFFFF;
  --color-white-40:   rgba(255, 255, 255, 0.4);
  --color-white-30:   rgba(255, 255, 255, 0.3);
  --color-white-20:   rgba(255, 255, 255, 0.2);
  --color-orange:     #FE4D1C;
  --color-grey-dark:  #48403E;
  --color-grey-light: #929292;
  --color-black:      #151515;

  /* Typography */
  --font-family:         'Figtree', sans-serif;
  --font-weight:         600;
  --font-weight-regular: 400;
  --font-size-h1:        32px;
  --font-size-h2:        16px;
  --font-size-ui:        14px;
  --font-size-small:     12px;
  --line-height-heading: 70%;

  /* TOC opacity states */
  --toc-opacity-active: 1;
  --toc-opacity-past:   0.6;
  --toc-opacity-future: 0.2;

  /* Spacing — 8px grid */
  --spacing-xs:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  40px;

  /* Button: cook */
  --btn-cook-bg:        var(--color-orange);
  --btn-cook-color:     var(--color-white);
  --btn-cook-px:        40px;
  --btn-cook-py-top:    14px;
  --btn-cook-py-bottom: 16px;

  /* Button: delivery */
  --btn-delivery-border: none;
  --btn-delivery-color:  var(--color-white);

  /* Button: recipe — inherits padding from parent orange button */
  --btn-recipe-px:        var(--btn-cook-px);
  --btn-recipe-py-top:    var(--btn-cook-py-top);
  --btn-recipe-py-bottom: var(--btn-cook-py-bottom);

  /* Frame */
  --frame-stroke:      2px;
  --frame-square-size: 6px;

  /* Transitions */
  --transition-blink-close: 0.2s;
  --transition-blink-open:  0.3s;
  --transition-scale:       0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-video:   0;
  --z-overlay: 10;
  --z-ui:      1000;
  --z-blink:   8000;
  --z-cursor:  10001;
  --z-loading: 10000;
}

/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--color-black);
  overflow: hidden;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  color: var(--color-white);
}

/* ─── Typography ───────────────────────────────────────────────── */
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-heading); }
h2, .h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); }
.small, small { font-size: var(--font-size-small); line-height: var(--line-height-heading); }

/* ─── Scenes ───────────────────────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
}
.scene.active { display: block; }

.video-bg {
  position: absolute;
  inset: 0;
}

.scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Scene 04 — Video TOC ───────────────────────────────────── */
.vid-toc {
  position: fixed;
  bottom: var(--spacing-xl);
  left: var(--spacing-xl);
  z-index: var(--z-overlay);
}

.vid-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  /* opacity driven by GSAP — no CSS transition here */
}

.toc-label {
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-white);
  transition: color 0.5s ease;
}

.toc-time { display: none; }

/* Hover — past and future items */
.toc-item.toc-past:hover .toc-label,
.toc-item.toc-future:hover .toc-label {
  color: var(--color-orange);
}
.toc-item.toc-future:hover {
  opacity: 1 !important;
}
.toc-item.toc-future:hover .toc-label {
  transition: none;
}

/* Placeholder shown when video missing */
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-h2);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
}
.placeholder::after { content: attr(data-label); }
/* Hide placeholder when video loaded */
.video-loaded + .placeholder,
.scene-video.loaded ~ .placeholder { display: none; }

/* ─── Scene Canvas (image sequence) ───────────────────────────── */
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Corner Frame ─────────────────────────────────────────────── */
.corner-frame {
  position: relative;
  border: var(--frame-stroke) solid currentColor;
}
.corner-frame::before,
.corner-frame::after,
.corner-frame > .corner-tl,
.corner-frame > .corner-br {
  content: '';
  position: absolute;
  width: var(--frame-square-size);
  height: var(--frame-square-size);
  background: currentColor;
}
/* We use pseudo + explicit spans for all 4 corners */
.corner-frame::before { top: -4px; left: -4px; }
.corner-frame::after  { top: -4px; right: -4px; }

/* JS adds .corner-bl and .corner-br spans */
.corner-bl {
  position: absolute;
  width: var(--frame-square-size); height: var(--frame-square-size);
  background: currentColor;
  bottom: -4px; left: -4px;
}
.corner-br {
  position: absolute;
  width: var(--frame-square-size); height: var(--frame-square-size);
  background: currentColor;
  bottom: -4px; right: -4px;
}

/* ─── Tag Label ────────────────────────────────────────────────── */
.tag-label {
  position: absolute;
  top: -2px;
  left: -2px;
  background: currentColor;
  font-size: var(--font-size-small);
  line-height: 1;
  padding: 4px var(--spacing-xs);
  color: var(--color-black);
  white-space: nowrap;
  transform: translateY(-100%);
}


/* ─── Fixed Logo ───────────────────────────────────────────────── */
.fixed-logo {
  position: fixed;
  top: var(--spacing-xl);
  left: var(--spacing-xl);
  z-index: var(--z-ui);
  display: block;
  height: 20px;
  width: auto;
}

/* ─── Sound Toggle ─────────────────────────────────────────────── */
.sound-toggle {
  position: fixed;
  top: 20px; right: var(--spacing-lg);
  background: none;
  border: none;
  z-index: var(--z-ui);
  padding: 4px;
  line-height: 0;
}
#sound-wave {
  display: block;
  transition: opacity 0.4s ease;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn-cook {
  background: var(--btn-cook-bg);
  color: var(--btn-cook-color);
  border: none;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  line-height: 1;
  padding: var(--btn-cook-py-top) var(--btn-cook-px) var(--btn-cook-py-bottom);
  white-space: nowrap;
  display: block;
  transition: transform var(--transition-scale);
}
.btn-cook:hover { transform: scale(1.06); }

.btn-delivery {
  background: transparent;
  color: var(--btn-delivery-color);
  border: var(--btn-delivery-border);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  line-height: 1;
  padding: var(--btn-cook-py-top) var(--btn-cook-px) var(--btn-cook-py-bottom);
  white-space: nowrap;
  transition: transform var(--transition-scale);
}
.btn-delivery:hover { transform: scale(1.05); border-color: transparent; }
.btn-delivery:disabled {
  color: var(--color-grey-light);
  pointer-events: none;
  opacity: 0.5;
}

.btn-recipe {
  background: var(--btn-cook-bg);
  color: var(--btn-cook-color);
  border: none;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  line-height: 1;
  padding: var(--btn-recipe-py-top) var(--btn-recipe-px) var(--btn-recipe-py-bottom);
  white-space: nowrap;
  display: block;
  transition: transform var(--transition-scale);
}
.btn-recipe:hover { transform: scale(1.06); }

/* ─── Ripple wrapper ────────────────────────────────────────────── */
/* Wraps each orange fill button. position:relative here — not on
   the button — so ::after is anchored to an element whose box
   exactly matches the button's rendered size, unaffected by any
   flex-stretch or inline layout the button itself might inherit. */
.btn-ripple-wrap {
  position: relative;
  display: inline-block;  /* shrink-wraps to button's exact dimensions */
  line-height: 0;         /* kills any descender gap below the button */
}

/* ─── Orange button ripple pulse ───────────────────────────────── */
/* Animates `inset` not `scale` — inset adds equal px on all 4 sides
   regardless of aspect ratio, so the ring stays evenly spaced around
   any button shape. scale() would produce different px gaps on each
   axis for non-square elements. */
.btn-ripple-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--frame-stroke) solid var(--color-orange);
  pointer-events: none;
  animation: ripple-pulse 1.5s ease-out infinite;
}

/* Stop ripple instantly on hover */
.btn-ripple-wrap:hover::after {
  animation: none;
  opacity: 0;
}

@keyframes ripple-pulse {
  0%   { inset: 0;     opacity: 0.6; }
  100% { inset: -20px; opacity: 0; }
}

/* ─── Choice Buttons (Scene 03) ────────────────────────────────── */
.choice-buttons {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-md);
  z-index: var(--z-overlay);
  align-items: center;
}


/* ─── Scene 05 Overlay ─────────────────────────────────────────── */
.scene05-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.scene05-hint {
  font-size: var(--font-size-h2);
  color: var(--color-white);
  text-align: center;
  opacity: 0.85;
}

/* ─── Eye Blink Bars ───────────────────────────────────────────── */
.blink-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-blink);
  pointer-events: none;
  display: none;
}

.blink-bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 50vh;
  background: #000000;
  z-index: var(--z-blink);
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}
.blink-top    { top: 0;    transform: translateY(-100%); }
.blink-bottom { bottom: 0; transform: translateY(100%);  }

/* Feathered edge — each ::after sits OUTSIDE the bar, extending
   toward the center seam. Gradient: solid black at the bar edge →
   fully transparent 100px outward into the video.
   filter: blur(12px) dissolves the hard start of the gradient so
   the transition reads as organic, not painted-on. */
.blink-top::after {
  content: '';
  position: absolute;
  bottom: -100px;   /* extends 100px below the bar's bottom edge */
  left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, var(--color-black) 0%, transparent 100%);
  filter: blur(12px);
  pointer-events: none;
}

.blink-bottom::after {
  content: '';
  position: absolute;
  top: -100px;      /* extends 100px above the bar's top edge */
  left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to top, var(--color-black) 0%, transparent 100%);
  filter: blur(12px);
  pointer-events: none;
}

/* ─── Screen Flash ─────────────────────────────────────────────── */
.screen-flash {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  opacity: 0;
  pointer-events: none;
  z-index: 800;
}

/* ─── End Screen ───────────────────────────────────────────────── */
#scene-end {
  background: linear-gradient(to bottom right, #221510, #070707);
}

/* Each line is a flex row of word spans — left-aligned */
.end-line {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Individual word — starts blurred+invisible, revealed by GSAP */
.end-word {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-h1);
  line-height: 100%;
  color: var(--color-white);
  display: inline-block;
  filter: blur(20px);
  opacity: 0;
}
/* H2 words — same size as H1, dimmer opacity via GSAP */
.end-word-h2 {
  font-size: var(--font-size-h1);
}

/* ── End screen — column anchored top-left of centered area ─────── */
.end-content-col {
  position: absolute;
  top: var(--spacing-xl);
  bottom: var(--spacing-xl);
  left: calc(50% - 60px); /* left edge = center minus half logo width (120px / 2) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 3;
}

/* Logo block — top of column */
.end-logo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Each element animates individually like end-words */
.end-logo-img,
.end-app-label {
  opacity: 0;
  filter: blur(20px);
}
.end-logo-img {
  height: 70px;
  width: auto;
  display: block;
}
.end-app-label {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-ui);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* Headlines block — below logo */
.end-headlines {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl); /* 40px */
}
.end-headlines > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.end-ticker-item {
  display: block;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-h1);
  color: var(--color-white);
  white-space: nowrap;
  line-height: 1;
  height: var(--font-size-h1);
}

/* Bottom-left shot (video) */
.end-shot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 540px;
  height: 580px;
  object-fit: cover;
  object-position: top;
  display: block;
  pointer-events: none;
}

/* ─── Scene top headline (scene 03) ───────────────────────────── */
.scene-top-headline {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
.scene-top-headline h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  color: var(--color-white);
}

/* ─── Scene center headline ────────────────────────────────────── */
.scene-center-headline {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.scene-center-headline h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  color: var(--color-white);
  text-align: center;
}

/* ─── Scene Stack — headline + buttons as one centered unit ───── */
.scene-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl); /* 40px between headline and buttons */
  pointer-events: none;
  z-index: 5;
}
/* Headlines inside a stack lose their own full-screen positioning */
.scene-stack .scene01-headline,
.scene-stack .scene-center-headline {
  position: static;
  inset: auto;
}
/* Buttons inside a stack flow naturally, no longer pinned to the bottom */
.scene-stack .choice-buttons {
  position: static;
  bottom: auto;
  left: auto;
  transform: none;
  pointer-events: auto;
}
/* btn-ripple-wrap keeps position:relative so the ::after ring anchors correctly */
.scene-stack .btn-ripple-wrap {
  pointer-events: auto;
}

/* ─── Scene 01 Headline ────────────────────────────────────────── */
.scene01-headline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  z-index: 5;
  pointer-events: none;
}
.scene01-headline h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  color: var(--color-white);
  text-align: center;
}

/* ─── Scene 01 hints ──────────────────────────────────────────── */

/* "click anywhere to come in" — flows inside .scene-stack below headline */
.scene01-hint {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight);
  color: var(--color-white);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}

.scene01-rotate-hint { display: none; }


/* "best experienced with sound" — pinned bottom centre */
.scene01-sound-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  opacity: 0.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: var(--z-overlay);
  pointer-events: none;
}

/* ─── Scroll Hint ──────────────────────────────────────────────── */
.scroll-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight);
  color: var(--color-white);
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-align: center;
  z-index: var(--z-overlay);
  pointer-events: none;
}

/* ─── Loading Screen ───────────────────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
}
.loader-phrases {
  position: relative;
  height: 1.2em;
}
.loader-phrase {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  letter-spacing: 0.05em;
  color: #ffffff;
  opacity: 0;
}

/* ─── End Screen — credits ─────────────────────────────────────── */
.end-credits-p2 {
  margin-top: auto; /* pushed to bottom of .end-content-col */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.end-credits-p2 p {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-small);
  color: var(--color-white-30);
  line-height: 100%;
  opacity: 0;
  filter: blur(20px);
}

.credits-link {
  color: var(--color-white-30);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.credits-link:hover { color: var(--color-white); }

/* ─── Mobile: end scene overrides ─────────────────────────────────── */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
  #scene-end {
    background: #000;
  }

  /* video: 1/3 of screen height */
  .end-shot {
    width: auto;
    height: 50vh;
    transform: translateX(-25%);
  }

  /* logo: half size (70px → 35px) */
  .end-logo-img {
    height: 35px;
  }

  /* headlines + scroll hint: 20px (match scene 01 headline size on mobile) */
  .end-word,
  .end-word-h2,
  .end-ticker-item,
  .scroll-hint {
    font-size: 20px;
  }
  .end-line {
    gap: 6px;
  }
  .end-headlines {
    margin-top: 32px;
    gap: 24px;
  }

  /* credits: 8px */
  .end-credits-p2 p {
    font-size: 8px;
  }
  .end-credits-p2 {
    gap: 4px;
    margin-bottom: 100px;
  }

  /* shift column left since logo is smaller */
  .end-content-col {
    left: calc(50% - 30px);
  }
}

/* ─── Mobile: TOC + logo offsets ────────────────────────────────── */
@media (max-width: 768px) {
  .vid-toc      { left: 16px; }
  .fixed-logo   { left: 16px; top: 16px; }
}

/* ─── Utility ──────────────────────────────────────────────────── */
.hidden { display: none !important; }