/* ==================================================================
   Hero — the shopfront photograph, full bleed.

   Stack, back to front:
     media (ken burns + scroll parallax) > warm grade > scrims
     > pool of shade behind the type > vignette > dust motes > content
================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}

/* --- 1. Photograph ----------------------------------------------- */
.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
  transform: translate3d(
      calc(var(--mouse-x) * -14px),
      calc(var(--hero-progress) * var(--par, 13vh) + var(--mouse-y) * -9px),
      0);
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  transform-origin: 50% 42%;
  animation: ken-burns 30s var(--ease-soft) infinite alternate;
  filter: saturate(0.94) contrast(1.05) brightness(0.97) sepia(0.05);
}
@keyframes ken-burns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16); }
}

/* --- 2. Warm grade ------------------------------------------------ */
.hero__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 34%, rgba(255, 226, 168, 0.26), transparent 60%),
    linear-gradient(200deg, rgba(168, 82, 61, 0.14), transparent 55%, rgba(30, 23, 18, 0.30));
  mix-blend-mode: soft-light;
}

/* --- 3. Scrims ---------------------------------------------------- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 12, 10, 0.55) 0%,
    rgba(16, 12, 10, 0.14) 19%,
    rgba(16, 12, 10, 0.00) 37%,
    rgba(16, 12, 10, 0.34) 53%,
    rgba(16, 12, 10, 0.80) 70%,
    rgba(16, 12, 10, 0.93) 88%,
    rgba(16, 12, 10, 0.99) 100%);
}

/* --- 4. A pool of shade, so contrast never depends on the photo --- */
.hero__plate {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1300px, 108%);
  height: 58%;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(60% 54% at 50% 80%, rgba(12, 9, 7, 0.88), rgba(12, 9, 7, 0.42) 56%, transparent 76%);
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(122% 82% at 50% 40%, transparent 46%, rgba(12, 9, 7, 0.40) 76%, rgba(12, 9, 7, 0.72) 100%);
}

.hero__motes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.75;
}

/* --- 5. Type ------------------------------------------------------ */
.hero__content {
  position: relative;
  z-index: 5;
  width: min(100% - 2.5rem, 960px);
  margin-bottom: clamp(2.8rem, 6.2vh, 4.2rem);
  text-align: center;
  transform: translate3d(
      calc(var(--mouse-x) * 7px),
      calc(var(--hero-progress) * -6vh),
      0);
  opacity: calc(1 - var(--hero-progress) * 1.25);
}

.hero__eyebrow {
  margin-bottom: 1rem;
  color: var(--gold-200);
  text-shadow: 0 2px 14px rgba(12, 9, 7, 0.95), 0 0 30px rgba(12, 9, 7, 0.8);
}
.hero__title {
  font-size: clamp(2.7rem, 7.6vw, 6.4rem);
  font-weight: 600;
  letter-spacing: 0.018em;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 4px 60px rgba(12, 9, 7, 0.9), 0 2px 10px rgba(12, 9, 7, 0.75);
}
.hero__ornament { margin: clamp(0.9rem, 1.9vh, 1.5rem) 0; }

.hero__sub {
  margin: 0;
  font-size: clamp(0.68rem, 1.4vw, 0.9rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: rgba(246, 241, 230, 0.94);
  text-shadow: 0 2px 16px rgba(12, 9, 7, 0.8);
}
.hero__line {
  max-width: 28em;
  margin: 1.15rem auto 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(246, 241, 230, 0.9);
  text-shadow: 0 2px 18px rgba(12, 9, 7, 0.85);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3.2vh, 2.3rem);
}

/* --- 6. Corner furniture ------------------------------------------ */
.hero__cue {
  position: absolute;
  right: clamp(1.25rem, 3.4vw, 3.2rem);
  bottom: clamp(3.1rem, 6vh, 4.4rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: calc(1 - var(--hero-progress) * 2.4);
}
.hero__cue span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(232, 210, 140, 0.75);
  writing-mode: vertical-rl;
}
.hero__cue i {
  display: block;
  width: 1px; height: 52px;
  background: linear-gradient(180deg, rgba(232, 210, 140, 0.7), transparent);
  overflow: hidden;
}
.hero__cue i::after {
  content: "";
  display: block;
  width: 1px; height: 18px;
  background: var(--gold-300);
  animation: cue-fall 2.4s var(--ease-soft) infinite;
}
@keyframes cue-fall {
  0%   { transform: translateY(-20px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(52px); opacity: 0; }
}

.hero__branches {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0.85rem 1.5rem 1.15rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: rgba(246, 241, 230, 0.44);
  white-space: nowrap;
}
.hero__branches b { font-weight: 500; color: var(--gold-300); }
.hero__branches i { font-style: normal; color: rgba(232, 210, 140, 0.4); }

/* --- Entrance ------------------------------------------------------ */
.js .hero__content > * {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
}
.is-loaded .hero__content > * { animation: rise 1.5s var(--ease-out) forwards; }
.is-loaded .hero__eyebrow  { animation-delay: 0.35s; }
.is-loaded .hero__title    { animation-delay: 0.5s; }
.is-loaded .hero__ornament { animation-delay: 0.78s; }
.is-loaded .hero__sub      { animation-delay: 0.9s; }
.is-loaded .hero__line     { animation-delay: 1.02s; }
.is-loaded .hero__actions  { animation-delay: 1.16s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

.hero__media { transform-origin: center; }
.js .hero__media { opacity: 0; }
.is-loaded .hero__media { animation: hero-in 2.2s var(--ease-out) forwards; }
@keyframes hero-in { to { opacity: 1; } }

/* --- Phone: a 4:3 photo in a tall frame crops to a fragment, so the
       shopfront becomes a band and the type sits beneath it. -------- */
@media (max-width: 720px) {
  :root { --par: 7vh; }

  .hero { min-height: 620px; }
  .hero__media { inset: -3% 0 auto 0; height: 64%; }
  /* The porch sits at 54.6% of the photograph, not the middle, so a
     centred crop pushes it right. 58% brings it back to centre. */
  .hero__img { object-position: 58% 46%; animation-name: ken-burns-soft; }
  .hero__grade { inset: 0 0 auto 0; height: 64%; }
  .hero__motes { height: 64%; }
  .hero__plate { display: none; }

  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(16, 12, 10, 0.62) 0%,
      rgba(16, 12, 10, 0.10) 15%,
      rgba(16, 12, 10, 0.00) 30%,
      rgba(16, 12, 10, 0.30) 46%,
      rgba(16, 12, 10, 0.88) 59%,
      rgba(16, 12, 10, 0.99) 68%,
      rgba(16, 12, 10, 1) 100%);
  }
  .hero__vignette {
    background: radial-gradient(130% 52% at 50% 26%, transparent 50%, rgba(12, 9, 7, 0.5) 100%);
  }

  .hero__content { margin-bottom: clamp(2.2rem, 5vh, 3.2rem); width: min(100% - 2.75rem, 460px); }
  .hero__title { font-size: clamp(2.6rem, 13.5vw, 4rem); letter-spacing: 0.02em; }
  .hero__sub { font-size: 0.7rem; letter-spacing: 0.3em; }
  .hero__line { font-size: 0.98rem; line-height: 1.6; max-width: 24em; margin-top: 0.95rem; }
  .hero__actions { flex-direction: column; gap: 0.7rem; }
  .hero__actions .btn { width: 100%; }
  .hero__cue, .hero__branches { display: none; }
}

@keyframes ken-burns-soft {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

@media (max-width: 420px) {
  .brand__sub { display: none; }
  .brand__name { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media, .hero__content { transform: none; }
}