/* Intro de arranque (ver boot-intro.js). Solo actúa si el script añade
   .boot-intro a #boot-screen; sin eso se ve la pantalla de arranque de siempre. */
#boot-screen.boot-intro {
  position: relative;
  overflow: hidden;
}
.boot-escenario {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform, filter, opacity;
}
.boot-intro .boot-brand,
.boot-intro p {
  position: relative;
  z-index: 1;
}

/* Logo: uno borroso de fondo y otro nítido que solo se ve dentro del cristal. */
.boot-intro .boot-logo {
  grid-area: 1 / 1;
  animation: none;
  transform: none;
}
.boot-intro .boot-logo--borroso {
  filter: blur(6px);
  opacity: 0.5;
}
.boot-intro .boot-logo--nitido {
  opacity: 1;
  clip-path: circle(var(--radio, 0px) at var(--lx, 50%) var(--ly, 50%));
}
.boot-intro.listo .boot-logo--nitido {
  clip-path: none;
}

/* Textos: entran cuando la lupa ya enfocó. */
#boot-screen.boot-intro p {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
/* El logo crece con transform (no ocupa más sitio): los textos bajan para
   no quedar tapados. */
#boot-screen.boot-intro.listo p {
  opacity: 1;
  transform: translateY(40px);
}

/* Patitas: negras y tenues; cada una aparece cuando la lupa se acerca. */
.boot-pata {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  color: var(--ink);
  opacity: 0;
  transform: rotate(var(--giro, 0deg)) scale(0.55);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.boot-pata.on {
  opacity: 0.3;
  transform: rotate(var(--giro, 0deg)) scale(1);
}
.boot-escenario.fin .boot-pata.on {
  opacity: 0.1;
  transition: opacity 0.8s ease;
}

/* Lupa */
.boot-lente {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 40% 40%;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 10px rgba(14, 43, 46, 0.22));
}
.boot-lente-aro {
  fill: none;
  stroke: var(--green);
  stroke-width: 6;
}
.boot-lente-cristal {
  fill: var(--surface);
  fill-opacity: 0.28;
}
.boot-lente-mango {
  fill: none;
  stroke: var(--green-ink);
  stroke-width: 10;
  stroke-linecap: round;
}
.boot-lente-brillo {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.75;
  stroke-width: 3.5;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
  .boot-escenario {
    display: none;
  }
}