/* ================================================================= the tube
   A cold-start screen and a sheet of curved glass over the whole desk.

   The reference this is modelled on is a black terminal, so its scanlines can
   be heavy. Ours is deep teal, and light overlays turn it milky fast: every value below
   is pulled back so the desk keeps its blacks and the glass is something you
   notice at the edges rather than through the text.
   The whole layer is one class on <body>, so it can be switched off. */

/* ---------------------------------------------------------------- cold boot */
.cold {
  position: fixed; inset: 0; z-index: 9992;   /* above the glass, not under it */
  background:
    radial-gradient(ellipse 92% 74% at 50% 44%,
      #0f2a30 0%, #051d22 46%, #071317 100%);
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: opacity .45s ease;
}
.cold.is-off { opacity: 0; pointer-events: none; }
.cold::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,10,12,.34) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 118% 114% at 50% 46%,
      transparent 50%, rgba(2,10,12,.45) 84%, rgba(1,6,8,.78) 100%);
}

/* the phosphor is our ink, not a terminal's green */
.cold-screen {
  position: absolute; inset: 0;
  padding: 5vh 6vw;
  color: #6fcde8;
  text-shadow: 0 0 7px rgba(52,183,221,.55), 0 0 2px rgba(147,217,238,.8);
  overflow: hidden;
}
.cold-log {
  margin: 0; font-family: inherit; white-space: pre-wrap;
  font-size: clamp(12px, 1.75vmin, 16px); line-height: 1.45;
}
.cold-log .dim   { color: #2d7388; text-shadow: 0 0 5px rgba(45,115,136,.5); }
.cold-log .white { color: #dbf2f9; text-shadow: 0 0 8px rgba(219,242,249,.5); }
.cold-log .ok    { color: #93d9ee; text-shadow: 0 0 9px rgba(111,205,232,.6); }

.cold-cursor {
  display: inline-block; width: .6em; height: 1.05em;
  background: #6fcde8; vertical-align: -.18em;
  box-shadow: 0 0 9px rgba(52,183,221,.85);
  animation: cold-blink .8s steps(1) infinite;
}
@keyframes cold-blink { 50% { opacity: 0; } }

/* the mark, dead centre, once the log has finished */
.cold-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; opacity: 0; transition: opacity .5s ease;
}
.cold-mark.is-in { opacity: 1; }
/* the mark is the white wordmark used as a mask, so the phosphor colour is
   exact rather than whatever a filter chain happens to land on */
.cold-mark .mark {
  display: block; margin: 0 auto;
  width: clamp(210px, 30vmin, 340px);
  aspect-ratio: 961 / 364;
  background: #34b7dd;
  -webkit-mask: url("../assets/logo-wordmark.png") center / contain no-repeat;
  mask: url("../assets/logo-wordmark.png") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(52,183,221,.8)) drop-shadow(0 0 44px rgba(52,183,221,.5));
}
.cold-mark small {
  display: block; margin-top: 16px;
  font-size: clamp(10px, 1.5vmin, 13px); letter-spacing: .34em; text-transform: uppercase;
  color: #2d7388;
}

.cold-enter {
  position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center;
  font-size: clamp(11px, 1.6vmin, 14px); letter-spacing: .3em; text-transform: uppercase;
  color: #dbf2f9; text-shadow: 0 0 10px rgba(52,183,221,.75);
  opacity: 0; transition: opacity .4s ease;
}
.cold-enter.is-in { opacity: 1; animation: cold-blink 1.5s steps(1) infinite; }

/* the tube warming up: one bright line that opens into a picture */
.cold-warm {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 92% 74% at 50% 44%, #0f2a30 0%, #051d22 46%, #071317 100%);
}
.cold-warm i {
  position: absolute; left: 0; right: 0; top: 50%; height: 100vh;
  transform: translateY(-50%); background: #dbf2f9;
  box-shadow: 0 0 50px #34b7dd, 0 0 120px rgba(52,183,221,.7);
  animation: warm-open .62s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes warm-open {
  0%   { height: 2px; opacity: 1; }
  55%  { height: 2px; opacity: 1; }
  100% { height: 100vh; opacity: 0; }
}
.cold-warm { animation: warm-clear .01s .62s forwards; }
@keyframes warm-clear { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------- degauss zap */
.degauss {
  position: fixed; inset: 0; z-index: 9200; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(52,183,221,.22), transparent 62%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(52,183,221,.12) 0 6px, rgba(147,217,238,.08) 6px 12px, transparent 12px 22px);
}
.degauss.zap { animation: degauss .7s ease-out 1; }
@keyframes degauss {
  0%   { opacity: 1; transform: scale(1.05) skewX(2.5deg); }
  35%  { opacity: .8; transform: scale(.99) skewX(-1.6deg); }
  70%  { opacity: .4; transform: scale(1.006) skewX(.5deg); }
  100% { opacity: 0; transform: none; }
}
body.is-degaussing .desktop,
body.is-degaussing .taskbar { animation: degauss-wobble .7s ease-out 1; }
@keyframes degauss-wobble {
  0%   { transform: scale(1.035) skewX(2deg); filter: saturate(2.2) contrast(1.3); }
  40%  { transform: scale(.994) skewX(-1.2deg); filter: saturate(1.5) contrast(1.1); }
  100% { transform: none; filter: none; }
}

/* ------------------------------------------------------------- the glass */
#crt { position: fixed; inset: 0; pointer-events: none; z-index: 9990; }
body.crt-off #crt { display: none; }

.crt-lines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(255,0,60,.014) 0 1px,
      rgba(0,255,80,.011) 1px 2px,
      rgba(0,80,255,.014) 2px 3px);
  mix-blend-mode: multiply;
}
/* the diagonal reflection across the glass */
.crt-lines::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 0 34%, rgba(255,255,255,.015) 42%, rgba(255,255,255,.03) 47%,
    rgba(255,255,255,.01) 51%, transparent 58%);
  mix-blend-mode: screen;
}

.crt-glass {
  position: absolute; inset: 0; border-radius: 2.6vmin;
  background:
    radial-gradient(circle 30vmax at -6% -8%,  rgba(0,0,0,.22), transparent 44%),
    radial-gradient(circle 30vmax at 106% -8%, rgba(0,0,0,.22), transparent 44%),
    radial-gradient(circle 30vmax at -6% 110%, rgba(0,0,0,.18), transparent 44%),
    radial-gradient(circle 30vmax at 106% 110%,rgba(0,0,0,.18), transparent 44%),
    radial-gradient(ellipse 120% 114% at 50% 48%,
      transparent 58%, rgba(0,0,0,.16) 78%, rgba(0,0,0,.38) 95%, rgba(0,0,0,.52) 100%);
  box-shadow: inset 0 0 105px rgba(0,0,0,.30), inset 0 0 30px rgba(0,0,0,.18);
}
.crt-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 44% 26% at 22% 8%, rgba(255,255,255,.025), transparent 72%);
}

/* the picture is never quite still, and once in a while the sync slips */
.crt-grain {
  position: absolute; inset: -60px; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .6 .6 .6 0 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: crt-grain .9s steps(4) infinite;
}
@keyframes crt-grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-24px,14px); }
  50%  { transform: translate(18px,-20px); }
  75%  { transform: translate(-10px,-12px); }
  100% { transform: translate(0,0); }
}
.crt-grain::after {                       /* a tracking band, rarely */
  content: ''; position: absolute; left: 0; right: 0; top: -40px; height: 24px;
  background: linear-gradient(180deg, transparent, rgba(52,183,221,.05) 45%,
              rgba(255,255,255,.10) 56%, transparent);
  transform: skewX(-14deg); opacity: 0;
  animation: crt-track 31s linear infinite;
}
@keyframes crt-track {
  0%, 82% { opacity: 0; top: -40px; }
  83% { opacity: 1; top: 3%; }
  89% { opacity: .7; top: 44%; }
  95% { opacity: 0; top: 104%; }
  100% { opacity: 0; top: 104%; }
}

body.crt-on .desktop { animation: crt-slip 26s steps(1) infinite; }
@keyframes crt-slip {
  0%, 100% { transform: translateX(0); }
  46.90% { transform: translateX(0); }
  46.96% { transform: translateX(1.4px) skewX(.25deg); }
  47.02% { transform: translateX(-1px); }
  47.08% { transform: translateX(0) skewX(0); }
}

/* the switch in the tray */
.crt-toggle {
  font: 500 11px var(--font-mono); letter-spacing: .06em; cursor: pointer;
  color: rgba(255,255,255,.86); background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24); padding: 2px 7px;
}
.crt-toggle:hover { background: rgba(255,255,255,.26); }

@media (max-width: 760px) {
  .crt-lines { background: repeating-linear-gradient(0deg,
      rgba(0,0,0,.14) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
  .crt-lines::after, .crt-glass::after, .crt-grain::after { display: none; }
  .crt-glass { border-radius: 0; box-shadow: inset 0 0 50px rgba(0,0,0,.24); }
  body.crt-on .desktop { animation: none; }
  .degauss { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-grain, .crt-grain::after, body.crt-on .desktop { animation: none !important; }
}