@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/roboto-condensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  color: #f2f6ff;
  background: #030405;
  font-family: system-ui, sans-serif;
  --rr-motion: running;
}

* { box-sizing: border-box; }
body { margin: 0; }

.escena {
  --alto-pelicula: min(9.28vw, 18svh);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  background: radial-gradient(ellipse at 50% 51%, #101319, #030405 76%);
}

.firma {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 10svh;
  pointer-events: none;
}

.firma img {
  width: min(21vw, 41svh);
  height: auto;
  padding: min(.9vw, 1.7svh) min(.8vw, 1.5svh) min(1.3vw, 2.5svh) min(1.5vw, 2.8svh);
  margin-bottom: min(1.2vw, 2.4svh);
  background: linear-gradient(145deg, #fafafa, #e2e4e7);
  border: max(2px, min(.4vw, .8svh)) solid #fff;
  box-shadow: 0 8px 32px #00000099;
}

h1 {
  margin: 0;
  font: 700 min(6.5vw, 13svh)/1 "Roboto Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .05em;
}

.firma p {
  margin: min(1.1vw, 2.2svh) 0 0;
  color: #aab4c2;
  font: 500 clamp(11px, 1.15vw, 2.3svh)/1.4 ui-monospace, monospace;
  letter-spacing: .2em;
}

:is(.fotos, .gatos, .pelicula) {
  position: absolute;
  left: 0;
  width: 100%;
}

.fotos {
  top: 19%;
  height: min(12.22vw, 25svh);
}

.gatos {
  z-index: 1;
  bottom: var(--alto-pelicula);
  height: min(11.6vw, 22svh);
  overflow: visible;
}

.pelicula {
  bottom: 0;
  height: var(--alto-pelicula);
}

@media (orientation: portrait) {
  .escena { --alto-pelicula: 14vw; }
  .fotos { top: 16%; }
  .firma img { width: min(42vw, 32svh); }
  h1 { font-size: min(9.5vw, 9svh); }
}

.rr-teclear { animation: rr-teclear 1.65s ease-in-out infinite; }
.rr-pata-lejana { x: -7px; y: -4px; animation-delay: -.51s; }
.rr-pata-cercana { x: 7px; y: 4px; }
.rr-pelicula { animation: rr-pelicula 4.5s ease-in-out infinite; }
.rr-flash { animation: rr-flash 5s ease-out infinite; }
.rr-luz { animation: rr-luz 4.5s ease-out infinite; }
:is(.rr-teclear, .rr-pelicula, .rr-flash, .rr-luz) {
  animation-play-state: var(--rr-motion);
}

@media (prefers-reduced-motion: reduce) {
  :root { --rr-motion: paused; }
}
  @keyframes rr-codigo-baja { from { transform: translateY(0); } to { transform: translateY(16px); } }
  @keyframes rr-teclear { 0%,29%,55%,100% { transform: translateY(0); } 16%,42% { transform: translate(3px,-8px); } 64% { transform: translate(2px,-4px); } }
  @keyframes rr-pelicula { 0%,18% { transform: translateX(0); } 60%,100% { transform: translateX(-132px); } }
  @keyframes rr-flash { 0%,59%,65%,100% { opacity: 0; } 60% { opacity: .75; } 62% { opacity: .12; } }
  @keyframes rr-luz { 0%,58%,100% { opacity: 0; } 67% { opacity: .16; } }