* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #07090a; }
.scene { position: relative; width: 100vw; height: 100vh; overflow: hidden; isolation: isolate; background: #07090a; }
.scene::before, .scene::after, .scene .mark, .scene .rail, .scene .glow { position: absolute; display: block; pointer-events: none; }
.scene::before, .scene::after { content: ""; }
.scene .mark { inset: 0; }
.scene .rail { inset: 0; }
.scene .glow { inset: 0; }

/* Consola neón: layered edge diagonals with a brief traveling neon highlight. */
.neon {
  background:
    radial-gradient(ellipse at 78% 76%, #0d1514 0, transparent 35%),
    #07090a;
}
.neon::before {
  inset: -28% auto auto -29%;
  width: 52%;
  height: 68%;
  transform: rotate(-29deg);
  border-right: clamp(2px, .24vw, 5px) solid #245e4f;
  box-shadow: 5px 0 25px #18483c55;
  opacity: .70;
  animation: pulse-near 8s ease-in-out infinite alternate;
}
.neon::after {
  top: -22%;
  right: -17%;
  width: 39%;
  height: 120%;
  transform: rotate(32deg);
  border-left: clamp(2px, .18vw, 4px) solid #1b4b3e;
  box-shadow: -3px 0 26px #2463533d;
  opacity: .54;
  animation: pulse-far 12s ease-in-out infinite alternate;
}
.neon .mark {
  background: linear-gradient(116deg, transparent 0 6%, #28695b22 6.1% 6.35%, transparent 6.45% 86%, #28695b24 86.1% 86.3%, transparent 86.4%);
  animation: pulse-depth 14s ease-in-out infinite alternate;
}
.neon .mark::after {
  content: "";
  position: absolute;
  top: -20%;
  right: 9%;
  width: 3px;
  height: 90%;
  transform: rotate(32deg);
  background: linear-gradient(to bottom, transparent 42%, #5fe3b8 48%, #b6ff1a 50%, #2f9474 52%, transparent 58%) center -120% / 100% 240% no-repeat;
  filter: drop-shadow(0 0 7px #5fe3b8a0);
  animation: pulse-travel 5.5s linear infinite;
}
.neon .rail {
  border: clamp(10px, 1.2vw, 22px) solid #0d1112;
  box-shadow: inset 0 0 0 1px #2f3a3c3d;
}
.neon .rail::after {
  content: "";
  position: absolute;
  top: clamp(8px, 1vw, 16px);
  left: clamp(8px, 1vw, 16px);
  width: clamp(60px, 6vw, 100px);
  height: 2px;
  background: repeating-linear-gradient(90deg, #5fe3b8 0 2px, transparent 2px 6px);
  opacity: .30;
  pointer-events: none;
}
.neon .glow {
  background:
    radial-gradient(circle at 96% 8%, #2087731a 0, transparent 18%),
    radial-gradient(circle at 3% 92%, #5ea42015 0, transparent 18%);
  animation: pulse-light 8s ease-in-out infinite alternate;
}

/* In landscape the corner glows sit behind content and camera, so they are larger and brighter. */
.landscape.neon .glow {
  background:
    radial-gradient(ellipse 34% 52% at 97% 6%, #2a9e8648 0, #2087731c 45%, transparent 100%),
    radial-gradient(ellipse 34% 52% at 3% 94%, #6fbf2a3c 0, #5ea42016 45%, transparent 100%);
}

/* The portrait composition keeps the upper content area deliberately quiet. */
.portrait.neon::before { left: -53%; top: -10%; width: 86%; height: 65%; }
.portrait.neon::after { right: -53%; top: 44%; width: 86%; height: 80%; }
.portrait.neon .mark::before, .portrait.neon .mark::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: -4%;
  left: -20%;
  right: auto;
  width: 45vw;
  height: 3px;
  transform: rotate(-61deg);
  background: linear-gradient(90deg, transparent, #2f9474 34%, #b6ff1a 50%, #5fe3b8 56%, transparent);
  filter: drop-shadow(0 0 7px #5fe3b8a0);
}
.portrait.neon .mark::after { animation: pulse-sweep-up 15s ease-in-out infinite; }
.portrait.neon .mark::before { animation: pulse-sweep-down 15s ease-in-out infinite; }

@keyframes pulse-near { from { translate: -5% -2%; } to { translate: 7% 3%; } }
@keyframes pulse-far { from { translate: 4% 1%; } to { translate: -6% -3%; } }
@keyframes pulse-depth { from { translate: -1.5% 0; opacity: .55; } to { translate: 2% 0; opacity: 1; } }
@keyframes pulse-travel { 0%, 10% { opacity: 0; background-position: center -120%; } 18% { opacity: 1; } 56% { opacity: 1; } 68%, 100% { opacity: 0; background-position: center 120%; } }
/* Two 5.5 s passes, then four seconds of stillness before repeating. */
@keyframes pulse-sweep-up { 0% { opacity: 0; translate: 0 0; } 2.7% { opacity: 1; } 34% { opacity: 1; } 36.667%, 100% { opacity: 0; translate: 120vw -108vh; } }
@keyframes pulse-sweep-down { 0%, 36.667% { opacity: 0; translate: 120vw -108vh; } 39.367% { opacity: 1; } 70.633% { opacity: 1; } 73.333%, 100% { opacity: 0; translate: 0 0; } }
@keyframes pulse-light { from { opacity: .42; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }