/* logo.css — Slide 1 · Marca DOGMA (fondo navy oscuro). OWNER: logo.
   Una sola imagen de marca (mano robótica + wordmark) servida vía <picture>:
   dogma-logo-phone.png (cuadrada, ≤760px) / dogma-logo-computer.png (horizontal).
   Usa variables de tokens.css. */

/* ---- Fondo de la slide --------------------------------------------------
   La slide es transparente (regla global de main.css): los PNG del logo tienen
   el fondo navy recortado (canal alfa), así que la capa fluida global
   (body::before, con sus glows interpolados por scroll) se ve a través de
   ellos — misma ambientación que el resto de las slides. */
.slide--logo{
  align-items:stretch;
  isolation:isolate;
}

/* H1 accesible pero oculto visualmente (patrón sr-only estándar). */
.logo__sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---- Imagen de marca a pantalla completa ------------------------------- */
.logo{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
}
.logo__img{
  width:100%;
  height:100%;
  /* desktop: cover con zoom → el brazo sangra por el borde izquierdo en vez de
     verse cortado dentro de la pantalla. El 65% vertical protege el wordmark
     (termina al ~79% de la imagen) incluso en pantallas muy anchas. */
  object-fit:cover;
  object-position:50% 65%;
  user-select:none;
  -webkit-user-drag:none;
}
@media (max-width:760px){
  /* teléfono: la imagen cuadrada se muestra completa (el fondo ya es el mismo
     navy de la página, así que el letterbox es invisible) */
  .logo__img{ object-fit:contain; object-position:center; }
}

/* ---- Indicador de scroll (claro, sobre navy) ---------------------------- */
.logo__scroll{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:clamp(22px,4vh,40px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
}
.logo__scroll-label{
  font-family:var(--font-head);
  font-size:.64rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--steel-dim);
}
.logo__scroll-chevron{
  width:18px;height:18px;
  border-right:2px solid var(--red);
  border-bottom:2px solid var(--red);
  transform:rotate(45deg);
  animation:logo-bob 1.8s var(--ease) infinite;
}
@keyframes logo-bob{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.85 }
  50%{ transform:rotate(45deg) translate(3px,3px); opacity:1 }
}

/* ---- Accesibilidad: sin animación de rebote ----------------------------- */
@media (prefers-reduced-motion:reduce){
  .logo__scroll-chevron{ animation:none; }
}