/* ==========================================================================
   sotowismify · 10-hero (v3, 17-oct-2026) — tema claro, estilo Ramp
   Píldora · titular · campo de email (botón lima) · hueco del vídeo (solo el play, que sigue al ratón) ·
   retrato de Iván asomando tras la parte derecha del vídeo · «IVAN» en grafiti gris junto a la cabeza.
   Capas: nombre (1) < retrato (2) = texto (2) < vídeo (3): al abrirse a pantalla completa, el vídeo lo tapa todo.
   La entrada es CSS (no espera a GSAP): primero el vídeo, luego el retrato con fundido subiendo, luego el nombre.
   ========================================================================== */
.s-hero { position: relative; padding: clamp(112px, 9.5vw, 132px) 0 clamp(64px, 8vw, 110px); }
.s-hero .h-wrap { position: relative; }

/* ---------- Texto ---------- */
.s-hero .h-copy { position: relative; z-index: 2; }
.s-hero .h-kicker { margin: 0; display: flex; }
.s-hero .h-kicker-pill {
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 7px;
  background: rgba(15, 20, 30, 0.05); border: 1px solid rgba(15, 20, 30, 0.06);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-1);
}
.s-hero .h-title {
  margin: 18px 0 0; max-width: 18.6em;
  font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; font-weight: 650; letter-spacing: -0.03em; color: var(--fg);
  text-wrap: balance;
}
.s-hero .h-dim { color: rgba(20, 24, 31, 0.42); }
.s-hero .h-sub { margin: 14px 0 0; max-width: 40em; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.5; color: var(--fg-2); }

/* Campo de email (como el de Ramp): caja blanca con borde fino y el botón dentro */
.s-hero .h-email {
  margin-top: 26px; display: flex; align-items: center; gap: 6px;
  width: min(100%, 560px); padding: 6px;
  background: linear-gradient(180deg, #ffffff, #fbfaf7);
  border: 1px solid rgba(15, 20, 30, 0.12); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(60, 50, 35, 0.07), inset 0 1px 0 #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.s-hero .h-email:focus-within { border-color: rgba(15, 20, 30, 0.32); box-shadow: 0 14px 36px rgba(60, 50, 35, 0.12), 0 0 0 4px rgba(15, 20, 30, 0.05); }
.s-hero .h-email.is-error { border-color: rgba(180, 40, 30, 0.55); }
.s-hero .h-email-in {
  flex: 1; min-width: 0; height: 54px; padding: 0 14px 0 16px;
  border: 0; outline: 0; background: transparent; color: var(--fg);
  font: inherit; font-size: 17px; letter-spacing: -0.01em;
}
.s-hero .h-email-in::placeholder { color: rgba(20, 24, 31, 0.5); }
.s-hero .h-email-btn.btn { --h: 54px; flex: none; border-radius: 10px; padding: 0 24px; font-size: 15px; }
.s-hero .h-note { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-3); min-height: 1.6em; }
.s-hero .h-note.is-error { color: #a3271c; }

/* ---------- Escenario: retrato + vídeo ---------- */
.s-hero .h-stage { position: relative; z-index: 3; margin-top: clamp(30px, 3.4vw, 48px); } /* encima del texto: el nombre recibe el ratón y el vídeo abierto lo tapa todo */

/* Retrato: a la altura del texto, de la línea del titular al borde del vídeo (el pecho apenas entra en la caja) */
.s-hero .h-ivan {
  position: absolute; z-index: 2; margin: 0;
  right: 2%; bottom: calc(100% - 26px);
  width: clamp(250px, 30.5vw, 440px);
  pointer-events: none;
}
.s-hero .h-ivan-img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(60, 50, 35, 0.12)); }
/* «IVAN» en grafiti gris, junto a la cabeza (lado derecho), un poco por detrás */
.s-hero .h-name {
  position: absolute; z-index: 1; left: 63%; top: 13%;
  width: clamp(84px, 9vw, 132px);
  rotate: -9deg; transform-origin: 0 50%;
  pointer-events: auto; /* hover GSAP (hero.js); el retrato de encima no captura el ratón */
}
/* GSAP anima la imagen de dentro; la rotación de reposo vive en el contenedor (GSAP fija rotate:none en lo que mueve) */
.s-hero .h-name-img { display: block; width: 100%; height: auto; transform-origin: 50% 60%; }

/* Hueco del vídeo. .h-screen es la «pantalla»: sin JS ocupa la caja; con el efecto (.is-fx) mide lo que la ventana
   y se recorta con clip-path al tamaño de la caja; abrirla = llevar el recorte a 0 (sin escalar: nada se deforma).
   --e (0→1) lo mueve hero.js; --vw/--vh/--ix/--iy los mide hero.js en px. */
.s-hero .h-video {
  --e: 0; --r: 22px;
  position: relative; z-index: 3; isolation: isolate;
  aspect-ratio: 16 / 8.6; border-radius: var(--r);
  box-shadow: 0 40px 90px rgba(60, 50, 35, 0.12);
}
.s-hero .h-screen {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r);
  display: grid; place-items: center;
  background:
    radial-gradient(70% 90% at 50% 40%, #fbfaf7 0%, transparent 70%),
    linear-gradient(180deg, #f6f4f0 0%, #efece6 100%);
  cursor: pointer;
}
.s-hero .h-video.is-fx .h-screen {
  z-index: 1; inset: auto; left: 50%; top: 50%; width: var(--vw); height: var(--vh); translate: -50% -50%; border-radius: 0;
  clip-path: inset(calc(var(--iy) * (1 - var(--e))) calc(var(--ix) * (1 - var(--e))) round calc(var(--r) * (1 - var(--e))));
}
.s-hero .h-video.is-big .h-screen { will-change: clip-path; }
/* borde fino de la caja (encima de la pantalla) y marco con puntos dentro de la pantalla, en el sitio de la caja;
   los dos se apagan al abrirse (y el marco, mientras se ve el vídeo) */
.s-hero .h-video::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: var(--r);
  border: 1px solid rgba(15, 20, 30, 0.10); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9);
  opacity: calc(1 - var(--e) * 1.8);
}
.s-hero .h-frame {
  position: absolute; z-index: 0; pointer-events: none; inset: clamp(10px, 1.4vw, 18px); border-radius: 14px;
  border: 1px solid rgba(15, 20, 30, 0.06); background: radial-gradient(rgba(40, 34, 24, 0.09) 0.9px, transparent 1.25px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%);
  opacity: calc(1 - var(--e) * 1.8);
}
.s-hero .h-video.is-fx .h-frame { inset: calc(var(--iy) + clamp(10px, 1.4vw, 18px)) calc(var(--ix) + clamp(10px, 1.4vw, 18px)); }
.s-hero .h-video.has-media .h-frame { display: none; }
.s-hero .h-screen video, .s-hero .h-screen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #0d0d0d;
  opacity: 0; transition: opacity 0.6s ease;
}
.s-hero .h-video.has-media .h-screen video, .s-hero .h-screen iframe { opacity: 1; }
.s-hero .h-video.is-playing .h-screen { cursor: default; }

/* Play (lima): solo sigue al ratón dentro del hueco (hero.js). Sin ondas. */
.s-hero .h-play { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 50%; transition: opacity 0.4s ease; }
.s-hero .h-play-core {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent);
  box-shadow: 0 18px 44px rgba(120, 160, 0, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.06), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.s-hero .h-play-tri { width: 0; height: 0; margin-left: 7px; border-left: 24px solid #14181f; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.s-hero .h-video.is-playing .h-play { opacity: 0; pointer-events: none; }
.s-hero .h-play:focus-visible { outline-offset: 10px; border-radius: 50%; }
/* «Activar sonido» (si el navegador no deja empezar con sonido) */
.s-hero .h-sound {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(24px, 5vh, 56px); translate: -50% 0;
  padding: 11px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #14181f;
  background: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.s-hero .h-sound[hidden] { display: none; }
.s-hero .h-soon {
  position: absolute; left: 50%; bottom: 14%; translate: -50% 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  opacity: 0; transition: opacity 0.35s ease;
}
.s-hero .h-video.is-fx .h-soon { bottom: auto; top: calc(50% + 70px); }
.s-hero .h-soon.is-on { opacity: 1; }

/* ---------- Entrada (CSS, primer frame): vídeo → retrato (fundido subiendo) → nombre ---------- */
@media (prefers-reduced-motion: no-preference) {
  .s-hero .h-copy > * { animation: h-up 0.95s var(--ease-out) both; }
  .s-hero .h-kicker { animation-delay: 0.05s; }
  .s-hero .h-title { animation-delay: 0.12s; }
  .s-hero .h-sub { animation-delay: 0.24s; }
  .s-hero .h-email { animation-delay: 0.34s; }
  .s-hero .h-note { animation-delay: 0.42s; }
  .s-hero .h-video { animation: h-rise 1s var(--ease-out) 0.25s both; }
  .s-hero .h-ivan-img { animation: h-in 1s var(--ease-out) 1.05s both; }
  .s-hero .h-name { animation: h-write 0.9s var(--ease-out) 1.6s both; }
}
@keyframes h-up { from { opacity: 0; translate: 0 22px; } }
@keyframes h-rise { from { opacity: 0; translate: 0 50px; } }
/* el retrato aparece (fundido) subiendo un poco hasta su sitio, cuando el vídeo ya está */
@keyframes h-in { from { opacity: 0; translate: 0 16%; } }
/* «IVAN» se descubre de izquierda a derecha */
@keyframes h-write { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .s-hero .h-title { max-width: 15em; }
  .s-hero .h-ivan { width: clamp(220px, 32vw, 340px); right: 0; }
}
@media (max-width: 760px) {
  .s-hero { padding-top: 104px; }
  .s-hero .h-title { font-size: clamp(28px, 7.6vw, 38px); line-height: 1.1; max-width: none; }
  .s-hero .h-email { flex-direction: column; align-items: stretch; padding: 6px; }
  .s-hero .h-email-in { height: 50px; font-size: 16px; }
  .s-hero .h-email-btn.btn { --h: 50px; width: 100%; }
  .s-hero .h-stage { margin-top: clamp(170px, 50vw, 230px); }
  .s-hero .h-ivan { width: min(60vw, 280px); right: 0; bottom: calc(100% - 22px); }
  .s-hero .h-name { width: clamp(70px, 20vw, 96px); left: auto; right: 76%; top: 20%; rotate: 7deg; transform-origin: 100% 50%; }
  .s-hero .h-partner-box { padding: 26px 24px; }
  .s-hero .h-partner-pill { font-size: 12px; }
  .s-hero .h-video { --r: 18px; aspect-ratio: 4 / 3.4; }
  .s-hero .h-play { width: 78px; height: 78px; }
  .s-hero .h-play-tri { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
}

/* Con el vídeo abierto, fuera el CTA flotante (hero.js pone html.h-video-big) */
html.h-video-big .fcta-wrap { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease; }

/* ---------- Verificados por Shopify (bajo el vídeo) ---------- */
.s-hero .h-partner { position: relative; z-index: 2; margin-top: clamp(56px, 7vw, 96px); display: grid; justify-items: center; gap: 16px; }
.s-hero .h-partner-pill {
  margin: 0; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px; border-radius: 999px;
  background: #ffffff; border: 1px solid rgba(15, 20, 30, 0.10);
  box-shadow: 0 8px 22px rgba(60, 50, 35, 0.08), inset 0 1px 0 #fff;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg);
}
.s-hero .h-verified { flex: none; filter: drop-shadow(0 2px 4px rgba(120, 160, 0, 0.35)); }
.s-hero .h-partner-box {
  width: min(100%, 560px); padding: clamp(28px, 3.4vw, 42px) clamp(28px, 4vw, 54px);
  display: grid; place-items: center; border-radius: 20px;
  background:
    radial-gradient(rgba(40, 34, 24, 0.14) 0.9px, transparent 1.25px) 0 0 / 12px 12px,
    linear-gradient(165deg, #f7f5f1 0%, #f2efe9 100%);
  border: 1px solid rgba(15, 20, 30, 0.09);
  box-shadow: 0 18px 46px rgba(60, 50, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.s-hero .h-partner-logo { width: min(100%, 330px); height: auto; }
@media (hover: hover) { .s-hero .h-partner-pill:hover .h-verified { rotate: 20deg; transition: rotate 0.5s var(--ease); } }

/* Al terminar la entrada, fuera las animaciones CSS: si ScrollTrigger vuelve a montar el pin (redimensionar la
   ventana, barra del navegador en móvil…) mueve el escenario en el DOM y las animaciones empezarían de nuevo. */
.s-hero.h-in-done .h-copy > *, .s-hero.h-in-done .h-video, .s-hero.h-in-done .h-ivan-img, .s-hero.h-in-done .h-name { animation: none !important; }