/* ==========================================================================
   Hero (.o-hero--home): the stepped title, badge, copy and CTA.
   theme.css still provides the base (intro opacity, loader); this file overrides
   it cleanly. The food film reels are in hero-film.css (behaviour: hero-film.js).

   Layout tokens
   - The title is one lockup: SOUVLAKI on top, SHOP stepped in below on the right.
   - --pita-x / --pita-y / --pita-w / --pita-ar mark the "stage" zone under
     SOUVLAKI, left of SHOP (on phones: between SHOP and the copy). The film reels
     sit there; --copy-top places the copy below it on phones.
   Stacking: reels (1) < title (2) < copy + badge (4)
   ========================================================================== */

.o-hero--home {
  /* layout tokens (desktop defaults, overridden per breakpoint below) */
  --hero-header: 78px;
  --hero-gutter: clamp(16px, 6vw, 96px);
  --title-fs: min(19.5vw, 30svh);
  --title-top: calc(var(--title-fs) * .1 + clamp(14px, 3svh, 32px)); /* line-height .8 lets caps rise .1em above the box */
  --shop-w: calc(var(--title-fs) * 1.78);          /* rendered width of "SHOP" */
  /* The lockup: SHOP steps in .28em before SOUVLAKI ends, so it is always 4.7em wide;
     when the type is height-capped (16:9 screens) the lockup centres instead of drifting apart. */
  --lock-w: min(100% - var(--hero-gutter) * 2, var(--title-fs) * 4.7);
  --lock-x: calc((100% - var(--lock-w)) / 2);
  --pita-ar: 1.6;                                   /* pita height / width (from manifest) */
  --pita-w: min(21vw, 30svh, calc(var(--title-fs) * 1.1));
  --pita-top: calc(var(--title-top) + var(--title-fs) * .56);
  --pita-x: calc(var(--lock-x) + (var(--lock-w) - var(--shop-w)) * .52);
  --pita-y: calc(var(--pita-top) + var(--pita-w) * var(--pita-ar) / 2);
  --u: calc(var(--pita-w) / 100);
  --spread: .92;
  --badge-w: clamp(112px, 9.5vw, 144px);
  --ink-rgb: 16 26 67;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  position: relative;
  display: block;
  height: clamp(560px, calc(100svh - var(--hero-header)), calc(var(--title-fs) * 3.1 + 160px));
  min-height: 0;
  max-height: none;
  contain: layout style;
  overflow: clip;
  overflow-clip-margin: 0;
  isolation: isolate;
}

/* ---- Title ------------------------------------------------------------- */
.o-hero--home .hero__title {
  position: absolute;
  z-index: 2;
  top: var(--title-top);
  left: var(--lock-x);
  width: var(--lock-w);
  transform: none;
  font-size: var(--title-fs);
  line-height: .8;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
  pointer-events: none;
}
.o-hero--home .shop-title-first,
.o-hero--home .shop-title-second {
  display: block;
}
.o-hero--home .shop-title-first {
  letter-spacing: .01em;
}
.o-hero--home .shop-title-second {
  margin-top: .06em;
  text-align: right;
  letter-spacing: .03em;
  margin-right: -.03em;                              /* cancel trailing tracking so P sits on the gutter */
}

/* ---- Copy + CTA -------------------------------------------------------- */
.o-hero--home .hero__copy {
  position: absolute;
  z-index: 4;
  top: calc(var(--title-top) + var(--title-fs) * 1.72);
  right: var(--lock-x);
  width: var(--shop-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4svh, 24px);
}
.o-hero--home .a-hero--text {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: var(--shop-ink);
}
.o-hero--home .shop-hero-cta {
  position: relative;
  inset: auto;
  margin: 0;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.o-hero--home .shop-hero-cta:active {
  transform: scale(.97);
}

/* ---- Badge ------------------------------------------------------------- */
.o-hero--home .hero__badge {
  position: absolute;
  z-index: 4;
  /* sits in the corner left free by the stepped lockup: right of SOUVLAKI, above SHOP */
  top: calc(var(--title-top) + var(--title-fs) * .28 - var(--badge-w) / 2);
  right: calc(var(--lock-x) + (var(--lock-w) - var(--title-fs) * 3.26 - var(--badge-w)) / 2);
  width: var(--badge-w);
  aspect-ratio: 1;
  margin: 0;
  order: 0;
}
.o-hero--home .hero__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
}
.o-hero--home .hero__badge-disc {
  fill: var(--grey);
  stroke: var(--shop-blue);
  stroke-width: 1.5;
}
.o-hero--home .hero__badge-rule {
  fill: none;
  stroke: var(--shop-blue);
  stroke-width: 1.5;
}
.o-hero--home .hero__badge-ring-text {
  fill: var(--shop-blue);
  font-family: var(--outfit), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  dominant-baseline: central;
}
.o-hero--home .hero__badge-greek {
  fill: var(--shop-blue);
  /* Neither Outfit nor Veneer ships Greek glyphs: fall back to a Greek-capable system face. */
  font-family: var(--outfit), system-ui, "Segoe UI", "Noto Sans", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ==========================================================================
   Tablet (768–1100px): same composition, tighter type and copy
   ========================================================================== */
@media (max-width: 1100px) {
  .o-hero--home {
    --badge-w: 96px;
  }
  .o-hero--home .a-hero--text {
    font-size: 15px;
  }
}

/* ==========================================================================
   Mobile (<768px): a vertical poster. SOUVLAKI / badge + SHOP / pita burst /
   copy + CTA — tight enough that the CTA sits inside the first viewport.
   Ingredients switch to their phone offsets (--mx / --my / --ms).
   ========================================================================== */
@media (max-width: 767px) {
  .o-hero--home {
    --hero-header: 75px;
    --hero-gutter: 16px;
    --title-fs: calc((100vw - 32px) / 3.22);
    --title-top: calc(var(--title-fs) * .1 + 10px);
    --shop-w: calc(var(--title-fs) * 1.76);
    --pita-w: min(46vw, 230px);
    --pita-top: calc(var(--title-top) + var(--title-fs) * 1.62);
    --pita-x: 50%;
    --badge-w: min(21vw, 92px);
    --copy-top: calc(var(--pita-top) + var(--pita-w) * var(--pita-ar) + 30px);
    height: calc(var(--copy-top) + 150px);
  }
  .o-hero--home .shop-title-second {
    margin-top: .07em;
  }
  
  
  .o-hero--home .hero__copy {
    top: var(--copy-top);
    left: var(--hero-gutter);
    right: var(--hero-gutter);
    width: auto;
    padding-right: 0;
    gap: 14px;
  }
  .o-hero--home .a-hero--text {
    max-width: 36ch;
    font-size: 15px;
    line-height: 1.45;
  }
  .o-hero--home .shop-hero-cta {
    font-size: 18px;
  }
  .o-hero--home .hero__badge {
    top: calc(var(--title-top) + var(--title-fs) * .86);
    left: calc(var(--hero-gutter) + (100vw - var(--hero-gutter) * 2 - var(--shop-w) - var(--badge-w)) * .42);
    right: auto;
  }
}

/* ==========================================================================
   Reduced motion: no loop, no entrance — everything static, visible, composed
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .o-hero--home .hero__title,
  .o-hero--home .m-hero--img,
  .o-hero--home .m-hero--logo,
  .o-hero--home .a-hero--text {
    opacity: 1;
  }
  .o-hero--home .hero-loader {
    display: none;
  }
  .o-hero--home .shop-hero-cta {
    transition: none;
  }
}

/* ---- Load: the CTA waits for the intro (html.hero-pending is set inline in <head>) ---- */
.o-hero--home .shop-hero-cta {
  transition: opacity 500ms var(--ease-out) 250ms, translate 600ms var(--ease-out) 250ms,
              transform 160ms var(--ease-out), background-color 200ms ease;
}
.hero-pending .o-hero--home .shop-hero-cta {
  opacity: 0;
  translate: 0 14px;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .o-hero--home .shop-hero-cta { transition: none; }
}

/* ---- Wait-loader: the badge, spinning. Only appears if the hero images take >450ms,
   leaves when the theme flags html.hero-loaded (or the 6s hero-pending fallback ends). ---- */
.o-hero--home .hero-loader {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: clamp(96px, 11vw, 132px);
  aspect-ratio: 1;
  margin: calc(clamp(96px, 11vw, 132px) / -2) 0 0 calc(clamp(96px, 11vw, 132px) / -2);
  opacity: 0;
  scale: .9;
  pointer-events: none;
  visibility: hidden;
  /* A short hold (120ms) before the fade-out starts, so a hero-loaded flip that lands just
     after the show-delay below never reads as an instant flash — it settles, then eases out. */
  transition: opacity 350ms var(--ease-out) 120ms, scale 450ms var(--ease-out) 120ms, visibility 0s linear 470ms;
}
.hero-pending:not(.hero-loaded) .o-hero--home .hero-loader {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-out) 450ms, scale 600ms var(--ease-out) 450ms, visibility 0s linear 450ms;
}
.o-hero--home .hero-loader svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.o-hero--home .hero-loader__ring {
  animation: hero-loader-spin 7s linear infinite;
}
@keyframes hero-loader-spin {
  to { rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .o-hero--home .hero-loader__ring { animation: none; }
}

/* ---- AAA stamp (from the owner's flyer) beside the CTA: blue ink via mask, pressed in after the CTA ---- */
.o-hero--home .hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
}
.o-hero--home .hero__stamp {
  flex: none;
  width: clamp(72px, 6.6vw, 112px);
  aspect-ratio: 1;
  background: var(--shop-blue);
  -webkit-mask: url(../assets/brand/aaa-stamp.webp) center / contain no-repeat;
  mask: url(../assets/brand/aaa-stamp.webp) center / contain no-repeat;
  rotate: -10deg;
  transition: opacity 420ms cubic-bezier(.23, 1, .32, 1) 450ms, scale 420ms cubic-bezier(.23, 1, .32, 1) 450ms;
}
.hero-pending .o-hero--home .hero__stamp {
  opacity: 0;
  scale: 1.5;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .o-hero--home .hero__stamp { transition: none; }
}