:root { --bg: #08090b; --red: #c8121c; --muted: #6d7177; }
  * { box-sizing: border-box; margin: 0; }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: #ddd;
    overflow: hidden;
    font-family: Inter, system-ui, sans-serif;
  }
  /* Un solo fondo para toda la página: el foco de la escena se funde hacia la derecha. */
  .stage {
    position: fixed; inset: 0;
    display: grid; grid-template-columns: 58% 42%;
    background:
      radial-gradient(ellipse 48% 70% at 30% 46%, #1c2127 0%, #101317 45%, transparent 75%),
      radial-gradient(ellipse 40% 50% at 72% 50%, rgba(200,18,28,.07), transparent 70%),
      var(--bg);
  }
  /* El lienzo ocupa toda la página (sombras y cables no se cortan en el borde); la cámara encuadra la mosca en la columna izquierda. */
  #scene { position: fixed; inset: 0; cursor: grab; touch-action: none; }
  #scene:active { cursor: grabbing; }
  #scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s ease; }
  #scene.ready canvas { opacity: 1; }
  .copy {
    grid-column: 2;
    position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding-left: 2vw;
    margin-left: -8vw; /* el texto invade la escena: no hay corte entre mitades */
    pointer-events: none;
  }
  h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: min(clamp(4rem, 11vw, 11.5rem), 26vh); /* el tope en vh evita que tape la escena en móvil apaisado */
    line-height: .86;
    letter-spacing: -.01em;
    color: var(--red);
    text-shadow: 0 0 40px rgba(200,18,28,.35), 0 0 120px rgba(200,18,28,.18);
  }
  h1 span { display: block; opacity: 0; transform: translateY(18px); filter: blur(6px);
    animation: rise 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
  h1 span:nth-child(1) { animation-delay: .6s; }
  h1 span:nth-child(2) { animation-delay: .85s; }
  h1 span:nth-child(3) { animation-delay: 1.1s; }
  @keyframes rise { to { opacity: 1; transform: none; filter: none; } }
  .hint {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
    opacity: 0; animation: fade 1.2s 2.4s forwards; transition: opacity .8s;
    pointer-events: none; z-index: 3;
  }
  .hint.gone { opacity: 0 !important; animation: none; }
  @keyframes fade { to { opacity: .8; } }
  /* Viñeta y grano comunes a toda la página: es lo que une las dos mitades. */
  .vignette, .grain { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
  .vignette { background: radial-gradient(ellipse at 45% 50%, transparent 45%, rgba(0,0,0,.75) 100%); }
  .grain { opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* Móvil en vertical: escena arriba (66 %) y texto debajo, sin solaparse. En apaisado se mantiene el reparto lateral. */
  @media (max-aspect-ratio: 1/1) {
    .stage { grid-template-columns: 1fr; grid-template-rows: 66% 34%;
      background: radial-gradient(ellipse 80% 45% at 50% 33%, #1c2127 0%, #101317 45%, transparent 75%), var(--bg); }
    .copy { grid-column: 1; grid-row: 2; margin: 0; padding: 0 16px 36px; align-items: center; justify-content: center; }
    h1 { text-align: center; font-size: min(18vw, 10vh, 6rem); }
    .hint { bottom: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    h1 span { animation-duration: .01s; animation-delay: 0s !important; }
  }