/* ═══════════════════════════════════════════════════════════════
   SKJÁR & DISKUR — crt.css
   Monitor casing, glass curvature, scanlines, static, flicker,
   boot sequence, blue screen. All decorative, all switchable.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* one small tiled SVG noise, reused everywhere */
  --noise:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --paperfibre:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E");
}

/* ══════════════ the frame ══════════════ */
.crt{
  position:fixed; inset:0; z-index:700;
  pointer-events:none;
  contain:strict;
}
html[data-crt="off"] .crt__curve,
html[data-crt="off"] .crt__glow,
html[data-crt="off"] .crt__vignette,
html[data-crt="off"] .crt__bezel{ display:none; }

/* casing + rounded glass corners */
.crt__curve{
  position:absolute; inset:var(--bezel);
  border-radius:clamp(6px, 1.6vw, 24px);
  box-shadow:
    0 0 0 var(--bezel) #c4bba4,
    0 0 0 calc(var(--bezel) + 2px) #6f6a5c,
    0 0 0 calc(var(--bezel) + 3px) rgba(0,0,0,.55),
    inset 0 0 26px 8px rgba(0,0,0,.5),
    inset 0 0 90px 30px rgba(0,0,0,.28);
}
/* plastic grain on the casing + faint chromatic fringing at the glass edge */
.crt__bezel{
  position:absolute; inset:0;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.07;
  mix-blend-mode:overlay;
}
.crt__curve::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,60,90,.10) 0, rgba(255,60,90,0) 3%,
    rgba(0,0,0,0) 97%, rgba(60,150,255,.10) 100%);
  mix-blend-mode:screen;
}
/* soft internal reflection across the glass */
.crt__curve::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(128deg,
    rgba(255,255,255,.075) 0 18%,
    rgba(255,255,255,.018) 30%,
    transparent 52%);
  mix-blend-mode:screen;
}

.crt__vignette{
  position:absolute; inset:var(--bezel);
  border-radius:clamp(6px, 1.6vw, 24px);
  background:radial-gradient(125% 115% at 50% 45%, transparent 52%, rgba(0,0,0,.42) 100%);
}
.crt__glow{
  position:absolute; inset:var(--bezel);
  border-radius:clamp(6px, 1.6vw, 24px);
  background:radial-gradient(70% 55% at 50% 38%, rgba(190,225,205,.055), transparent 70%);
  mix-blend-mode:screen;
}

/* ══════════════ scanlines ══════════════ */
.crt__scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0 1px,
    rgba(0,0,0,0)   1px 3px);
  opacity:.55;
}
html[data-scanlines="off"] .crt__scan{ display:none; }

/* slow refresh roll — one soft band drifting down the glass */
html[data-scanlines="on"]:not([data-motion="reduce"]) .crt__scan::after{
  content:""; position:absolute; left:0; right:0; height:22vh;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.045) 45%, transparent);
  animation:roll 7.5s linear infinite;
}
@keyframes roll{ from{ transform:translateY(-30vh) } to{ transform:translateY(130vh) } }

/* ══════════════ analog static + flicker ══════════════ */
.crt__static{
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.035;
  mix-blend-mode:screen;
}
html:not([data-motion="reduce"]) .crt__static{ animation:grain .6s steps(6,end) infinite; }
html[data-static="off"] .crt__static{ display:none; }
@keyframes grain{
  0%  { transform:translate3d(0,0,0) }
  20% { transform:translate3d(-2%,1%,0) }
  40% { transform:translate3d(1%,-2%,0) }
  60% { transform:translate3d(-1%,-1%,0) }
  80% { transform:translate3d(2%,1%,0) }
  100%{ transform:translate3d(0,0,0) }
}
html[data-crt="on"]:not([data-motion="reduce"]) .crt__glow{ animation:flicker 9s steps(1,end) infinite; }
@keyframes flicker{
  0%,96%   { opacity:1 }
  96.5%    { opacity:.72 }
  97%      { opacity:1 }
  97.6%    { opacity:.84 }
  98%,100% { opacity:1 }
}

/* momentary signal loss (triggered from JS) */
.crt.is-glitch .crt__static{ opacity:.32; }
.crt.is-glitch .crt__scan{ opacity:.85; }

/* ══════════════ boot sequence ══════════════ */
.boot{
  position:fixed; inset:0; z-index:1000;
  background:#0a0d0c;
  display:grid; place-items:center;
  padding:clamp(1rem, 5vw, 3rem);
}
.boot[hidden]{ display:none; }
.boot.is-out{ animation:crtoff .45s steps(6,end) forwards; }
@keyframes crtoff{
  0%  { opacity:1; transform:scaleY(1) }
  60% { opacity:1; transform:scaleY(.06) }
  100%{ opacity:0; transform:scaleY(.002) }
}
html[data-motion="reduce"] .boot.is-out{ animation:none; opacity:0; }

.boot__inner{ width:min(100%, 720px); }
.boot__log{
  font-family:var(--f-term);
  font-size:clamp(1rem, 3.4vw, 1.35rem);
  line-height:1.45;
  color:var(--green);
  text-shadow:0 0 8px rgba(131,201,107,.45);
  margin:0 0 1.4rem;
  white-space:pre-wrap;
  min-height:11.5em;
}
.boot__log b{ color:var(--cream); font-weight:400; }
.boot__log i{ color:var(--amber); font-style:normal; }

.boot__barwrap{ display:flex; align-items:center; gap:.8rem; }
.boot__bar{
  flex:1; height:20px; padding:2px;
  border:1px solid #3f4a44;
  background:#101513;
}
.boot__bar span{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 11px);
}
.boot__pct{ font-family:var(--f-term); color:var(--green); font-size:1.2rem; min-width:4ch; }

.boot__ready{
  margin-top:1.2rem;
  font-family:var(--f-display); font-size:clamp(1.3rem,4vw,2rem);
  color:var(--green); text-shadow:0 0 14px rgba(131,201,107,.5);
}
html:not([data-motion="reduce"]) .boot__ready{ animation:blink .5s steps(1,end) 3; }

.boot__skip{
  position:fixed; right:1.2rem; bottom:1.2rem;
  background:transparent; border:1px solid #3f4a44;
  color:#9fb0a6; font-family:var(--f-term); font-size:1.05rem;
  padding:.45rem .9rem; cursor:pointer;
}
.boot__skip:hover{ color:var(--green); border-color:var(--green); }

/* ══════════════ blue screen easter egg ══════════════ */
.bsod{
  position:fixed; inset:0; z-index:1200;
  background:#0b2a86;
  color:#e9edf7;
  font-family:var(--f-mono);
  font-size:clamp(.8rem, 2.1vw, 1rem);
  line-height:1.7;
  display:grid; place-items:center;
  padding:clamp(1rem, 6vw, 4rem);
  text-align:center;
  cursor:pointer;
}
.bsod[hidden]{ display:none; }
.bsod h2{
  font-family:var(--f-mono); font-weight:400; text-transform:none;
  background:#c8cddc; color:#0b2a86;
  display:inline-block; padding:.1em 1.2em; margin-bottom:1.4em;
  font-size:1em;
}
.bsod p{ max-width:64ch; margin-inline:auto; }
.bsod .bsod__code{ color:#ffd479; }

/* ══════════════ toast ══════════════ */
.toast{
  position:fixed; left:50%; bottom:calc(var(--taskbar-h) + 14px);
  transform:translateX(-50%);
  z-index:1100;
  background:var(--panel); color:var(--ink);
  font-family:var(--f-term); font-size:1.1rem;
  padding:.55rem 1.1rem;
  border:1px solid var(--bevel-sh);
  box-shadow:inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo), 3px 3px 0 rgba(0,0,0,.45);
  max-width:min(92vw, 520px);
}
.toast[hidden]{ display:none; }

/* ══════════════ cursor-follower (technician mode) ══════════════ */
.cursor-tool{
  position:fixed; z-index:1150; width:28px; height:28px;
  pointer-events:none; translate:8px 8px;
}
.cursor-tool[hidden]{ display:none; }

/* ══════════════ technician mode ══════════════ */
html.tech-mode{ --amber:var(--green); }
html.tech-mode .menubar,
html.tech-mode .taskbar,
html.tech-mode .win__bar{ box-shadow:inset 0 0 0 1px rgba(131,201,107,.5); }
html.tech-mode .mono{ color:var(--green); }
html.tech-mode .crt__glow{ background:radial-gradient(70% 55% at 50% 38%, rgba(131,201,107,.12), transparent 70%); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}