/* hero.css — #inicio: lit stone wall, carved headline, embers (SPEC-v2 §2.2). Owner: fe-descent.
   Mobile first (390px); wider rules at 960px. Default (no JS, reduced motion) = everything visible and static. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(3.5rem, 9svh, 6rem) var(--gutter) 14svh;
  background: #0B0705;
  overflow: clip;
  color: var(--bone-200);
}

/* ---------- wall, painting, light ---------- */
.hero__wall {
  position: absolute; inset: 0;
  background: url(/assets/img/rock/rock-wall-a.webp) 50% 50% / 1200px auto repeat, #1B130E;
  opacity: .55;
}
.hero__wall::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 62% 45%, rgba(5, 3, 2, 0) 30%, rgba(5, 3, 2, .88) 100%),
    linear-gradient(180deg, rgba(11, 7, 5, 0) 72%, #0B0705 100%);
}

.hero__art {
  position: absolute; z-index: 0;
  top: clamp(2rem, 6svh, 4rem); left: -18vw;
  width: 136vw;
  opacity: .75;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}
.hero__art svg { width: 100%; height: auto; }

.hero__light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 22%, rgba(240, 122, 34, .22) 0%, rgba(163, 38, 14, .10) 38%, rgba(5, 3, 2, 0) 70%);
  opacity: var(--hl, 1);
}

/* ---------- text column ---------- */
.hero__text {
  position: relative; z-index: 2;
  width: 100%; max-width: 58rem;
  margin: 0 auto;
  text-align: center;
}
/* logo mark (SPEC-v4): the fingerprint spiral is a white-on-alpha mask painted with an ember gradient.
   hero.js ignites it (clip rising from the base + gradient sweep + glow); default = finished and static. */
.hero-logo {
  position: relative;
  width: clamp(54px, 15vw, 66px);
  aspect-ratio: 7 / 12;
  margin: 0 auto var(--s-5);
}
.hero-logo__mark, .hero-logo__glow { position: absolute; display: block; }
.hero-logo__mark {
  inset: 0;
  --ig: 0%; --ih: 0; /* hero.js: position (%) and heat (0–1) of the hot front while the mark ignites */
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0) calc(var(--ig) - 2%), rgba(255, 244, 214, calc(.95 * var(--ih))) calc(var(--ig) + 6%), rgba(255, 244, 214, 0) calc(var(--ig) + 24%)),
    linear-gradient(180deg, var(--fire-9) 0%, var(--fire-8) 22%, var(--fire-7) 44%, var(--fire-6) 66%, var(--fire-5) 84%, var(--fire-4) 100%);
  -webkit-mask: url(/assets/img/brand/logo-mask.webp) center / 100% 100% no-repeat;
  mask: url(/assets/img/brand/logo-mask.webp) center / 100% 100% no-repeat;
}
.hero-logo__glow {
  inset: -45% -140%;
  background: radial-gradient(closest-side, rgba(240, 122, 34, .30), rgba(217, 84, 26, .13) 48%, rgba(5, 3, 2, 0) 100%);
  pointer-events: none;
}
/* hidden until hero.js takes over (is-set); failsafe after 3 s */
html.js:not(.reduced) .hero-logo:not(.is-set) { opacity: 0; animation: reveal-failsafe 0s 3s forwards; }
@media (min-width: 960px) { .hero-logo { width: 84px; margin-bottom: var(--s-6); } }
.hero-h1 {
  font-size: var(--fs-h1); font-weight: 360; line-height: 1.04; letter-spacing: -.015em;
  text-wrap: balance;
}
.hero__text .trazo-line { margin: var(--s-2) auto 0; }
.hero-lead {
  max-width: 40ch; margin: var(--s-5) auto 0;
  color: var(--bone-200); text-shadow: var(--legible-shadow); text-wrap: balance;
}
/* VSL: centered under the text */
.hero-vsl { position: relative; z-index: 3; width: 100%; max-width: 52rem; margin: var(--s-6) auto 0; }
.hero-vsl__frame { display: block; width: 100%; aspect-ratio: 16 / 9; }
.hero-vsl__video {
  background: #050302; object-fit: cover;
  border: 1px solid rgba(192, 138, 62, .22); border-radius: var(--r-m); box-shadow: var(--sh-slab);
}
.hero-vsl .yt-frame { width: 100%; aspect-ratio: 16 / 9; }
.hero-vsl__video::cue { font-family: "Alegreya Sans", system-ui, sans-serif; font-size: 1.1em; line-height: 1.3; color: #F3E6CF; background: rgba(5, 3, 2, .78); }
@media (max-width: 599px) { .hero-vsl__video::cue { font-size: 1.5em; } }
/* CC button (captions.js): top-right of the frame, clear of the native bar */
.vsl-cc { position: absolute; top: var(--s-2); right: var(--s-2); }
.vsl-cc__btn, .vsl-cc__menu button {
  min-width: 44px; min-height: 44px; border: 1px solid rgba(192, 138, 62, .5); border-radius: var(--r-s);
  background: rgba(5, 3, 2, .72); color: var(--bone-100); cursor: pointer; font: 600 .9rem/1 var(--font-body); letter-spacing: .08em;
}
.vsl-cc__btn { display: flex; align-items: center; justify-content: center; gap: .4em; padding: 0 .7rem; }
.vsl-cc__lang:empty { display: none; }
.vsl-cc__btn[data-state="on"] { border-color: var(--fire-7); background: rgba(240, 122, 34, .26); color: var(--fire-9); }
.vsl-cc__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 11rem; padding: 4px; border: 1px solid rgba(192, 138, 62, .4); border-radius: var(--r-m); background: rgba(10, 7, 6, .96); }
.vsl-cc__menu button { display: block; width: 100%; padding: 0 .9rem; border: 0; background: none; text-align: left; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }
.vsl-cc__menu button[aria-checked="true"] { color: var(--fire-8); box-shadow: inset 3px 0 var(--fire-6); }
.vsl-cc__btn:hover, .vsl-cc__btn:focus-visible, .vsl-cc__menu button:hover, .vsl-cc__menu button:focus-visible { background: rgba(192, 138, 62, .18); }
/* «Haz clic para activar el audio» (vsl.js): the VSL autoplays muted; this card sits over the picture and restarts it with sound */
.vsl-sound {
  position: absolute; top: 66%; left: 50%; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .75rem;
  max-width: 92%; min-height: 56px; padding: .8rem 1.4rem; border: 1px solid var(--fire-7); border-radius: var(--r-slab); cursor: pointer;
  background: linear-gradient(160deg, rgba(42, 10, 5, .88), rgba(10, 7, 6, .9)); color: var(--fire-9); backdrop-filter: blur(4px);
  font: 500 1.2rem/1.2 var(--font-display); letter-spacing: .01em; text-align: left; box-shadow: 0 0 0 4px rgba(240, 122, 34, .12), 0 8px 30px rgba(0, 0, 0, .55), 0 0 34px rgba(240, 122, 34, .28);
  animation: vsl-glow 2.6s ease-in-out infinite;
}
.vsl-sound[hidden] { display: none; }
.vsl-sound svg { flex: none; color: var(--fire-7); }
.vsl-sound:hover, .vsl-sound:focus-visible { background: linear-gradient(160deg, rgba(74, 15, 7, .92), rgba(20, 5, 3, .92)); color: var(--fire-10); border-color: var(--fire-8); }
@keyframes vsl-glow { 50% { box-shadow: 0 0 0 7px rgba(240, 122, 34, .06), 0 8px 30px rgba(0, 0, 0, .55), 0 0 46px rgba(240, 122, 34, .45); } }
@media (max-width: 599px) { .vsl-sound { padding: .6rem .9rem; font-size: 1rem; gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { .vsl-sound { animation: none; } }
.hero-caption {
  max-width: 34ch; margin: var(--s-5) auto 0;
  font-style: italic; font-size: var(--fs-small); line-height: 1.45; letter-spacing: .01em;
  color: var(--bone-400); text-shadow: var(--legible-shadow);
}

.hero-h1 .mline { padding-bottom: .08em; }

/* ---------- embers (canvas created by hero.js) ---------- */
.hero__embers {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero__camino {
  position: absolute; left: 50%; bottom: 4svh; z-index: 2;
  width: 6px; margin-left: -3px;
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: none;
}
.hero__camino i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: #C08A3E;
  opacity: .5;
}

/* ---------- ≥ 960px: painting on the right, text column on the left ---------- */
@media (min-width: 960px) {
  .hero { padding-bottom: 12svh; }
  .hero__art {
    left: 50%; right: auto; top: 50%;
    width: min(100vw, 170svh);
    aspect-ratio: 1.6;
    translate: -50% -50%;
    opacity: .38;
    -webkit-mask-image: url(/assets/img/masks/pigment-grain.webp);
    mask-image: url(/assets/img/masks/pigment-grain.webp);
    -webkit-mask-size: 512px; mask-size: 512px;
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
  }
  .hero__light {
    background: radial-gradient(55% 60% at 50% 40%, rgba(240, 122, 34, .22) 0%, rgba(163, 38, 14, .10) 38%, rgba(5, 3, 2, 0) 70%);
  }
}
@media (min-width: 960px) and (pointer: fine) {
  .hero__light { mix-blend-mode: screen; }
}

/* short landscape windows: keep the headline on screen */
@media (min-width: 960px) and (max-height: 640px) {
  .hero-lead { margin-top: var(--s-4); }
  .hero-vsl { margin-top: var(--s-5); }
  .hero-caption { margin-top: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__camino i { opacity: .5; }
}