/* ============================================================
   Intro estilo ScrollExpandMedia (port vanilla).
   1) Imagen de fondo = foto del campo (se desvanece al scrollear).
   2) Una computadora que se EXPANDE desde chica hasta tamaño full.
   3) Fondo blanco detrás de la computadora.
   4) "Socio Virtual" como título grande que se separa (Socio ←, Virtual →).
   Al terminar la expansión: entran celular + audit trail y corre la narrativa.
   ============================================================ */

html {
  --exp: 0;
  --asm-sides: 0;
  /* Fondo del campo (dithered). Default: foto 1, g2. Lo cambia el selector. */
  --campo-src: url('/landing-v8/demo/assets/img/dither/campo1-g2.png');
}

/* Sin header: la intro ocupa todo el viewport desde arriba.
   Fondo de la DEMO (se ve cuando el campo se desvanece): minimalista,
   off-white con un glow azul muy sutil arriba y una grilla de puntos tenue. */
body.mode-expand .viewport-wrap {
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: #fafbfc;
  background-image:
    radial-gradient(120% 75% at 50% -12%, rgba(3, 60, 204, 0.07), rgba(3, 60, 204, 0) 58%),
    radial-gradient(rgba(15, 49, 89, 0.05) 1px, transparent 1px);
  background-size: auto, 26px 26px;
  background-position: center top, center center;
}

/* Espacio de scroll para la intro (expansión + entrada de costados) */
.assembly-anchor { height: 240vh; pointer-events: none; }

/* (1) Foto del campo de fondo (dithered) — se desvanece */
.campo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.20)),
    var(--campo-src, url('/landing-v8/demo/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;
}

/* La escena por encima del fondo */
body.mode-expand .stage { position: relative; z-index: 2; }

/* (2) La computadora se expande de chica a full Y queda CENTRADA en el viewport.
   --laptop-cx (medido en vivo por expand.js) compensa el offset del grid;
   se libera a la posición de la grilla a medida que entran los costados. */
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; }

/* (3) Portada estática: pantalla blanca + logo Socio Virtual negro al centro.
   Cubre todo (incluida la barra Chrome). Se mantiene hasta que arranca la demo. */
.screen-portada {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #ffffff;
  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: brightness(0); /* logo en negro */
}
body.demo-live .screen-portada {
  opacity: 0;
}

/* Cursor que señala el foco dentro de la pantalla de la computadora */
.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.45));
}
.screen-cursor .sc-ring {
  position: absolute;
  left: -19px; top: -19px;
  width: 38px; height: 38px;
  border: 2.5px solid var(--accent, #033CCC);
  border-radius: 50%;
  opacity: 0;
  animation: scPulse 1.7s ease-out infinite;
}
@keyframes scPulse {
  0% { transform: scale(0.35); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* (4) Título con efecto CanvasText — dos palabras que se separan al scrollear */
.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(255,255,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)); }

/* 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;
}

/* Hint de scroll, se va al expandir */
.asm-hint { opacity: calc(1 - var(--exp, 0)); }

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