/* ==========================================================================
   MAGNETIK DAY · HERO 3D  (morado #765d9d · solo la fotografía)
   --------------------------------------------------------------------------
   Todo el 3D del sitio vive aquí y SOLO afecta a la portada (.hero3d).

   Variables de estado (las escribe hero3d.js):
     --p   progreso de scroll del hero  0 → 1
     --mx  posición del ratón en X      -1 → 1
     --my  posición del ratón en Y      -1 → 1

   Las letras 3D son volumen REAL: hero3d.js apila N copias del texto en el
   eje Z (translateZ) y esta hoja las ilumina de delante hacia atrás.

   La escena es deliberadamente limpia: fotografía de fondo + las letras.
   Sin halos, sin nieblas, sin rejillas, sin partículas.
   ========================================================================== */

/* El envoltorio reserva scroll extra: mientras recorre esa franja el hero se
   queda fijo y la explosión ocurre a la vista, en lugar de irse hacia arriba. */
.hero3d-wrap{
  position: relative;
  height: 178vh;
}

.hero3d{
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  perspective: 1600px;
  perspective-origin: 50% 42%;
  background: #765d9d;
  color: #fff;
}

/* ── Escena: gira con el ratón ─────────────────────────────────────────────
   --mx y --my se escriben AQUÍ y no en .hero3d: cambiar una variable en un
   ancestro obliga al navegador a recalcular el estilo de todo lo que cuelga
   de él. Poniéndola en el elemento más bajo posible, el recálculo por frame
   baja de ~1700 nodos a una decena.                                        */
.hero3d__scene{
  --mx: 0;
  --my: 0;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--my) * -3.4deg))
    rotateY(calc(var(--mx) *  4.2deg));
  will-change: transform;
}

.hero3d__layer{
  position: absolute;
  transform-style: preserve-3d;
}

/* ── La fotografía ─────────────────────────────────────────────────────── */
.hero3d__bg{
  inset: -8%;
  transform:
    translate3d(calc(var(--mx) * -18px), calc(var(--my) * -14px), -260px)
    scale(calc(1.08 + var(--p) * 0.22));
  will-change: transform;
}
.hero3d__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* ── Velo: oscurece arriba (para el menú) y abajo (para la transición),
      y deja limpia la franja central donde van las letras ─────────────── */
.hero3d__veil{
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(58,42,90,.86) 0%,
      rgba(58,42,90,.58) 12%,
      rgba(80,58,116,.20) 30%,
      rgba(80,58,116,.14) 58%,
      rgba(58,42,90,.62) 86%,
      rgba(118,93,157,.94) 100%);
}
/* La opacidad la escribe hero3d.js directamente (ver readScroll) */

/* ── Capa 6 · esquinas ornamentales ────────────────────────────────────── */
.hero3d__corner{
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(247,224,163,.55);
  opacity: 0;
  animation: h3dCorner .9s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
.hero3d__corner--tl{ top: 118px; left: 34px; border-right: 0; border-bottom: 0 }
.hero3d__corner--tr{ top: 118px; right: 34px; border-left: 0; border-bottom: 0 }
.hero3d__corner--bl{ bottom: 34px; left: 34px; border-right: 0; border-top: 0 }
.hero3d__corner--br{ bottom: 34px; right: 34px; border-left: 0; border-top: 0 }

/* ==========================================================================
   CONTENIDO
   ========================================================================== */
.hero3d__content{
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 9.5rem 1.5rem 13rem;
  text-align: center;
  transform-style: preserve-3d;
  /* El transform y la opacidad los escribe hero3d.js directamente: si se
     hicieran con variables CSS, cada frame invalidaría todo el subárbol. */
  will-change: transform, opacity;
}

/* ── Etiqueta superior ─────────────────────────────────────────────────── */
.hero3d__tag{
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.7rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #f7e0a3;
  text-shadow:0 2px 14px rgba(30,18,52,.9), 0 1px 3px rgba(30,18,52,.8);
  --tz: 26px;
  animation: h3dUp .9s cubic-bezier(.22,1,.36,1) .1s both;
}
.hero3d__tag::before,
.hero3d__tag::after{
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.hero3d__tag::after{ background: linear-gradient(270deg, transparent, currentColor) }

/* ── Titular 3D ────────────────────────────────────────────────────────── */
.hero3d__title{
  /* Aquí es donde se escribe --p desde hero3d.js, y --e se deriva justo aquí:
     las letras y los cuadrados cuelgan de este elemento, así que el recálculo
     por frame se queda en su subárbol y no en todo el hero.
     --e se queda a 0 durante el primer tramo del scroll (el titular se ve
     entero) y luego recorre 0 → 1. Sin esto la explosión termina antes de
     que dé tiempo a verla. */
  --p: 0;
  --e: clamp(0, calc((var(--p) - .16) / .66), 1);

  position: relative;
  margin: 0 0 2.2rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 7.4vw, 6.2rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  transform-style: preserve-3d;
  animation: h3dFloat 9s ease-in-out 1.4s infinite both;
}
.hero3d__line{
  display: block;
  transform-style: preserve-3d;
  white-space: nowrap;
}
.hero3d__line--l1{ transform: translateZ(0) }
.hero3d__line--l2{ transform: translateZ(26px) }
.hero3d__line--l3{
  transform: translateZ(74px);
  margin-top: .04em;
  font-size: clamp(3.1rem, 10.4vw, 8.4rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.08;
}

/* ── Palabra: contenedor de letras ─────────────────────────────────────────
   .ch      → una letra; guarda su trayectoria de explosión (--dx/--dy/--dz…)
   .ch__in  → capa interna; hace la entrada, para no pelear con el transform
              de explosión de .ch
   .ch__lyr → copias apiladas hacia atrás (las crea hero3d.js)
   .ch__f   → cara frontal
   Sin JS la palabra conserva su texto y una sombra de respaldo.            */
.w3d{
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  color: #fff;
}

/* Respaldo si JavaScript no construye las capas */
.w3d:not(.w3d--built){
  text-shadow:
    1px 1px 0 #5b3f8f, 2px 2px 0 #553a85, 3px 3px 0 #4e357b,
    4px 4px 0 #483171, 5px 5px 0 #412c67, 6px 6px 0 #3b275d,
    0 18px 40px rgba(30,18,52,.55);
}

/* La letra se abre hacia los lados y gira sobre sí misma con el scroll */
.ch{
  display: inline-block;
  position: relative;
  margin-right: -.012em;
  transform-style: preserve-3d;
  transform:
    translate3d(
      calc(var(--e) * var(--dx, 0) * 1px),
      calc(var(--e) * var(--dy, 0) * 1px),
      calc(var(--e) * var(--dz, 0) * 1px))
    rotateX(calc(var(--e) * var(--rx, 0) * 1deg))
    rotateY(calc(var(--e) * var(--ry, 0) * 1deg))
    rotateZ(calc(var(--e) * var(--rz, 0) * 1deg));
  opacity: calc(1 - var(--e) * .6);
}

/* La entrada vive aquí para no chocar con el transform de explosión */
.ch__in{
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  animation: chIn .95s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--d, 0s);
}

.ch__lyr,
.ch__f{
  display: block;
  white-space: pre;
}

.ch__lyr{
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
}

.ch__f{
  position: relative;
  z-index: 1;
  /* Cara clara contra extrusión oscura: es lo que hace que las letras se
     despeguen de la fotografía sin necesidad de oscurecerla. */
  background: linear-gradient(180deg,
    #f4edff 0%, #ded1f4 22%, #bca5e0 52%, #9175bd 78%, #6f56a0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Cara dorada para la palabra acento */
.w3d--gold .ch__f{
  background: linear-gradient(180deg,
    #fffbe8 0%, #f7e0a3 22%, #e8c766 44%, #c9a227 66%, #f4d68a 84%, #fff8dc 100%);
  background-size: 100% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(60,42,90,.5));
  animation: w3dShine 6.5s ease-in-out infinite;
}
.w3d--gold:not(.w3d--built){
  text-shadow:
    1px 1px 0 #a8811a, 2px 2px 0 #9c7718, 3px 3px 0 #906d16,
    4px 4px 0 #846314, 5px 5px 0 #785912, 6px 6px 0 #6c4f10,
    0 18px 40px rgba(30,18,52,.55);
}

/* ── Lluvia de cuadrados ──────────────────────────────────────────────────
   Salen del titular, giran en 3D y se van hacia los lados al bajar.       */
.hero3d__debris{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 3;
}
.dbr{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s, 12px);
  height: var(--s, 12px);
  margin-left: calc(var(--s, 12px) / -2);
  margin-top: calc(var(--s, 12px) / -2);
  background: var(--c, #e8c766);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(30,18,52,.35);
  opacity: calc(var(--e) * 2.2 * var(--o, 1));
  transform:
    translate3d(
      calc(var(--sx, 0) * 1px + var(--e) * var(--dx, 0) * 1px),
      calc(var(--sy, 0) * 1px + var(--e) * var(--dy, 0) * 1px),
      calc(var(--e) * var(--dz, 0) * 1px))
    rotateX(calc(var(--e) * var(--rx, 0) * 1deg))
    rotateY(calc(var(--e) * var(--ry, 0) * 1deg))
    rotateZ(calc(var(--e) * var(--rz, 0) * 1deg))
    scale(calc(1 - var(--e) * .25));
}

/* ── Subtítulo ─────────────────────────────────────────────────────────── */
.hero3d__sub{
  max-width: 640px;
  margin: 0 auto 2.6rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.85;
  color: #fff;
  text-shadow:0 2px 18px rgba(30,18,52,.85), 0 1px 4px rgba(30,18,52,.75);
  --tz: 24px;
  animation: h3dUp .9s cubic-bezier(.22,1,.36,1) .9s both;
}
.hero3d__sub strong{
  font-weight: 700;
  font-style: normal;
  color: #f7e0a3;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.hero3d__actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  --tz: 30px;
  animation: h3dUp .9s cubic-bezier(.22,1,.36,1) 1.1s both;
}
/* Sobre la fotografía el botón secundario necesita fondo propio.
   El hero usa .btn--call, que en styles.css tiene fondo blanco al 10%: sobre
   una zona clara de la foto se queda invisible y parece texto suelto. Se le da
   el mismo fondo oscuro translúcido. */
.hero3d__actions .btn--outline-white,
.hero3d__actions .btn--call{
  background: rgba(58,42,90,.62);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(30,18,52,.35);
}
/* El hover dorado de .btn--call está en styles.css, que se carga ANTES que este
   fichero: sin repetirlo aquí, la regla de arriba (misma especificidad pero
   posterior) lo taparía y el botón no cambiaría al pasar el ratón. */
.hero3d__actions .btn--call:hover{
  background: var(--gold);
  color: #3a2a0c;
}

/* ── Indicador de scroll ───────────────────────────────────────────────── */
.hero3d__scroll{
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 10px rgba(40,25,66,.7);
  /* La opacidad la escribe hero3d.js directamente */
}
.hero3d__scroll i{
  position: relative;
  display: block;
  width: 1.5px;
  height: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  overflow: hidden;
}
.hero3d__scroll i::after{
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 1.5px;
  height: 30%;
  background: #f7e0a3;
  animation: h3dCue 2.1s cubic-bezier(.6,0,.4,1) infinite;
}

/* ── Transición hacia la sección siguiente ─────────────────────────────── */
.hero3d__fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(118,93,157,0) 0%, rgba(118,93,157,.65) 62%, #765d9d 100%);
  pointer-events: none;
}

/* ==========================================================================
   EL MENÚ SOBRE LA FOTOGRAFÍA
   El logo de la marca es violeta oscuro y se perdería sobre el morado: se le
   añade un halo claro para despegarlo, igual que a los enlaces.
   ========================================================================== */
.nav--over .nav__logo img{
  filter:
    brightness(1.08)
    drop-shadow(0 0 8px rgba(255,255,255,.9))
    drop-shadow(0 0 22px rgba(255,255,255,.55))
    drop-shadow(0 2px 6px rgba(30,18,52,.55));
}
.nav--over .nav__links a{
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 12px rgba(30,18,52,.85);
}
.nav--over .nav__links a:hover,
.nav--over .nav__links a.active{ color: var(--gold); }
.nav--over .nav__login{
  background: rgba(58,42,90,.55);
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(30,18,52,.35);
}
.nav--over .nav__burger span{ box-shadow: 0 1px 6px rgba(30,18,52,.7) }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes chIn{
  0%   { opacity: 0; transform: translate3d(0, .52em, -340px) rotateX(-92deg) scale(.8) }
  55%  { opacity: 1 }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) }
}
/* Inclinación en reposo: sin ella la extrusión queda escondida detrás de la
   cara y no se aprecia el volumen. */
@keyframes h3dFloat{
  0%, 100% { transform: rotateX(-10deg) rotateY(-16deg) translateZ(0) }
  50%      { transform: rotateX(-6.5deg) rotateY(-9deg) translateZ(24px) }
}
@keyframes h3dUp{
  from { opacity: 0; transform: translateY(26px) translateZ(0) }
  to   { opacity: 1; transform: translateY(0) translateZ(var(--tz, 0px)) }
}
@keyframes h3dCorner{
  from { opacity: 0; transform: scale(.4) }
  to   { opacity: .85; transform: scale(1) }
}
@keyframes h3dCue{
  0%   { top: -30%; opacity: 0 }
  30%  { opacity: 1 }
  100% { top: 100%; opacity: 0 }
}
@keyframes w3dShine{
  0%, 100% { background-position: 50% 0% }
  50%      { background-position: 50% 100% }
}

/* ==========================================================================
   ADAPTACIÓN A PANTALLAS
   ========================================================================== */
@media (max-width: 900px){
  .hero3d-wrap{ height: 152vh }
  .hero3d{ perspective: 1100px }
  .hero3d__corner{ width: 38px; height: 38px }
  .hero3d__corner--tl,
  .hero3d__corner--tr{ top: 96px }
  .hero3d__corner--tl,
  .hero3d__corner--bl{ left: 18px }
  .hero3d__corner--tr,
  .hero3d__corner--br{ right: 18px }
  .hero3d__corner--bl,
  .hero3d__corner--br{ bottom: 18px }
  .hero3d__content{ padding: 8rem 1.25rem 8.5rem }
  .hero3d__title{ font-size: clamp(2.1rem, 9.6vw, 3.4rem) }
  .hero3d__line--l3{ font-size: clamp(2.7rem, 14vw, 4.6rem) }
  .hero3d__bg{ inset: -14% }
}

@media (max-width: 560px){
  .hero3d__line{ white-space: normal }
  .hero3d__scroll i{ height: 24px }
  .hero3d__corner{ display: none }
  /* En móvil el texto ocupa más líneas sobre la parte clara de la foto:
     el velo se refuerza en la franja central para que se lea. */
  .hero3d__veil{
    background:
      linear-gradient(180deg,
        rgba(58,42,90,.88) 0%,
        rgba(58,42,90,.62) 12%,
        rgba(70,50,104,.44) 30%,
        rgba(70,50,104,.40) 72%,
        rgba(58,42,90,.74) 90%,
        rgba(118,93,157,.96) 100%);
  }
}

/* ==========================================================================
   MÓVIL · VERSIÓN LIGERA
   --------------------------------------------------------------------------
   Medido con el móvil emulado y la CPU frenada 4×: con 384 capas, filtros y
   animaciones continuas el hero se quedaba en 30 fps. Aquí se quita todo lo
   que cuesta por frame y se deja lo que da el efecto: la inclinación fija y
   la explosión al bajar. El número de capas lo baja hero3d.js.
   ========================================================================== */
@media (max-width: 820px), (hover: none){
  /* Sin flotación continua: animar el transform de un titular con cientos de
     capas 3D obliga a recomponer la escena en cada frame. Se deja fija. */
  .hero3d__title{
    transform: rotateX(-9deg) rotateY(-13deg);
    animation: none;
  }

  /* La escena no gira sola */
  .hero3d__scene{ transform: none }

  /* Los filtros son lo más caro que hay en móvil: fuera */
  .w3d--gold .ch__f{ filter: none; animation: none }

  /* Sin sombras por cuadrado */
  .dbr{ box-shadow: none }

  /* Entrada más corta */
  .ch__in{ animation-duration: .7s }

  /* Menos profundidad de perspectiva = menos trabajo de composición */
  .hero3d{ perspective: 900px }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero3d__scene,
  .hero3d__bg,
  .hero3d__content{ transform: none !important }
  .hero3d__content{ opacity: 1 !important }
  .hero3d__veil{ opacity: 1 !important }
  .hero3d__title,
  .ch,
  .ch__in,
  .dbr,
  .w3d--gold .ch__f,
  .hero3d__tag,
  .hero3d__sub,
  .hero3d__actions{ animation: none !important }
  /* Se conserva la inclinación para que el volumen siga leyéndose */
  .hero3d__title{ transform: rotateX(-10deg) rotateY(-16deg) !important }
  .ch,
  .dbr{ transform: none !important; opacity: 1 !important }
  .dbr{ display: none !important }
  .hero3d__scroll{ opacity: 1 !important }
}