/* ========================================================================== 
   TITAYO — ESCENAS Y MEDIOS
   --------------------------------------------------------------------------
   Este archivo concentra TODO lo que suele ajustarse por escena:
   - videos de fondo
   - blur/crossfade
   - posiciones de texto en desktop
   - tamaños y posiciones de Motor/Frenos/Suspensión/Diagnóstico
   ========================================================================== */

/* ---------- Videos principales ---------- */
.stage-media{
  --scene-blur:0px;
  --scene-opacity:1;
  --scene-darkness:0;
  --scene-scale:1.015;
  --scene-hero-opacity:1;
  --scene-entry-opacity:0;
  --scene-mechanics-opacity:0;

  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--color-bg) url('../assets/video/01-exterior-poster.webp') center/cover no-repeat;
  opacity:var(--scene-opacity);
  transform:translateZ(0);
  contain:paint;
  z-index:0;
}

.stage-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  transform:scale(var(--scene-scale)) translateZ(0);
  transform-origin:center;
  backface-visibility:hidden;
  opacity:0;
}
.stage-video--hero{z-index:0;opacity:var(--scene-hero-opacity)}

/* Desktop: desplaza levemente el encuadre del video exterior hacia la izquierda. */

.stage-video--entry{z-index:1;opacity:var(--scene-entry-opacity)}
.stage-video--mechanics{z-index:2;opacity:var(--scene-mechanics-opacity)}
.stage-media.has-crossfade .stage-video{will-change:opacity}
.stage-media.has-blur{filter:blur(var(--scene-blur));will-change:filter,opacity}
.stage-media.is-dormant{visibility:hidden}

.stage-video-shade{z-index:3;position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.02) 40%,rgba(0,0,0,.18)),linear-gradient(to right,rgba(0,0,0,.24),transparent 50%)}
.stage-video-shade::after{content:"";position:absolute;inset:0;background:var(--color-bg);opacity:var(--scene-darkness)}

/* ---------- Servicios: mesa + objetos animados ---------- */
.services-visual{
  --services-opacity:0;
  --services-blur:0px;
  --services-scale:1.015;
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:var(--color-bg-deep);
  opacity:var(--services-opacity);
  visibility:hidden;
  pointer-events:none;
  transform:translateZ(0) scale(var(--services-scale));
  transform-origin:center;
  contain:paint;
}
.services-visual.is-visible{visibility:visible}
.services-visual.has-blur{filter:blur(var(--services-blur));will-change:filter,opacity,transform}
.services-visual__table{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;opacity:0;transition:opacity .22s linear}
.services-visual.is-loaded .services-visual__table{opacity:1}
.services-visual__objects{position:absolute;inset:0;z-index:1}
.services-visual__shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,0) 44%,rgba(0,0,0,.08)),linear-gradient(to right,rgba(0,0,0,.02) 0 42%,rgba(0,0,0,.16) 55%,rgba(0,0,0,.46) 100%)}

.services-object{
  --service-opacity:0;
  --service-scale:.965;
  --service-offset-x:0%;
  --service-offset-y:0%;
  position:absolute;
  left:27%;
  top:57%;
  width:min(24vw,360px);
  height:auto;
  max-height:43vh;
  object-fit:contain;
  object-position:center center;
  opacity:var(--service-opacity);
  transform:translate3d(
    calc(-50% + var(--service-offset-x)),
    calc(-50% + var(--service-offset-y) + ((1 - var(--service-opacity)) * 12px)),
    0
  ) scale(var(--service-scale));
  transform-origin:50% 50%;
  filter:drop-shadow(0 20px 16px rgba(0,0,0,.48));
  will-change:opacity,transform;
}
.services-object:is(video){background:transparent}

/* ========================================================================== 
   EDICIÓN RÁPIDA — DESKTOP (>= 861px)
   --------------------------------------------------------------------------
   Esta es la sección que conviene tocar cuando quieras mover textos o cambiar
   tamaños de las cuatro animaciones de Servicios.
   ========================================================================== */
@media(min-width:861px){
  /* -----------------------------------------------------------------------
     POSICIÓN UNIFICADA DE TEXTOS — DESKTOP
     -----------------------------------------------------------------------
     Todas las escenas, excepto Servicios, comparten el mismo margen lateral
     y la misma distancia al borde inferior.

     Para mover TODAS juntas:
     - horizontal: --desktop-copy-gutter (tokens.css)
     - vertical:   --desktop-copy-bottom (tokens.css)
     ----------------------------------------------------------------------- */
  #contenido-inicio,
  #contenido-entrada,
  #contenido-mecanica,
  #contenido-motor,
  #contenido-diagnostico,
  #contenido-contacto{
    left:var(--desktop-copy-gutter);
    right:auto;
    top:auto;
    bottom:var(--desktop-copy-bottom);
    transform:none;
    text-align:start;
  }

  /* Anchos por contenido. La posición sigue siendo común. */
  #contenido-inicio{
    width:min(720px,52vw);
    max-width:720px;
  }
  #contenido-entrada,
  #contenido-mecanica,
  #contenido-motor{
    width:min(570px,39vw);
    max-width:570px;
  }
  #contenido-diagnostico{
    width:min(590px,40vw);
    max-width:590px;
  }
  #contenido-contacto{
    width:min(620px,42vw);
    max-width:620px;
  }

  /* ---------------------------------------------------------------------
     02 · SERVICIOS — TEXTO SUPERIOR DERECHO
     ---------------------------------------------------------------------
     A diferencia del resto de las escenas, Servicios se ancla arriba.
     IMPORTANTE: el margen vertical NO empieza en el borde de la pantalla.
     Empieza debajo del navbar compacto y, desde ese punto, usa exactamente
     el mismo margen visual (--desktop-copy-bottom) que las demás tarjetas.

     Horizontal: borde derecho + --desktop-copy-gutter
     Vertical:   navbar + --desktop-copy-bottom
     --------------------------------------------------------------------- */
  #contenido-servicios{
    left:auto;
    right:var(--desktop-copy-gutter);
    top:calc(var(--header-height-compact) + var(--desktop-copy-bottom));
    bottom:auto;
    width:min(500px,31vw);
    max-width:500px;
    transform:none;
    text-align:start;
  }

  /* ---------------------------------------------------------------------
     SERVICIOS — PULIDO VISUAL SOLO DESKTOP
     ---------------------------------------------------------------------
     No reemplaza la imagen de la mesa. Solamente agrega tratamiento de luz
     y contraste por CSS para separar mejor la pieza (izquierda) del texto
     (derecha). El responsive conserva exactamente su composición anterior.
     --------------------------------------------------------------------- */
  .services-visual__table{
    filter:brightness(.92) contrast(1.035);
  }

  .services-visual__shade{
    /* Sin halo/radial blanco debajo de las piezas.
       Conservamos solamente el sombreado vertical y lateral para mantener
       la lectura del texto sin dibujar círculos sobre la mesa. */
    background:
      linear-gradient(to bottom,rgba(0,0,0,.04) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.10) 100%),
      linear-gradient(to right,rgba(0,0,0,.01) 0 42%,rgba(0,0,0,.20) 57%,rgba(0,0,0,.58) 100%);
  }

  /* La selección de Servicios usa el mismo tratamiento en desktop y mobile:
     tarjeta clara para el elemento activo y atenuación de los demás. */

  /* ----- Punto medio común de objetos en Servicios ----- */
  .services-object{
    left:27%;
    top:60%;

    /*
     * Las cuatro animaciones tienen canal alpha, por lo que podemos ampliar
     * su caja sin tapar la mesa con un rectángulo negro. En desktop quitamos
     * el límite genérico de altura y dimensionamos cada asset por el espacio
     * REAL que ocupa la pieza dentro de su lienzo.
     */
    max-height:none;
    filter:drop-shadow(0 28px 24px rgba(0,0,0,.46));
  }

  /* ---------------------------------------------------------------------
     PROPORCIÓN VISUAL DE LAS ANIMACIONES — DESKTOP
     ---------------------------------------------------------------------
     Medición del canal alpha tomando varios frames de cada loop:

       Motor       ≈ 94% ancho × 87% alto del lienzo 720×720
       Frenos      ≈ 95% ancho × 95% alto del lienzo 720×720
       Suspensión  ≈ 90% ancho × 60% alto del lienzo 720×1280
       Diagnóstico ≈ 98% ancho × 38% alto del lienzo 720×1280

     Por eso NO conviene darles el mismo width CSS. Suspensión y Diagnóstico
     necesitan una caja mayor para que su pieza visible tenga una presencia
     comparable a Motor/Frenos. En v195 se usa una escala más contenida y Suspensión se reduce
     adicionalmente para igualar mejor su altura visual con Frenos. Para que
     las piezas mantengan presencia sin dominar la mitad izquierda del encuadre. Los
     offsets existentes compensan el centro óptico de cada asset y se conservan.
     --------------------------------------------------------------------- */
  .services-object--motor{
    --service-offset-x:.6%;
    --service-offset-y:.7%;
    width:clamp(280px,26vw,390px);
  }

  .services-object--frenos{
    --service-offset-x:-.6%;
    --service-offset-y:0%;
    width:clamp(250px,22vw,340px);
  }

  .services-object--suspension{
    --service-offset-x:4.1%;
    --service-offset-y:-3.8%;
    width:clamp(230px,20vw,300px);
  }

  .services-object--diagnostico{
    --service-offset-x:-.3%;
    --service-offset-y:-2.7%;
    width:clamp(360px,30vw,480px);
  }
}