/* ============================================================
   Intro estilo ScrollExpandMedia (vanilla) · standalone landing-v5 · dark
   1) Imagen del campo de fondo (se desvanece).
   2) La computadora se EXPANDE de chica a full.
   3) Fondo dark detrás de la computadora.
   4) Título "Miralo funcionando" que se separa al scrollear.
   Al terminar la expansión: entran celular + audit trail.
   ============================================================ */

html {
  --exp: 0;
  --asm-sides: 0;
  --campo-src: url('assets/img/dither/campo1-g2.png');
}

/* Fondo dark detrás de la computadora */
body.mode-expand .viewport-wrap {
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background-color: #0b0b14;
  background-image:
    radial-gradient(120% 75% at 50% -12%, rgba(30, 91, 255, 0.08), rgba(3, 60, 204, 0) 58%),
    radial-gradient(rgba(107, 143, 255, 0.04) 1px, transparent 1px);
  background-size: auto, 26px 26px;
  background-position: center top, center center;
}

/* Espacio de scroll para la intro */
.assembly-anchor { height: 240vh; pointer-events: none; }

/* Foto del campo (dithered) — se desvanece */
.campo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.55)),
    var(--campo-src, url('assets/img/dither/campo1-g2.png'));
  background-size: cover;
  background-position: center;
  opacity: clamp(0, calc(1 - var(--exp, 0) * 1.15), 1);
  pointer-events: none;
}

/* Escena sobre el fondo */
body.mode-expand .stage { position: relative; z-index: 2; }

/* La computadora se expande de chica a full Y queda centrada */
body.mode-expand .laptop-col .macbook {
  transform:
    translateX(calc(var(--laptop-cx, 0px) * (1 - var(--asm-sides, 0))))
    translateY(var(--laptop-y, 0px))
    scale(calc(var(--laptop-scale, 1) * (0.30 + var(--exp, 0) * 0.70)));
  transform-origin: center center;
  transition: none;
}
body.mode-expand .macbook .base,
body.mode-expand .macbook .notch { opacity: 1; }

/* Macbook chassis DARK: el mockup-orig usa gradientes claros para el chasis;
   los overrideamos para tono oscuro. La base + notch quedan grises grafito. */
.macbook .base:before {
  background: linear-gradient(#3a3a3e, #2e2e30 55%, #1f1f21 55%, #181818 56%, #222 61%, #2a2a2a 84%, #161616 89%, rgba(0,0,0,.01) 98%) !important;
}
.notch {
  background: #2a2a30 !important;
  box-shadow: -5px -1px 3px rgba(0, 0, 0, 0.5) inset, 5px -1px 3px rgba(0, 0, 0, 0.5) inset !important;
}
/* El borde plástico del screen */
.screen:before {
  border-color: #3a3a40 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9) inset, 0 0 1px 2px rgba(255, 255, 255, 0.10) inset !important;
}

/* Portada estática: pantalla blanca con logo SV BLANCO sobre fondo dark.
   Cubre todo hasta que arranca la demo. */
.screen-portada {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #0b0b14;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.screen-portada-logo {
  width: 42%;
  max-width: 340px;
  height: auto;
  filter: invert(1); /* logo blanco sobre dark */
}
body.demo-live .screen-portada {
  opacity: 0;
}

/* Cursor dentro de la pantalla */
.screen-cursor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: left 0.6s cubic-bezier(.4,.05,.2,1),
              top 0.6s cubic-bezier(.4,.05,.2,1),
              opacity 0.35s ease;
}
.screen-cursor.show { opacity: 1; }
.screen-cursor svg {
  position: absolute;
  left: -1px; top: -1px;
  width: 24px; height: 24px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.screen-cursor .sc-ring {
  position: absolute;
  left: -19px; top: -19px;
  width: 38px; height: 38px;
  border: 2.5px solid var(--accent2, #1e5bff);
  border-radius: 50%;
  opacity: 0;
  animation: scPulse 1.7s ease-out infinite;
}
@keyframes scPulse {
  0% { transform: scale(0.35); opacity: 0.85; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Título CanvasText — dos palabras que se separan */
.intro-title {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--exp, 0) * 1.5), 1);
}
.intro-canvas {
  display: block;
  filter: drop-shadow(0 3px 22px rgba(30, 91, 255, 0.45));
  will-change: transform;
}
.intro-canvas.it-1 { transform: translateX(calc(var(--exp, 0) * -44vw)); }
.intro-canvas.it-2 { transform: translateX(calc(var(--exp, 0) * 44vw)); }
/* Versión texto estática (sin animación canvas) */
.intro-word {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(54px, 11vw, 138px);
  letter-spacing: -0.045em;
  line-height: 0.96;
  color: #ffffff;
  text-align: center;
  will-change: transform;
  text-shadow: 0 3px 22px rgba(30,91,255,0.45);
}
.intro-word.it-1 { transform: translateX(calc(var(--exp, 0) * -44vw)); }
.intro-word.it-2 { transform: translateX(calc(var(--exp, 0) * 44vw)); }

/* Celular + audit trail entran después de la expansión */
body.mode-expand .phone-col {
  transform: translateX(calc((1 - var(--asm-sides, 1)) * -195%));
  opacity: var(--asm-sides, 1);
  transition: none;
}
body.mode-expand .trail {
  transform: translateX(calc((1 - var(--asm-sides, 1)) * 135%));
  opacity: var(--asm-sides, 1);
  transition: none;
}

/* Steps comprimidos a 30vh c/u en desktop, 60dvh en mobile */
.scrolly .step-anchor { height: 30vh; }
@media (max-width: 720px) {
  .scrolly .step-anchor { height: 60dvh; }
  .assembly-anchor { height: 140vh; }
  /* En mobile el celular ya está stacked debajo (no slide lateral). */
  body.mode-expand .phone-col {
    transform: none !important;
    opacity: 1 !important;
  }
  /* Trail: NO usar el transform side-slide; en mobile se controla 100%
     desde styles.css como drawer (transform translateY).
     Reseteamos solo la X, dejando que el drawer maneje la Y. */
  body.mode-expand .trail {
    opacity: 1 !important;
  }
}
@media (min-width: 721px) and (max-width: 1023px) {
  body.mode-expand .phone-col {
    transform: none !important;
    opacity: 1 !important;
  }
  body.mode-expand .trail {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { --exp: 1; --asm-sides: 1; }
  .campo-bg, .screen-dim, .intro-title { opacity: 0; }
}