@font-face {
  font-family: Vipnagorgialla;
  src: url('./assets/vipnagorgialla-bold-italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
:root { color-scheme: dark; font-family: Vipnagorgialla, 'Arial Black', sans-serif; font-weight: 700; font-style: italic; color: #fff; background: #080202; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: #080202 url('./assets/fondo.jpg') center / cover fixed no-repeat; display: grid; place-items: center; isolation: isolate; }
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient-glow { position: absolute; width: clamp(260px, 50vw, 850px); aspect-ratio: 1; border-radius: 50%; will-change: transform, opacity; }
.ambient-orange { right: -14%; top: -24%; background: radial-gradient(ellipse, #ff7100b0 0%, #ff510055 34%, #ff510000 70%); animation: orange-heartbeat 4.8s ease-in-out infinite; }
.ambient-pink { left: -17%; bottom: -29%; background: radial-gradient(ellipse, #ff166eb0 0%, #f5115955 35%, #f5115900 70%); animation: pink-heartbeat 4.2s ease-in-out -1.4s infinite; }
@keyframes orange-heartbeat {
  0%, 100% { transform: translate(0, 0) scale(0.72); opacity: 0.25; }
  35% { transform: translate(-3vw, 4vh) scale(1.38); opacity: 0.95; }
  55% { transform: translate(-1vw, 2vh) scale(1.04); opacity: 0.5; }
  72% { transform: translate(-3vw, 4vh) scale(1.25); opacity: 0.8; }
}
@keyframes pink-heartbeat {
  0%, 100% { transform: translate(0, 0) scale(0.72); opacity: 0.25; }
  35% { transform: translate(3vw, -4vh) scale(1.4); opacity: 0.95; }
  55% { transform: translate(1vw, -2vh) scale(1.04); opacity: 0.5; }
  72% { transform: translate(3vw, -4vh) scale(1.25); opacity: 0.8; }
}
.ambient-paused .ambient-glow { animation-play-state: paused; }
.stage { width: min(100%, 177.78svh); aspect-ratio: 16 / 9; position: relative; container-type: inline-size; z-index: 1; }
.logo { position: absolute; width: 50%; height: auto; top: 5.2%; left: 25%; }
.countdown { position: absolute; top: 20.6%; width: 100%; text-align: center; }
h1, h2 { margin: 0; font: inherit; text-transform: uppercase; }
h1 { font-size: 3cqw; line-height: 1.25; white-space: nowrap; }
.timer { margin-top: 0.2cqw; font-size: 21cqw; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0.005em; padding-right: 1cqw; text-shadow: 0 0 5cqw #ffffff08; white-space: nowrap; }
.timer.with-hours { font-size: 13cqw; padding-top: 4.6cqw; }
.departures { position: absolute; top: 69.1%; left: 12%; width: 76%; height: 20.4%; text-align: center; filter: drop-shadow(0 0 1.3cqw #f51d6240); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.frame path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.frame-outer { stroke: #f71f69; }
.frame-inner { stroke: #fff; }
h2 { position: relative; font-size: 2.65cqw; line-height: 1.2; padding-top: 1.9cqw; }
.times { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; margin: 0.65cqw 4.5cqw 0; padding: 0; font-size: 3.5cqw; line-height: 1.1; font-variant-numeric: tabular-nums; }
.times li { position: relative; isolation: isolate; padding: 0.1cqw 0; }
.times li[aria-current='true']::before { content: ''; position: absolute; inset: 0 -0.1cqw; background: #f32268; transform: skew(-12deg); z-index: -1; box-shadow: 0 0 2cqw #f3226850; }
.times li.past { opacity: 0.45; }
.departures.morning { top: 67%; height: 28%; }
.departures.morning h2 { padding-top: 1.4cqw; font-size: 2.45cqw; }
.departures.morning .times { grid-template-columns: repeat(8, 1fr); gap: 0.8cqw 1.2cqw; margin-top: 1cqw; font-size: 2.7cqw; }
.departures.morning .times li { grid-column: span 2; }
.departures.morning .times li:nth-child(5) { grid-column: 2 / span 2; }
.departures.morning .times li:nth-child(6) { grid-column: 4 / span 2; }
.departures.morning .times li:nth-child(7) { grid-column: 6 / span 2; }
.departures.morning .times li { padding: 0.35cqw 0; }
.stage.urgent .timer { color: #ff3434; text-shadow: 0 0 1.5cqw #ff171780, 0 0 4cqw #ff171740; transform-origin: center; will-change: transform, opacity; }
.stage.critical .timer { color: #ff2929; text-shadow: 0 0 1.5cqw #ff1717bb, 0 0 5cqw #ff171760; }
.announcement { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5vw; text-align: center; z-index: 1; overflow: clip; }
.announcement img { position: absolute; top: 8%; width: min(65%, 900px); height: auto; }
.announcement-title { position: relative; margin: 0; font-size: clamp(2rem, 12.2vw, 22rem); line-height: 1.2; text-transform: uppercase; text-shadow: 0 0 5vw #f3226880; isolation: isolate; }
.announcement-word { position: relative; display: block; z-index: 1; }
.launch-flag { margin: 3vh 0 1vh; font: clamp(2rem, 6vw, 7rem)/1.2 system-ui, sans-serif; transform-origin: 50% 80%; }
.type-echo { position: absolute; inset: 0; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px #ff6d9c; text-shadow: none; opacity: 0; pointer-events: none; }
.launching .announcement-word { animation: launch-zoom 950ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.launching .type-echo { animation: type-echo 1500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.launching .echo-two { animation-delay: 130ms; -webkit-text-stroke-color: #ff913d; }
.launching .echo-three { animation-delay: 260ms; -webkit-text-stroke-color: #fff; }
.launching .launch-flag { animation: flag-arrive 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.launching .announcement-detail { animation: detail-arrive 700ms 450ms ease-out both; }
.complete .launch-flag, .complete .type-echo { display: none; }
@keyframes launch-zoom { 0% { transform: scale(0.3); opacity: 0; } 45% { transform: scale(1.09); opacity: 1; } 70% { transform: scale(0.98); } 100% { transform: scale(1); opacity: 1; } }
@keyframes type-echo { 0% { transform: scale(0.35); opacity: 0; } 25% { opacity: 0.65; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes flag-arrive { 0% { transform: translateY(35px) scale(0.35) rotate(-25deg); opacity: 0; } 55% { transform: translateY(0) scale(1.15) rotate(12deg); opacity: 1; } 80% { transform: scale(0.98) rotate(-6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes detail-arrive { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.announcement-detail { margin: 2vw 0 0; font-size: clamp(0.85rem, 2.2vw, 3rem); line-height: 1.5; text-transform: uppercase; }
.fullscreen { position: fixed; right: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; padding: 12px; border: 0; border-radius: 8px; background: #08020230; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 250ms ease; z-index: 2; }
.fullscreen svg { width: 20px; height: 20px; }
.controls-active .fullscreen { opacity: 0.35; pointer-events: auto; }
.fullscreen:hover, .fullscreen:focus-visible { opacity: 0.85; pointer-events: auto; }
.icon-collapse, .is-fullscreen .icon-expand { display: none; }
.is-fullscreen .icon-collapse { display: initial; }
.fullscreen:focus-visible { outline: 3px solid #ff6698; outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notice { position: fixed; bottom: 0; width: 100%; text-align: center; font: 1rem/1.5 sans-serif; }
@media (max-aspect-ratio: 4/5) {
  .stage { aspect-ratio: 3/4; }
  .logo { width: 80%; left: 10%; top: 9%; }
  .countdown { top: 31%; }
  h1 { font-size: 3.5cqw; }
  .timer { margin-top: 3cqw; font-size: 23cqw; }
  .departures { top: 66%; left: 5%; width: 90%; height: 20%; }
  h2 { font-size: 4cqw; padding-top: 4cqw; }
  .times { font-size: 4.3cqw; margin: 3cqw 5cqw 0; }
  .departures.morning { top: 66%; height: 29%; }
  .departures.morning h2 { padding-top: 3cqw; font-size: 4cqw; }
  .departures.morning .times { gap: 2cqw 1cqw; font-size: 3.8cqw; margin-top: 2cqw; }
}
@media (max-width: 380px) and (max-aspect-ratio: 4/5) {
  .departures.morning { height: 39%; }
  .departures.morning .times { grid-template-columns: repeat(6, 1fr); font-size: 4.5cqw; }
  .departures.morning .times li:nth-child(n) { grid-column: span 2; }
  .departures.morning .times li:last-child { grid-column: 3 / span 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .stage.urgent .timer { will-change: auto; } }
@media (prefers-reduced-motion: reduce) { .ambient-glow { will-change: auto; opacity: 0.55; } .fullscreen { transition: none; } }