:root {
  --screen-blue: #1200ff;
  --screen-blue-deep: #080071;
  --white: #ffffff;
  --muted: #8e89b9;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--white);
  font-family: "Silkscreen", monospace;
  overflow: hidden;
}

button, a { font: inherit; }

.void {
  align-items: center;
  background:
    radial-gradient(ellipse at center, rgba(18, 0, 255, .18) 0, rgba(18, 0, 255, .055) 35%, transparent 67%),
    #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(1rem, 5vw, 4rem);
}

.screen {
  align-items: center;
  background: var(--screen-blue);
  box-shadow: 0 0 34px 5px rgba(18, 0, 255, .42);
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: clamp(340px, 55vw, 520px);
  outline: none;
  overflow: hidden;
  padding: clamp(2.25rem, 7vw, 6rem) clamp(1.5rem, 7vw, 7rem);
  position: relative;
  text-align: center;
  transition: background-color 1.1s ease, box-shadow 1.1s ease, transform .35s ease;
  width: min(880px, 100%);
}

.screen:hover { transform: scale(1.003); }

.screen:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 6px;
}

.message {
  animation: message-in .85s ease both;
  max-width: 700px;
  width: 100%;
}

.message.is-leaving { animation: message-out .36s ease both; }

.message p {
  animation: breathe 4.2s ease-in-out infinite;
  font-size: clamp(1.25rem, 3.15vw, 2.55rem);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.38;
  margin: 0;
  text-shadow:
    0 0 3px rgba(255,255,255,.98),
    0 0 10px rgba(255,255,255,.78),
    0 0 22px rgba(255,255,255,.38);
}

.message .hello { margin-bottom: .62em; }
.message .gap { display: block; height: .62em; }
.message .wide { font-weight: 700; letter-spacing: .34em; padding-left: .34em; }
.message .small { font-size: clamp(.88rem, 2vw, 1.3rem); line-height: 1.65; }

.chromatic {
  animation: spectral-bloom 7.5s ease-in-out infinite;
  display: inline-block;
  isolation: isolate;
  font-size: 50pt;
  position: relative;
  text-shadow:
    -2.5px 0 9px rgba(255, 62, 190, .58),
    2.5px 0 9px rgba(44, 237, 255, .58),
    0 0 12px rgba(255, 255, 255, .85);
  z-index: 0;
}

.chromatic::before,
.chromatic::after {
  content: attr(data-text);
  filter: blur(3.5px);
  inset: 0;
  mix-blend-mode: screen;
  opacity: .24;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.chromatic::before {
  animation: fringe-left 7.5s ease-in-out infinite;
  color: #ff45c8;
  text-shadow: -2px 0 8px rgba(255, 69, 91, .8), 1px 0 10px rgba(255, 225, 50, .65);
}

.chromatic::after {
  animation: fringe-right 7.5s ease-in-out infinite;
  color: #34eaff;
  text-shadow: 2px 0 8px rgba(75, 255, 116, .75), -1px 0 10px rgba(127, 83, 255, .7);
}

.continue {
  animation: arrow-bob 1.45s ease-in-out infinite;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  filter: drop-shadow(0 0 7px #fff);
  font-size: clamp(.7rem, 1.5vw, 1rem);
  left: 50%;
  opacity: .95;
  position: absolute;
  transform: translateX(-50%);
}

.counter {
  bottom: 1rem;
  color: rgba(255,255,255,.32);
  font-size: .55rem;
  letter-spacing: .08em;
  position: absolute;
  right: 1.25rem;
}

.hint {
  color: var(--muted);
  font-size: clamp(.48rem, 1.3vw, .62rem);
  letter-spacing: .05em;
  margin: 1rem 0 0;
  opacity: .55;
  transition: opacity .6s ease;
}

.hint.is-hidden { opacity: 0; }

.secret-heart {
  background: none;
  border: 0;
  bottom: 1rem;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .72rem;
  left: 1rem;
  opacity: .035;
  padding: .65rem;
  position: fixed;
  text-shadow: 0 0 8px rgba(255,255,255,.75);
  transition: opacity .6s ease, text-shadow .6s ease;
}

.secret-heart:hover,
.secret-heart:focus-visible {
  opacity: .7;
  outline: none;
  text-shadow: 0 0 4px #fff, 0 0 13px rgba(255,255,255,.9);
}

.screen.final-screen {
  background: #0d00ce;
  box-shadow: 0 0 46px 7px rgba(18, 0, 255, .38);
}

.final-screen .message p { animation-duration: 5.5s; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.25rem;
  justify-content: center;
  margin-top: 2.1rem;
}

.links a {
  color: rgba(255,255,255,.78);
  font-size: clamp(.58rem, 1.4vw, .72rem);
  padding: .35rem .1rem;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(255,255,255,.42);
}

.links a:hover,
.links a:focus-visible {
  color: #fff;
  outline: none;
  text-shadow: 0 0 4px #fff, 0 0 13px #fff;
}

@keyframes message-in {
  from { filter: blur(6px); opacity: 0; transform: translateY(7px); }
  to { filter: blur(0); opacity: 1; transform: translateY(0); }
}

@keyframes message-out {
  to { filter: blur(5px); opacity: 0; transform: translateY(-5px); }
}

@keyframes breathe {
  0%, 100% { opacity: .92; text-shadow: 0 0 3px #fff, 0 0 9px rgba(255,255,255,.66), 0 0 19px rgba(255,255,255,.3); }
  50% { opacity: 1; text-shadow: 0 0 4px #fff, 0 0 13px rgba(255,255,255,.9), 0 0 27px rgba(255,255,255,.52); }
}

@keyframes arrow-bob {
  0%, 100% { opacity: .55; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 5px); }
}

@keyframes spectral-bloom {
  0%, 42%, 100% {
    text-shadow: -2.5px 0 9px rgba(255, 62, 190, .54), 2.5px 0 9px rgba(44, 237, 255, .54), 0 0 12px rgba(255,255,255,.82);
  }
  62% {
    text-shadow: -5px 0 14px rgba(255, 62, 190, .84), 5px 0 14px rgba(44, 237, 255, .84), 0 -2px 14px rgba(255, 230, 75, .56), 0 0 18px #fff;
  }
}

@keyframes fringe-left {
  0%, 38%, 100% { filter: blur(3.5px); opacity: .25; transform: translate(-1.8px, 0); }
  61% { filter: blur(5px); opacity: .66; transform: translate(-5px, .5px); }
  72% { filter: blur(4px); opacity: .36; transform: translate(-2.5px, -.2px); }
}

@keyframes fringe-right {
  0%, 38%, 100% { filter: blur(3.5px); opacity: .25; transform: translate(1.8px, 0); }
  61% { filter: blur(5px); opacity: .66; transform: translate(5px, -.5px); }
  72% { filter: blur(4px); opacity: .36; transform: translate(2.5px, .2px); }
}

@media (max-width: 600px) {
  .void { padding: 1rem; }
  .screen { min-height: min(70svh, 520px); padding: 3.5rem 1.25rem 4.5rem; }
  .message p { line-height: 1.48; }
  .counter { right: .8rem; }
  .secret-heart { bottom: .35rem; left: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}