/* Big Shawerma — Coming Soon
   Mobile-first. Brand colours from the Big Shawerma brand graph:
   cream #F7F5F1 · mustard #E8B21A · red #D42628 · black #1A1A1A

   Fonts: three files only. Reem Kufi (Arabic 700 + Latin 600) carries display
   text and the Latin brand strings; IBM Plex Sans Arabic 400 carries Arabic
   body copy and the CTA. */

@font-face {
  font-family: "Reem Kufi";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/reem-kufi-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Reem Kufi";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/reem-kufi-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --ink: #0c0a08;
  --cream: #f7f5f1;
  --cream-muted: rgba(247, 245, 241, 0.76);
  --cream-faint: rgba(247, 245, 241, 0.68); /* ≥ 4.5:1 on the footer background */
  --mustard: #e8b21a;
  --amber: #f39a1f;
  --red: #d42628;

  --font-display: "Reem Kufi", "Segoe UI", Tahoma, sans-serif;
  /* the Plex file is Arabic-only; spaces and Latin punctuation in body copy
     use the system font, which keeps normal word spacing */
  --font-body: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0, …) stops long unbreakable content from widening the page */
  grid-template-columns: minmax(0, 1fr);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

/* ───────────────────────── Cinematic intro ─────────────────────────
   Enabled by the head script (.has-intro). The video plays inside the hero
   photo box (same crop, mask, shade and scale as the still), so its last frame
   lands exactly on the hero image. The brand header stays visible throughout;
   while .intro-playing is set, the copy and footer are hidden and inert and
   their entrance animations wait at their first frame. */

.intro,
.intro__video { display: none; }

html.has-intro .intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: fixed;
  inset-inline: var(--gutter);
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 100;
  transition: opacity 0.6s var(--ease-out);
}
.intro.is-leaving { opacity: 0; pointer-events: none; }

.intro__skip,
.intro__sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(247, 245, 241, 0.32);
  border-radius: 999px;
  background: rgba(12, 10, 8, 0.62);
  color: var(--cream);
  font: 400 0.9rem/1 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intro__skip:hover,
.intro__sound:hover { border-color: rgba(247, 245, 241, 0.6); }
.intro__sound[aria-pressed="true"] { border-color: rgba(232, 178, 26, 0.7); color: var(--mustard); }
.intro__sound[aria-pressed="true"] .intro__cross,
.intro__sound[aria-pressed="false"] .intro__waves { display: none; }

html.has-intro .intro__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
html.has-intro .intro__video.is-playing { opacity: 1; }
html.has-intro .intro__video.is-leaving { opacity: 0; transition-duration: 0.8s; }

/* cold open from dark: the still only appears once the intro ends */
html.intro-playing .focal__photo img { opacity: 0; }

html.intro-playing :is(.skip-link, .hero > :not(.focal), .footer) { visibility: hidden; }
html.intro-playing :is(.hero > :not(.focal), .hero > :not(.focal) *, .footer, .footer *) {
  animation-play-state: paused !important;
}

/* programmatic focus target after the intro; not an interactive control */
#main:focus { outline: none; }

/* ───────────────────────── Layers ─────────────────────────
   stage (z −1, fixed ambient dark) → hero photo (z −1, later in DOM) → content */

.stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 110%, #24120a 0%, transparent 60%),
    linear-gradient(180deg, #0a0806 0%, var(--ink) 55%, #110b07 100%);
}

/* warm ambient light around the photo band on phones */
.stage__glow {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 140vmin;
  height: 140vmin;
  translate: -50% -50%;
  background:
    radial-gradient(closest-side, rgba(243, 154, 31, 0.22), rgba(212, 80, 20, 0.08) 50%, transparent 100%);
}

/* static film grain; never moves, so it only needs to cover the viewport */
.stage__grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────────────────── Foreground ───────────────────────── */

.topbar,
.hero,
.footer {
  position: relative;
  min-width: 0;
  padding-inline: var(--gutter);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: max(20px, env(safe-area-inset-top));
  animation: rise 1s var(--ease-out) 0.1s both;
}

/* Light logo straight on the hero: no plate. A soft dark shadow only lifts
   the white lettering off the smoke; the artwork itself is unchanged. */
.brand {
  flex: none;
  width: clamp(200px, 62vw, 248px);
}
.brand__logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 640 / 287;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(232, 178, 26, 0.35);
  border-radius: 999px;
  background: rgba(12, 10, 8, 0.55);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}
.status__dot,
.hero__soon-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.status__dot::after,
.hero__soon-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--red);
  animation: ping 2.4s var(--ease-out) infinite;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 28px;
}

/* ── Hero photo ──
   Phones/tablets: an in-flow band that takes whatever height the copy leaves
   free (so food and text can never overlap). It bleeds to the screen edges and
   reaches up behind the logo, fading into the page at top and bottom. */
.focal {
  --px: 0; /* pointer parallax, set by main.js (−1 … 1) */
  --py: 0;
  --reach: clamp(96px, 16svh, 170px); /* how far the photo extends up behind the logo */
  position: relative;
  z-index: -1;
  flex: 1 1 auto;
  min-height: clamp(128px, 27svh, 440px);
  margin-inline: calc(var(--gutter) * -1);
  margin-bottom: 6px;
  pointer-events: none;
}

.focal__photo,
.focal__shade {
  position: absolute;
  inset: calc(var(--reach) * -1) 0 0;
}
.focal__photo {
  overflow: hidden;
  /* fade into the page at top and bottom (no hard seam against the stage) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 62%, transparent 100%);
}
.focal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: photo-in 2.6s var(--ease-out) both;
}
/* still and intro video share one framing so the hand-off is seamless */
.focal__photo img,
html.has-intro .intro__video {
  object-position: 38% 78%;
  translate: calc(var(--px) * -8px) calc(var(--py) * -6px);
}
html.has-intro .intro__video { transform: scale(1.02); }
/* after an intro the still starts at its settled scale (no zoom jump at the hand-off) */
html.intro-ran .focal__photo img { animation: none; transform: scale(1.02); }

.focal__shade { display: none; } /* phones: the photo's own mask does the fading */

/* ── Embers: three on phones (no glow), six where there is room ── */
.embers {
  --rise: -20svh;
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: min(70%, 300px);
  height: 1px;
  translate: -50% 0;
}
.embers i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffc35a;
  opacity: 0;
  animation: ember 9s linear infinite;
}
.embers i:nth-child(1) { left: 30%; animation-delay: -1s; animation-duration: 8s; }
.embers i:nth-child(2) { left: 62%; animation-delay: -4s; animation-duration: 10s; }
.embers i:nth-child(3) { left: 46%; animation-delay: -6.5s; animation-duration: 11s; width: 2px; height: 2px; }
.embers i:nth-child(n + 4) { display: none; }

.hero__eyebrow {
  /* LTR block whose content is pushed to the right edge (the RTL start axis) */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.6rem, 2.9vw, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mustard);
  animation: rise 1s var(--ease-out) 0.25s both;
}
.hero__eyebrow::before {
  /* decorative lead-in line on the far side from the alignment axis */
  content: "";
  flex: 0 1 28px;
  min-width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red) 40%, var(--mustard));
}
.hero__eyebrow-text {
  min-width: 0;
  text-align: right;
  margin-right: -0.18em; /* cancel trailing tracking */
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 12.4vw, 6.75rem);
  line-height: 1.12;
  letter-spacing: 0;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  /* room for Arabic descenders/dots inside the clip */
  padding-block: 0.06em 0.12em;
  margin-block: -0.06em -0.12em;
}
.hero__title .line > span {
  display: inline-block;
  animation: line-up 1.1s var(--ease-out) both;
}
.hero__title .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.3s; }
.hero__title .line--accent > span {
  color: var(--mustard);
  background: linear-gradient(100deg, #f6cf5a 0%, var(--mustard) 40%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__lede {
  margin-top: 14px;
  max-width: 30ch;
  font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  color: var(--cream-muted);
  animation: rise 1s var(--ease-out) 0.5s both;
}

/* primary action first (right edge), launch status beside it as a secondary note */
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 26px;
  animation: rise 1s var(--ease-out) 0.62s both;
}

.hero__soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  line-height: 1.2;
  color: var(--cream-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font: 400 1.05rem/1 var(--font-body);
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.btn__icon { flex: none; }
.btn--primary {
  background: var(--mustard);
  color: #1a1206;
  box-shadow: 0 10px 30px -12px rgba(232, 178, 26, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--ghost {
  border: 1px solid rgba(247, 245, 241, 0.28);
  color: var(--cream);
  background: rgba(12, 10, 8, 0.35);
}
.btn:active { transform: scale(0.97); }

@media (hover: hover) {
  .btn--primary:hover {
    transform: translateY(-2px);
    background: #f1bf2e;
    box-shadow: 0 16px 40px -12px rgba(243, 154, 31, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .btn--ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(247, 245, 241, 0.55);
  }
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(247, 245, 241, 0.1);
  margin-inline: var(--gutter);
  padding-inline: 0;
  font-size: 0.85rem;
  color: var(--cream-faint);
  animation: fade-in 1.2s ease 0.9s both;
}
.footer__slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cream-muted);
}
.footer__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.footer__meta .sep { opacity: 0.5; }
.footer__copy { font-family: var(--font-display); font-weight: 600; }

/* studio credit: last line of the page, quiet and centred */
.footer__credit {
  flex-basis: 100%;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 245, 241, 0.06);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(247, 245, 241, 0.56);
}
.footer__credit a {
  /* 44px tall hit area without changing the line's visual height */
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  color: rgba(247, 245, 241, 0.8);
  text-decoration: underline 1px rgba(232, 178, 26, 0.35);
  text-underline-offset: 4px;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--mustard);
  text-decoration-color: var(--mustard);
}

/* ── Branches: two Google Maps links, quieter than the CTA ── */
.branches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 22px;
  animation: rise 1s var(--ease-out) 0.85s both;
}
.branches__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cream-muted);
}
.branches__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.branch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(247, 245, 241, 0.22);
  border-radius: 999px;
  background: rgba(12, 10, 8, 0.4);
  color: var(--cream);
  font: 400 0.95rem/1 var(--font-body);
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s;
}
.branch__icon { flex: none; color: var(--mustard); }
.branch:hover { border-color: rgba(232, 178, 26, 0.6); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* phones: the logo plate needs the full row; "قريبًا" in the hero carries the status */
@media (max-width: 519px) {
  .status { display: none; }
}

/* phones: ~12% smaller headline, more air between the copy blocks, stacked footer */
@media (max-width: 599px) {
  .hero__eyebrow { margin-bottom: 16px; }
  .hero__title { font-size: clamp(2.1rem, 10.9vw, 3.4rem); line-height: 1.16; }
  .hero__lede { margin-top: 16px; }

  .footer {
    flex-direction: column;
    align-items: flex-start; /* RTL: right edge */
    gap: 10px;
    padding-top: 22px;
  }
  .footer__meta { align-self: stretch; gap: 6px 10px; line-height: 1.5; }
  .footer__meta .sep--copy { display: none; }
  .footer__copy { flex-basis: 100%; text-align: right; opacity: 0.9; }
  .footer__credit { flex-basis: auto; align-self: stretch; letter-spacing: 0.1em; } /* column footer: basis would be height */
}

/* short phones (e.g. 320×568): tighten so the CTA lands on the first screen */
@media (max-width: 959px) and (max-height: 680px) {
  .brand { width: clamp(184px, 56vw, 220px); }
  .focal { min-height: 112px; --reach: 84px; }
  .hero__title { font-size: clamp(1.9rem, 9.7vw, 3.6rem); }
  .hero__eyebrow { margin-bottom: 12px; }
  .hero__lede { margin-top: 12px; }
  .hero__cta-row { margin-top: 20px; }
  .btn { min-height: 48px; }
}

/* ───────────────────────── Larger screens ───────────────────────── */

@media (min-width: 600px) {
  .brand { width: 280px; }
  .hero__eyebrow { font-size: 0.78rem; letter-spacing: 0.3em; }
  .hero__eyebrow-text { margin-right: -0.3em; }
  .hero__eyebrow::before { flex-basis: 48px; }
  .focal { min-height: clamp(220px, 32svh, 460px); }
}

/* the extra embers, with a soft glow, only on larger hover-capable screens */
@media (min-width: 600px) and (hover: hover) {
  .embers { --rise: -28svh; }
  .embers i { box-shadow: 0 0 6px 1px rgba(255, 150, 40, 0.7); }
  .embers i:nth-child(n + 4) { display: block; }
  .embers i:nth-child(4) { left: 74%; animation-delay: -2s; animation-duration: 12s; width: 2px; height: 2px; }
  .embers i:nth-child(5) { left: 18%; animation-delay: -7.5s; animation-duration: 13s; }
  .embers i:nth-child(6) { left: 54%; animation-delay: -4.6s; animation-duration: 9s; width: 2px; height: 2px; }
}

/* Desktop: full-bleed photo, copy on the darkened right side (RTL start) */
@media (min-width: 960px) {
  .focal {
    --footer-h: 96px; /* the photo stops above the footer, which sits on plain dark */
    position: fixed;
    inset: 0;
    min-height: 0;
    margin: 0;
  }
  .focal__photo {
    /* 14px spare on each side for the pointer drift. On narrower desktops the
       photo's right edge pulls in (9–15%) so the food clears the copy column;
       the mask dissolves that edge into the dark copy side. */
    inset: -14px clamp(9%, calc((1920px - 100vw) * 0.4), 15%) var(--footer-h) -14px;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 20%), linear-gradient(0deg, transparent 0%, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, transparent 0%, #000 20%), linear-gradient(0deg, transparent 0%, #000 16%);
    mask-composite: intersect;
  }
  .focal__shade { display: block; inset: 0; }
  /* anchor to the photo's right edge: empty grill + smoke sit under the copy, the food shifts left */
  .focal__photo img,
  html.has-intro .intro__video { object-position: 100% 70%; }
  .focal__shade {
    background:
      /* copy side */
      linear-gradient(270deg, rgba(8, 6, 4, 0.9) 0%, rgba(8, 6, 4, 0.72) 30%, rgba(8, 6, 4, 0.2) 54%, transparent 68%),
      /* logo / topbar */
      linear-gradient(180deg, rgba(8, 6, 4, 0.55) 0%, transparent 22%),
      /* footer sits on a solid base */
      linear-gradient(0deg, var(--ink) 0%, rgba(12, 10, 8, 0.9) 9%, transparent 30%),
      radial-gradient(130% 110% at 30% 60%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
  }
  .embers { left: 30%; bottom: 24%; width: 40%; --rise: -46vh; }
  .stage__glow { display: none; }

  .brand { width: 300px; }
  .hero {
    justify-content: center;
    width: min(52%, 46rem);
    padding-top: 24px;
    padding-bottom: clamp(64px, 16vh, 220px); /* copy sits above the food on tall screens */
  }
  .hero__eyebrow { margin-bottom: 18px; }
  .hero__title {
    font-size: clamp(3.6rem, 5.8vw, 6.25rem);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
  }
  .hero__lede { margin-top: 18px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
  .hero__cta-row { margin-top: 34px; }
  .footer { border-top-color: rgba(247, 245, 241, 0.14); }
}

/* slow drift on the photo once it has settled: large screens with a mouse only */
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .focal__photo img {
    animation: photo-in 2.6s var(--ease-out) both, photo-drift 36s ease-in-out 2.6s infinite alternate;
  }
  html.intro-ran .focal__photo img { animation: photo-drift 36s ease-in-out infinite alternate; }
  html.intro-playing .focal__photo img { animation-play-state: paused; } /* drift starts at the hand-off */
}

/* narrow desktop column: keep the English line on one row */
@media (min-width: 960px) and (max-width: 1199px) {
  .hero__eyebrow { letter-spacing: 0.2em; }
  .hero__eyebrow-text { margin-right: -0.2em; }
}

@media (min-width: 960px) and (max-height: 640px) {
  .hero__title { font-size: clamp(3rem, 5vw, 4.5rem); }
  .hero__cta-row { margin-top: 20px; }
}

/* ───────────────────────── Motion ───────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes line-up {
  from { transform: translateY(105%); }
  to { transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes photo-in {
  from { transform: scale(1.1); }
  to { transform: scale(1.02); }
}
@keyframes photo-drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.07) translate(-0.8%, -0.6%); }
}
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  60% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-14px, var(--rise)) scale(0.4); }
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.has-intro .intro,
  html.has-intro .intro__video { display: none; }
  html.intro-playing .focal__photo img { opacity: 1; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .embers { display: none; }
  .focal__photo img { transform: scale(1.02); translate: none; }
}