/* ============================================================================
   HOME PAGE HERO - scroll-driven story
   The hero is a tall section (html.hero-anim .hero) holding one full-screen "stage"
   that stays pinned (position: sticky) while you scroll. public/js/hero-scroll.js
   turns the scroll position into the animation: the pizza moves to the centre, flies
   apart into slices, spins, and comes back together, with a caption for each step.
   Without JavaScript, or with "reduce motion" switched on, none of that applies: the
   hero is a normal one-screen header and the pizza simply sits beside the headline.
   ========================================================================== */

.hero { position: relative; color: var(--color-cream); background: #0a0604; }

.hero__stage {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
}
html.hero-anim .hero { height: 480vh; }
html.hero-anim .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* ---------------- Background layers ---------------- */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,6,4,0.92) 0%, rgba(10,6,4,0.55) 42%, rgba(10,6,4,0.25) 68%, rgba(10,6,4,0.55) 100%),
    linear-gradient(90deg, rgba(10,6,4,0.5) 0%, rgba(10,6,4,0) 45%);
}
/* Darkens the photo while the captions are on screen so they stay easy to read */
.hero__shade { position: absolute; inset: 0; z-index: 1; background: #0a0604; opacity: 0; pointer-events: none; }

.hero__ember {
  position: absolute; left: 0; top: 0; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffe3a6 0%, rgba(214,163,74,0.8) 45%, rgba(214,163,74,0) 72%);
}

/* ---------------- The pizza ---------------- */
/* JS sets the transform on .hero__pizza. The values below are the "intro" resting position,
   which is also what you get without JavaScript or with reduced motion. */
.hero__pizza {
  --pizza-size: min(520px, 46vw, 54vh);
  position: absolute; left: 50%; top: 42%; z-index: 2; pointer-events: none;
  width: var(--pizza-size); will-change: transform;
  /* Until the script positions it, roughly where the original hero had it */
  transform: translate(-50%, -50%) translate(23vw, -14vh) scale(1.05);
}
@media (max-width: 920px) {
  .hero__pizza {
    --pizza-size: min(64vw, 40vh);
    transform: translate(-50%, -50%) translate(0, -18vh) scale(0.8);
  }
}
/* No animation (reduced motion / no JavaScript): exactly the original placement, and no pizza on phones */
html:not(.hero-anim) .hero__pizza {
  left: 58%; top: 25%; width: min(500px, 42vw); transform: none;
}
@media (max-width: 920px) { html:not(.hero-anim) .hero__pizza { display: none; } }
.hero__pizza-glow {
  position: absolute; inset: -38%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(214,163,74,0.5) 0%, rgba(214,163,74,0.16) 38%, rgba(214,163,74,0) 66%);
  opacity: 0.35; will-change: transform, opacity;
}
/* A soft round shadow under the pizza. (A CSS drop-shadow filter looks the same but is slow to draw
   on computers without graphics acceleration.) */
.hero__pizza-shadow {
  position: absolute; inset: 4% 2% -6% 2%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
}
.hero__pizza-tilt { position: relative; }
.hero__pizza-spin { position: relative; aspect-ratio: 1 / 1; }
.pf-whole, .pf-wedge { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The whole pizza is one picture; the six slices take over only while they are apart. */
.pf-wedge { visibility: hidden; }
.hero__pizza-spin.is-apart .pf-wedge { visibility: visible; }
.hero__pizza-spin.is-apart .pf-whole { visibility: hidden; }

/* ---------------- Intro text (the first screen) ---------------- */
.hero__inner {
  position: relative; z-index: 3; width: 100%;
  padding-top: calc(var(--nav-height) + 36px); padding-bottom: 56px; /* sideways padding comes from .container */
}
/* On wide screens the text starts exactly where it did in the original hero */
@media (min-width: 1228px) { .hero__inner { padding-left: 0; padding-right: 0; } }
/* ...and sits higher the taller the screen is (the most it can rise while staying clear of the menu bar) */
@media (min-width: 921px) { .hero__inner { padding-bottom: clamp(56px, calc(100svh - 740px), 190px); } }
.hero__intro { max-width: 660px; will-change: transform, opacity; }
.hero__kicker { display: flex; align-items: center; gap: 14px; color: var(--color-gold-light); margin-bottom: 18px; }
.hero__kicker .hairline { width: 48px; margin: 0; background: linear-gradient(90deg, var(--color-gold), transparent); }
.hero__kicker span { font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; }
.hero h1 { color: #fff; max-width: 15ch; text-wrap: balance; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.hero p.lead { color: #e3d6c4; font-size: 1.15rem; max-width: 46ch; margin-top: 16px; font-weight: 400; }
.hero__ctas { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; align-items: center; position: relative; z-index: 10; }
.hero__ctas a { position: relative; z-index: 10; pointer-events: auto; }

/* ---------------- Story captions (one per scroll step) ---------------- */
.hero-chapter {
  position: absolute; left: 50%; bottom: 56px; z-index: 3;
  width: min(620px, calc(100% - 48px)); text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 36px); will-change: transform, opacity;
}
.hero-chapter .hero__kicker { justify-content: center; margin-bottom: 14px; }
.hero-chapter .hero__kicker .hairline:last-child { background: linear-gradient(270deg, var(--color-gold), transparent); }
.hero-chapter h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 3.2rem); max-width: 18ch; margin: 0 auto; }
.hero-chapter p { color: #e3d6c4; font-size: 1.05rem; max-width: 44ch; margin: 14px auto 0; }
.hero-chapter--final { bottom: 40px; }
.hero-chapter--final .hero__ctas { justify-content: center; margin-top: 24px; }

.hero__stats {
  display: flex; justify-content: center; gap: 48px; margin: 26px auto 0; flex-wrap: wrap;
  border-top: 1px solid rgba(246,239,226,0.15); padding-top: 20px; max-width: 520px;
}
.hero__stat strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--color-gold-light); font-weight: 600; }
.hero__stat span { font-size: 0.72rem; color: #c9b8a4; text-transform: uppercase; letter-spacing: 0.1em; }

/* The first screen's stats row, as in the original hero (phones show the stats in the last scene only) */
.hero__intro .hero__stats { justify-content: flex-start; gap: 48px; margin: 40px 0 0; padding-top: 22px; max-width: 640px; }
.hero__intro .hero__stat strong { font-size: 2rem; }
@media (max-width: 920px) { .hero__intro .hero__stats { display: none; } }

/* ---------------- Progress dots + scroll hint ---------------- */
.hero__dots {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; gap: 14px;
}
.hero__dot {
  position: relative; width: 12px; height: 12px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(246,239,226,0.55); background: transparent;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.hero__dot::before { content: ''; position: absolute; inset: -9px; } /* bigger tap target */
.hero__dot:hover { border-color: var(--color-gold-light); }
.hero__dot.is-active { background: var(--color-gold); border-color: var(--color-gold); transform: scale(1.25); }
.hero__dot span {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-light);
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.hero__dot:hover span, .hero__dot:focus-visible span { opacity: 1; }

.hero__scroll {
  position: absolute; bottom: 28px; right: 32px; color: #c9b8a4; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase; display: flex; flex-direction: column;
  align-items: center; gap: 10px; z-index: 4; writing-mode: vertical-rl; pointer-events: none;
}
.hero__scroll::after { content: ''; width: 1px; height: 46px; background: linear-gradient(#c9b8a4, transparent); }

/* ---------------- Phones ---------------- */
@media (max-width: 920px) {
  .hero__dots { right: 12px; gap: 12px; }
  .hero__dot span { display: none; }
  .hero__scroll { right: 18px; bottom: 20px; }
  .hero__intro { padding-right: 26px; } /* keeps the text clear of the progress dots */
  .hero__stats { gap: 12px; justify-content: space-between; flex-wrap: nowrap; text-align: center; }
  .hero__stat strong { font-size: 1.2rem; }
  .hero__stat span { font-size: 0.6rem; letter-spacing: 0.06em; line-height: 1.35; display: block; }
  .hero-chapter { bottom: 44px; }
  .hero-chapter--final { bottom: 28px; }
}

/* ---------------- Without the animation ---------------- */
/* No JavaScript, or "reduce motion": a plain one-screen hero. The story captions, dots and
   floating specks are part of the animation only. */
html:not(.hero-anim) .hero-chapter,
html:not(.hero-anim) .hero__dots,
html:not(.hero-anim) .hero__ember,
html:not(.hero-anim) .hero__shade { display: none; }

/* The floating "Order online" bar on phones would sit on top of the captions; the story has its
   own ordering buttons, so it waits until the story is over. */
body.hero-story-active .sticky-order-bar { display: none !important; }

/* The site-wide film grain uses a blend mode, which forces the whole page to be re-blended on every
   scroll frame and makes the pizza animation choppy on computers without graphics acceleration.
   At its 2.5% strength the grain looks the same with normal blending. Only on this page. */
html.hero-anim body::before { mix-blend-mode: normal; }

/* "Lite" quality: switched on by the script for computers that struggle (or with ?hero=lite). The pizza
   still bounces and the story still plays; only the extra glow, specks and darkening are dropped. */
html.hero-lite .hero__pizza-glow,
html.hero-lite .hero__ember,
html.hero-lite .hero__shade { display: none; }