/* ================================================================
   TILLSTUDIO — Shared full-bleed hero shell for the inner pages.
   Each page drops its own <canvas id="fx-canvas"> animation behind
   the text. Text styles come from hero-animations.css (.page-hero__*).
   ================================================================ */

.hero-fx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--clr-bg);
  min-height: 74vh;
  min-height: 74svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3rem) 0 3.5rem;
}

.hero-fx__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.hero-fx__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 105% at 34% 50%,
      rgba(6,6,10,0.82) 0%, rgba(6,6,10,0.44) 44%, transparent 78%),
    linear-gradient(to bottom,
      rgba(6,6,10,0.55) 0%, transparent 30%, transparent 66%, rgba(6,6,10,0.92) 100%);
}

.hero-fx__inner { position: relative; z-index: 2; width: 100%; }
.hero-fx__content { max-width: 620px; }

.hero-fx .page-hero__heading span { color: var(--clr-red); }

/* ── Desktop: a touch taller, text hugs the left ─────────────────── */
@media (min-width: 1024px) {
  .hero-fx { min-height: 82vh; padding-top: calc(var(--nav-h) + 3.5rem); }
  .hero-fx__content { max-width: 640px; }
}

/* ── Short landscape (phones / laptops sideways): compress ───────── */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-fx {
    min-height: 100svh;
    justify-content: center;
    padding: calc(var(--nav-h) + 1rem) 0 2rem;
  }
  .hero-fx__content { max-width: 66%; }
}