/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-white:      #FFFFFF;
  --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-body:       16px;
  --color-white-30:       rgba(255, 255, 255, 0.3);
  --font-size-h1:        32px;
  --font-size-h2:        16px;
  --font-size-small:     12px;
  --line-height-heading: 70%;

  /* Spacing — 4px 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:  9999;
  --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);
  cursor: none;
}

/* ─── Custom Cursor ────────────────────────────────────────────── */
#custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: opacity var(--transition-blink-close);
}
#custom-cursor img { width: 100%; height: 100%; }
/* cursor always visible — end screen is interactive */

/* ─── Cursor Hint ──────────────────────────────────────────────── */
.cursor-hint {
  position: absolute;
  /* default: 16px right of cursor center, 8px below */
  left: calc(50% + 16px);
  top:  calc(50% + 8px);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  color: var(--color-white);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
/* flip horizontally when near right edge */
.cursor-hint.flip-x {
  left: auto;
  right: calc(50% + 16px);
}
/* flip vertically when near bottom edge */
.cursor-hint.flip-y {
  top: auto;
  bottom: calc(50% + 8px);
}

/* ─── 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;
}

/* 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;
  cursor: none;
  z-index: var(--z-ui);
  padding: 4px;
}
.sound-toggle img { width: auto; height: auto; display: block; }

/* ─── 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);
  cursor: none;
  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);
  cursor: none;
  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);
  cursor: none;
  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 03 Overlays ────────────────────────────────────────── */
.scene03-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
  z-index: 2;
}
.dark-tint {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 3;
}
.really-text {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  color: var(--color-white);
  z-index: 4;
  pointer-events: none;
}
.enough-text {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-small);
  line-height: var(--line-height-heading);
  color: rgba(255,255,255,0.5);
  z-index: var(--z-overlay);
  pointer-events: none;
}

/* ─── 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;
}

/* ─── Recipe Card (Scene 06) ───────────────────────────────────── */
.recipe-card-container {
  position: absolute;
  right: 50px;
  bottom: 260px;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.recipe-card {
  color: var(--color-orange);
  background: transparent;
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

/* Tag: orange fill, white text, attached above frame 18px from left */
.recipe-tag {
  position: absolute;
  top: 0;
  left: 18px;
  transform: translateY(-100%);
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  line-height: 1;
  padding: var(--spacing-xs) var(--spacing-xs);
  white-space: nowrap;
}

.ingredient-list {
  list-style: none;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.ingredient-list li {
  font-size: var(--font-size-h2);
  line-height: 1.2;
  color: var(--color-white);
}
.opt { color: var(--color-grey-light); }

/* Button outside frame: 18px from left edge, 18px below frame */
.recipe-btn-outer {
  margin-left: 18px;
  margin-top: 18px;
}

/* Hanger: centered relative to whole card, 40px below button */
.hanger-wrap {
  align-self: stretch;
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
  padding-bottom: 20px;
}
.hanger-svg { height: auto; }

/* ─── Eye Blink Bars ───────────────────────────────────────────── */
.blink-bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 50vh;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(50px);
          backdrop-filter: blur(50px);
  z-index: var(--z-blink);
  pointer-events: none;
  overflow: visible; /* allow ::after feather to bleed past the bar edge */
  opacity: 0;        /* invisible at rest — made visible only at blink start */
}
.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;
}

/* ─── Detected Overlay (Scene 08) ─────────────────────────────── */
.detected-overlay-wrap {
  position: absolute;
  top: 40%;
  right: calc(01%);
  z-index: var(--z-overlay);
  pointer-events: none;
}
.detected-overlay-img {
  width: 308px; /* 220px × 1.4 */
  height: auto;
}

/* Scene 08 badge — JS positions it at overlay's bottom-left via getBoundingClientRect */
.s08-badge {
  position: fixed;   /* JS overrides left/top at runtime */
  width: 32px;
  height: auto;
  opacity: 0;
  transform-origin: top left;  /* scale grows from the corner point */
  pointer-events: none;
  z-index: 11;
}

/* ─── Badge (Scene 10) ─────────────────────────────────────────── */
.badge-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.badge-done {
  width: 32px;
  height: auto;
  opacity: 0;
  transform: scale(0.6);
}

/* ─── Waiting Text (Scene 09) ──────────────────────────────────── */
.scene09-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.waiting-text {
  font-size: var(--font-size-h2);
  color: var(--color-white);
  opacity: 0.8;
}

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

/* Each line is a flex row of word spans */
.end-line {
  display: flex;
  gap: 10px;
  justify-content: center;
  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;
}

/* End screen — logo block is the sole centering anchor */
.end-logo-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2; /* above end-shot */
}
.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-h2);
  color: var(--color-white);
  line-height: 1;
}

/* Feature ticker — out of flow, right of logo block, bottom-aligned with logo image */
.end-ticker-clip {
  position: absolute;
  left: calc(100% + 20px);
  top: calc(70px - var(--font-size-h1));
  overflow: hidden;
  height: var(--font-size-h1);
}
.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;
}

/* ─── 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;
}

/* ─── 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 09 Countdown Timer — pure code ─────────────────────── */
.s09-timer {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--color-orange);
  z-index: 500;
  transform-origin: center center;
}
.s09-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.s09-timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.s09-timer-main {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}
.s09-timer-left {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size-small);
  line-height: 1;
  color: var(--color-white);
}

/* ─── Scroll Hint ──────────────────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-small);
  color: var(--color-white);
  letter-spacing: 0.05em;
  z-index: var(--z-overlay);
  pointer-events: none;
}

/* ─── Loading Screen ───────────────────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: var(--z-loading);
}
.loader-spinner {
  width: 28px;
  height: 28px;
  border: var(--frame-stroke) solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: loader-spin 0.75s linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}
.loader-text {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

/* ─── End Screen Part 2 — headlines ───────────────────────────── */
.end-headlines-p2 {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 56px;
  z-index: 3;
  pointer-events: none;
}
.end-headlines-p2 > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── End Screen Part 2 — credits ─────────────────────────────── */
.end-credits-p2 {
  position: fixed;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}
.end-credits-p2 p {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  color: var(--color-white-30);
  line-height: 100%;
  opacity: 0;
  filter: blur(20px);
}

/* ─── Scene 10 — done button position ─────────────────────────── */
#scene-10 .choice-buttons { bottom: 70px; }

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