/* =====================================================================
   #portada · Hero — «la portada impresa cobra vida» (Lane B)
   Mobile-first. Layer z-order (top→bottom): cue, caption, dates, title,
   logo, cat, scrim, photo, pyramids, halo, ornaments, stars, sky.
   Motion is owned by js/sections/portada.js (transform/opacity only).
   ===================================================================== */

.hero {
  position: relative;
  z-index: 1;
  background: var(--c-terracotta-deep);
  color: var(--c-cream);
  /* Local derived vars (tokens only): title size + halo geometry follow the cat (§2, §5.5). */
  --hero-fs: min(var(--fs-display), 22vw);   /* «EGIPTO» stays one line ≤ 90vw down to 320 px */
  --hero-halo-x: calc(50% + 6svh);
  --hero-halo-y: 45.9svh;
  --hero-halo-d: 24.7svh;
}

.hero__stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.hero__stage > * { position: absolute; }

/* ---- sky + stars ---- */
.hero__sky {
  inset: 0;
  z-index: 0;
  background: var(--g-hero);
  transform-origin: 50% 50%;
}
.hero__stars {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: var(--c-white);
  opacity: .9;
}

/* ---- lotus columns ---- */
.hero__ornament {
  z-index: 2;
  bottom: 11svh;
  height: 36svh;
  width: auto;
  aspect-ratio: 80 / 400;
  color: var(--c-white);
  stroke-width: 1.3;
  opacity: .85;
  transform-origin: 50% 100%;
}
.hero__ornament--l { left: calc(var(--gutter) * .35); }
.hero__ornament--r { right: calc(var(--gutter) * .35); }

/* ---- halo behind Bastet's head ---- */
.hero__halo {
  z-index: 3;
  left: var(--hero-halo-x);
  top: var(--hero-halo-y);
  width: var(--hero-halo-d);
  height: var(--hero-halo-d);
  translate: -50% -50%;
  color: var(--c-white);
  stroke-width: .35;
  opacity: .9;
  transform-origin: 50% 50%;
}

/* ---- pyramids + dunes ---- */
.hero__pyramids {
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 30svh;
  transform-origin: 50% 100%;
}

/* ---- real photograph (hidden until the scroll reveals it) ---- */
.hero__photo {
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  transform-origin: 50% 50%;
}
html.js .hero__photo { opacity: 0; transform: scale(1.12); }

.hero__scrim {
  inset: 0;
  z-index: 6;
}
html.js .hero__scrim { opacity: 0; }

/* ---- Bastet (geometry from .cat-pose, Core) ---- */
.hero__cat { z-index: 7; }

/* ---- logo / title / dates ---- */
.hero__logo {
  z-index: 8;
  top: 6svh;
  left: 50%;
  translate: -50% 0;
  width: 132px;
  height: auto;
}

.hero__title {
  z-index: 9;
  top: 11svh;
  left: 0;
  right: 0;
  margin: 0;
  height: calc(var(--hero-fs) * var(--lh-tight));
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--hero-fs);
  line-height: var(--lh-tight);
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
}
.hero__dates {
  z-index: 10;
  top: calc(11svh + var(--hero-fs) * var(--lh-tight) + var(--sp-3));
  left: 0;
  right: 0;
  max-width: none;                         /* base p measure would pin the centred text to the left */
  margin: 0;
  padding: 0 var(--gutter);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 2.25;                       /* room for one scrim pill per wrapped line */
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--c-cream);
}
/* §4: cream never sits on plain terracotta — a night scrim (≈ 4.9:1) hugs each rendered line.
   JS: the split's inline wrapper gets a per-line pill (box-decoration-break). No-JS: the p shrink-wraps + ::before. */
.hero__dates .split__vis {
  display: inline;
  padding: .3em .8em;
  background: rgba(23, 11, 28, .45);
  border-radius: var(--r-pill);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.no-js .hero__dates {
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  padding: .3em 1em;
}
html.no-js .hero__dates::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(23, 11, 28, .45);
  border-radius: var(--r-pill);
}
.hero__dates time { font-variant-numeric: tabular-nums; }

/* ---- caption on the photograph ---- */
.hero__caption {
  z-index: 11;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 15svh;
  margin: 0;
  padding-left: calc(var(--sp-6) + var(--sp-2));
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}
.hero__caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: var(--sp-6);
  height: 1px;
  background: var(--c-gold);
}

/* ---- scroll cue ---- */
.hero__cue {
  z-index: 12;
  left: 50%;
  bottom: var(--sp-5);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-2);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-cream);
}
/* §4: the cue sits on the sand dunes of the pyramids — the word gets its own night pill (cream ≥ 6:1) */
.hero__cue span {
  padding: .6em .9em .5em;
  background: rgba(23, 11, 28, .55);
  border-radius: var(--r-pill);
}
.hero__cue:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; }
.hero__cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 40px;
  overflow: hidden;
  background: var(--c-paper-soft);
  opacity: .6;
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform: translateY(-100%);
}
@keyframes hero-cue {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce) .hero__cue-line::after { animation: hero-cue 2.2s var(--ease-inout) infinite; }
}

/* ---- compositor hints only while the stage is pinned (§12) ---- */
.hero__stage.is-pinned .hero__sky,
.hero__stage.is-pinned .hero__stars,
.hero__stage.is-pinned .hero__pyramids,
.hero__stage.is-pinned .hero__photo,
.hero__stage.is-pinned .hero__scrim,
.hero__stage.is-pinned .hero__cat { will-change: transform, opacity; }

/* =====================================================================
   ≥ 640px
   ===================================================================== */
@media (min-width: 640px) {
  .hero__ornament { height: 46svh; bottom: 10svh; }
  .hero__ornament--l { left: calc(var(--gutter) * .6); }
  .hero__ornament--r { right: calc(var(--gutter) * .6); }
  .hero__caption { bottom: 10svh; right: auto; }
  .hero__dates { font-size: var(--fs-small); letter-spacing: .2em; }
  .hero__cue { bottom: var(--sp-6); }
  .hero__cue-line { height: 48px; }
}

/* =====================================================================
   ≥ 1024px — desktop cover geometry (cat 58svh, bottom 9svh, x −42 %)
   ===================================================================== */
@media (min-width: 1024px) {
  .hero {
    /* title never collides with the ears: 11svh + 20svh·.92 ≈ 29.4svh < cat top (33svh) */
    --hero-fs: min(var(--fs-display), 20svh);
    --hero-halo-x: calc(50% + 8.35svh);
    --hero-halo-y: 42.2svh;
    --hero-halo-d: 28.7svh;
  }
  .hero__logo { width: 180px; }
  .hero__ornament { height: 62svh; bottom: 10svh; }
  .hero__ornament--l { left: max(var(--sp-6), 4vw); }
  .hero__ornament--r { right: max(var(--sp-6), 4vw); }
  .hero__pyramids { height: min(29.2vw, 44svh); }
  .hero__dates { font-size: var(--fs-body); letter-spacing: .24em; }
  .hero__caption { bottom: 9svh; }
}