/* Hero
   The Arabic size override for .hero-title stays in core/base.css,
   with the rest of the Arabic typography. */

/* Carousel slide — a slow drift keeps the hero alive without distracting */
.slide { opacity:0; transform: scale(1.06); transition: opacity 1.1s ease, transform 7s linear; }
.slide.active { opacity:1; transform: scale(1); }

/* Hero headline: a soft shadow so the type holds up over any photograph.
   Two shadows rather than one — a tight dark halo that survives a bright
   highlight touching the letterform, and a wide soft one that lifts the whole
   block off the picture. The tight one is what actually saves the type against
   a lit background; the wide one on its own only greys the area. */
.hero-title {
  text-shadow:
    0 1px 3px rgba(0,0,0,.55),
    0 2px 30px rgba(0,0,0,.45);
}

/* ── The wash that travels with the text ───────────────────────────────────
   A feathered pool of shade behind the headline block itself, rather than a
   band across the picture.

   The difference matters. The gradient below is positioned against the *frame*
   and sized from a measurement of the frame; this one is positioned against
   the *words*. When the two disagree — a wide screen where the text column
   starts a third of the way in, a bright object behind the middle of the
   headline — this is the one that is still in the right place.

   And it needs no measurement at all, which is what makes it the floor rather
   than the ceiling: an image from another origin taints the canvas and the
   browser refuses to hand over its pixels, so the clever path is simply not
   available for the seeded photography. This path always is.

   A radial gradient with generous bleed rather than a box: a rectangle behind
   the type would read as a panel bolted onto the photograph. This reads as
   depth of field. */
.hero-panel {
  position: relative;
  /* Not decoration — required, and the property name matters. `#hero` carries
     Tailwind's `isolate`, so it is the nearest stacking context; without a
     local one here the `z-index: -1` below would paint into #hero's negative
     layer, which sits *beneath* the two scrim divs. The wash would compute
     perfectly and then be covered up. */
  isolation: isolate;

  /* The one number to change. .2 is a light touch — enough to separate the
     type from the picture without hiding it. Raise it if a particular
     photograph fights the headline; the falloff below scales with it. */
  --hero-panel-alpha: .2;
}

.hero-panel::before {
  content: '';
  position: absolute;
  /* Well past the text on every side, so the falloff happens outside the
     letters rather than across them. */
  inset: -3.5rem -6rem -3rem -7rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 72% at 32% 50%,
    rgba(9, 9, 11, var(--hero-panel-alpha)) 0%,
    rgba(9, 9, 11, calc(var(--hero-panel-alpha) * .82)) 42%,
    rgba(9, 9, 11, calc(var(--hero-panel-alpha) * .42)) 68%,
    transparent 84%
  );
}

/* Dark type on a pale photograph wants the opposite wash. */
#hero[data-hero-tone="light"] .hero-panel::before {
  background: radial-gradient(
    ellipse 78% 72% at 32% 50%,
    rgba(255, 255, 255, .86) 0%,
    rgba(255, 255, 255, .72) 42%,
    rgba(255, 255, 255, .38) 68%,
    transparent 84%
  );
}

/* On a phone the text is centred in a narrow frame, so the pool should be too
   — and the generous horizontal bleed above would run off both edges. */
@media (max-width: 640px) {
  .hero-panel::before {
    inset: -2rem -2.5rem;
    background: radial-gradient(
      ellipse 92% 76% at 50% 50%,
      rgba(9, 9, 11, var(--hero-panel-alpha)) 0%,
      rgba(9, 9, 11, calc(var(--hero-panel-alpha) * .82)) 48%,
      transparent 86%
    );
  }

  #hero[data-hero-tone="light"] .hero-panel::before {
    background: radial-gradient(
      ellipse 92% 76% at 50% 50%,
      rgba(255, 255, 255, .88) 0%,
      rgba(255, 255, 255, .72) 48%,
      transparent 86%
    );
  }
}

/* ── The measured wash behind the text ─────────────────────────────────────
   `--hero-text-scrim` is written by hero.js for each slide, from how dark the
   text region can be *relied* on to be rather than from its average — see the
   note there.

   .45 is what shows before any measurement lands, and what stays if the pixels
   cannot be read at all. Deliberately on the strong side: an unread photograph
   is an unknown photograph, and unreadable type costs more than a slightly
   heavy wash.

   Heaviest under the text and gone by two-thirds across, so the photograph is
   still a photograph. */
/* The default lives on #hero, not on .hero-text-scrim, and that placement is
   load-bearing: hero.js writes the measured value onto #hero, and a custom
   property declared on the element itself would shadow the inherited one — the
   measurement would compute correctly and then change nothing on screen. */
#hero { --hero-text-scrim: .45; }

.hero-text-scrim {
  background-image: linear-gradient(
    to right,
    rgba(9, 9, 11, var(--hero-text-scrim)) 0%,
    rgba(9, 9, 11, calc(var(--hero-text-scrim) * .78)) 38%,
    rgba(9, 9, 11, calc(var(--hero-text-scrim) * .28)) 68%,
    transparent 88%
  );
  transition: background-image .6s ease;
}

/* Arabic and any other RTL layout puts the text on the other side. */
[dir="rtl"] .hero-text-scrim {
  background-image: linear-gradient(
    to left,
    rgba(9, 9, 11, var(--hero-text-scrim)) 0%,
    rgba(9, 9, 11, calc(var(--hero-text-scrim) * .78)) 38%,
    rgba(9, 9, 11, calc(var(--hero-text-scrim) * .28)) 68%,
    transparent 88%
  );
}

/* On a pale photograph the type goes dark, so a dark wash under it would be
   exactly backwards. Same gradient, inverted. */
#hero[data-hero-tone="light"] .hero-text-scrim {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, var(--hero-text-scrim)) 0%,
    rgba(255, 255, 255, calc(var(--hero-text-scrim) * .78)) 38%,
    rgba(255, 255, 255, calc(var(--hero-text-scrim) * .28)) 68%,
    transparent 88%
  );
}

[dir="rtl"] #hero[data-hero-tone="light"] .hero-text-scrim {
  background-image: linear-gradient(
    to left,
    rgba(255, 255, 255, var(--hero-text-scrim)) 0%,
    rgba(255, 255, 255, calc(var(--hero-text-scrim) * .78)) 38%,
    rgba(255, 255, 255, calc(var(--hero-text-scrim) * .28)) 68%,
    transparent 88%
  );
}

#hero[data-hero-tone="light"] .hero-title {
  text-shadow:
    0 1px 3px rgba(255,255,255,.7),
    0 1px 24px rgba(255,255,255,.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   Readable type over any photograph

   The hero text was white on a fixed dark scrim, which fails the moment
   somebody uploads a bright photo — and they will, because a bright dining
   room is a good photo. `hero.js` measures the part of the image the text
   actually sits over and sets data-hero-tone; everything below follows from
   that one attribute.

   Flipping the text alone is not enough. A busy mid-tone photograph is hostile
   to black and white alike, so the scrim flips with it: dark wash under light
   type, light wash under dark type. The pair is what guarantees contrast.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-scrim { transition: opacity .6s ease; }
#hero[data-hero-tone="dark"]  .hero-scrim-light { opacity: 0; }
#hero[data-hero-tone="light"] .hero-scrim-dark  { opacity: 0; }

/* The ember glow reads as warmth on a dark photo and as a stain on a pale one. */
#hero[data-hero-tone="light"] .hero-glow { opacity: .35; }

/* ── Light photograph: ink type ───────────────────────────────────────────
   Specificity beats Tailwind's single-class utilities without !important, so
   the markup keeps its normal classes and only the exception lives here. */

#hero[data-hero-tone="light"] .hero-title { color: #111114; text-shadow: 0 1px 24px rgba(255,255,255,.55); }
#hero[data-hero-tone="light"] .hero-accent { color: #8A4F20; }
#hero[data-hero-tone="light"] p[data-i18n="hero_subtitle"] { color: rgba(26,26,30,.78); }

#hero[data-hero-tone="light"] dt { color: rgba(26,26,30,.62); }
#hero[data-hero-tone="light"] dd { color: #111114; }
#hero[data-hero-tone="light"] dl { border-color: rgba(26,26,30,.18); }

/* The open/closed pill and the ghost button both live on borders and washes. */
#hero[data-hero-tone="light"] .hero-badge {
  border-color: rgba(26,26,30,.18);
  background: rgba(255,255,255,.55);
  color: #8A4F20;
}
#hero[data-hero-tone="light"] .hero-ghost-btn {
  border-color: rgba(26,26,30,.28);
  color: #1A1A1E;
}
#hero[data-hero-tone="light"] .hero-ghost-btn:hover {
  border-color: rgba(26,26,30,.6);
  background: rgba(26,26,30,.06);
}

/* The arrows sit over the photograph itself, not the scrim. */
#hero[data-hero-tone="light"] .hero-nav-btn {
  border-color: rgba(26,26,30,.2);
  background: rgba(255,255,255,.6);
  color: #1A1A1E;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scrim { transition: none; }
}