/* ============================================================
   dream : binary — skin.
   Black CRT, phosphor-green copy, scanlines + glass glare.
   All rules are scoped to html[data-theme="binary"] except the
   classes only this dream's JS creates (.df-crt, cursor, power).
   ============================================================ */

/* faint phosphor warmth in the tube's center, falling off to black glass */
html[data-theme="binary"] body {
  background: radial-gradient(120% 90% at 50% 45%, #04140b 0%, #020a06 55%, #010402 100%);
}

html[data-theme="binary"] .df-logo img {
  filter: grayscale(1) sepia(1) saturate(4.5) hue-rotate(75deg) brightness(1.15)
          drop-shadow(0 0 30px rgba(60,255,150,0.35));
}

html[data-theme="binary"] .df-name {
  font-family: var(--df-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9DFFC4;
  text-shadow:
    0 0 8px rgba(70,255,150,0.75),
    0 0 26px rgba(70,255,150,0.30),
    1px 0 0 rgba(255,70,70,0.16),
    -1px 0 0 rgba(90,130,255,0.16);
}
html[data-theme="binary"] .df-sub-text {
  font-family: var(--df-mono);
  color: #5FE89A;
  text-shadow: 0 0 10px rgba(70,255,150,0.55);
}
html[data-theme="binary"] .df-rule { background: rgba(95,232,154,0.5); }
html[data-theme="binary"] .df-tagline {
  font-family: var(--df-mono);
  color: #7FDCA4;
  text-shadow: 0 0 8px rgba(70,255,150,0.35);
}
html[data-theme="binary"] .df-soon {
  font-family: var(--df-mono);
  color: #9DFFC4;
  text-shadow: 0 0 10px rgba(70,255,150,0.55);
}
html[data-theme="binary"] .df-copyright {
  font-family: var(--df-mono);
  color: rgba(120,220,164,0.55);
}

html[data-theme="binary"] #df-dream-label {
  font-family: var(--df-mono);
  color: rgba(125,220,164,0.5);
  text-shadow: 0 0 8px rgba(70,255,150,0.25);
}
html[data-theme="binary"] #df-change-dream {
  font-family: var(--df-mono);
  color: rgba(157,255,196,0.75);
  background: rgba(2,10,6,0.4);
  border-color: rgba(95,232,154,0.4);
}
html[data-theme="binary"] #df-change-dream:hover {
  border-color: rgba(120,255,180,0.9);
  color: #D7FFE4;
  box-shadow: 0 0 18px rgba(70,255,150,0.3);
}

/* typing reveal drives the entrance instead of fade-up */
html[data-theme="binary"] .df-name,
html[data-theme="binary"] .df-sub,
html[data-theme="binary"] .df-tagline,
html[data-theme="binary"] .df-soon { animation: none; }

html[data-theme="binary"] .df-char { opacity: 0; }
html[data-theme="binary"] .df-char.on { opacity: 1; }

/* until its line has typed in, an interactive notice (a variant's
   booking link) is neither a click target nor a floating underline */
html[data-theme="binary"] .df-binary-untyped {
  pointer-events: none;
  border-bottom-color: transparent;
}

.df-char.df-cursor::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 6%;
  width: 0.55em;
  height: 0.95em;
  background: #8DFFBE;
  box-shadow: 0 0 12px rgba(80,255,160,0.8);
  animation: df-blink 1s steps(2, start) infinite;
}
@keyframes df-blink { 50% { opacity: 0; } }

.df-crt-power { animation: df-crt-power 0.9s both; }
@keyframes df-crt-power {
  0% { opacity: 0; }
  38% { opacity: 0.45; }
  44% { opacity: 0.08; }
  58% { opacity: 0.8; }
  64% { opacity: 0.3; }
  100% { opacity: 1; }
}

.df-crt {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* vignette */
    radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(0,0,0,0.5) 100%),
    /* glass glare */
    radial-gradient(38% 26% at 27% 14%, rgba(205,255,225,0.10), transparent 70%),
    linear-gradient(112deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 30%, transparent 46%),
    /* aperture grille: faint vertical RGB phosphor stripes */
    repeating-linear-gradient(90deg,
      rgba(255,60,60,0.05) 0px, rgba(255,60,60,0.05) 1px,
      rgba(60,255,120,0.035) 1px, rgba(60,255,120,0.035) 2px,
      rgba(60,120,255,0.05) 2px, rgba(60,120,255,0.05) 3px),
    /* scanlines */
    repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 3px);
  box-shadow: inset 0 0 180px rgba(0,0,0,0.6);
}

/* curved-tube edge: an inset shadow hugging rounded corners reads as
   the glass bending away at the bezel */
.df-crt::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 3.5rem;
  box-shadow:
    inset 0 0 110px 26px rgba(0,0,0,0.85),
    inset 0 0 34px 8px rgba(0,0,0,0.6);
}

/* slow rolling scan band drifting down the tube (classic CRT hum bar).
   Kept dim and slow — an earlier fast flicker overlay read as unwanted
   flickering over the rain, so the glare/scanlines above stay static. */
@media (prefers-reduced-motion: no-preference) {
  .df-crt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 24vh;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(160,255,200,0.028) 40%,
      rgba(160,255,200,0.05) 50%,
      rgba(160,255,200,0.028) 60%,
      transparent 100%);
    animation: df-crt-roll 11s linear infinite;
  }
}
@keyframes df-crt-roll {
  from { transform: translateY(-30vh); }
  to   { transform: translateY(105vh); }
}