@font-face {
    font-family: "segoe-ui";
    src: url('segoe-ui.ttf')
}

@font-face {
    font-family: "arial-black";
    src: url('arial-black.ttf')
}

@font-face {
    font-family: "calibri";
    src: url('calibri.ttf')
}

* {
    box-sizing: border-box;
}

body {
    font-size: 18px;
    font-family: 'segoe-ui', serif;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pillarboxed/letterboxed 4:3 "monitor" frame. Sized to be the
   largest 4:3 box that fits the viewport, centered, with plain
   black filling the rest — crops the sides on any wider-than-4:3
   window instead of stretching to fill it. This wraps the whole
   site (every iframe: terminal boot, loading, desktop), not just
   the intro, and everything — including the CRT transition — is
   clipped to it via overflow: hidden. */
.crt-frame {
    position: relative;
    width: min(100vw, calc(100vh * 4 / 3));
    height: min(100vh, calc(100vw * 3 / 4));
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04), 0 0 60px rgba(0, 0, 0, 0.9);
}

.site-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}

/* ================================================================
   INTRO CRT / VHS OVERLAY
   Mounted for the boot intro only — scanlines, vignette, sweep,
   flicker and edge fringing sit above the terminal-boot and loading
   (crimsonsky) iframes. index.js hides this the moment the desktop
   is revealed, so the desktop itself renders clean with no CRT
   treatment. It comes back automatically on the next full boot
   (e.g. after Log Off, which reloads the page).
   ================================================================ */
.crt-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

.crt-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0.4) 2px,
        rgba(0, 0, 0, 0) 3px
    );
    background-size: 100% 4px;
    animation: scanScroll 9s linear infinite;
    opacity: 0.65;
}

@keyframes scanScroll {
    from { background-position: 0 0; }
    to   { background-position: 0 200px; }
}

.crt-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 52%,
            rgba(0, 0, 0, 0.4) 85%,
            rgba(0, 0, 0, 0.82) 100%);
    box-shadow: inset 0 0 150px 45px rgba(0, 0, 0, 0.9);
}

.crt-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 48%,
        rgba(255, 255, 255, 0) 100%
    );
    height: 140%;
    animation: sweepMove 5.5s linear infinite;
}

@keyframes sweepMove {
    from { transform: translateY(-60%); }
    to   { transform: translateY(10%); }
}

.crt-flicker {
    position: absolute;
    inset: 0;
    background: #000;
    animation: flicker 6s infinite;
}

@keyframes flicker {
    0%, 100% { opacity: 0; }
    92%      { opacity: 0; }
    93%      { opacity: 0.06; }
    94%      { opacity: 0; }
    97%      { opacity: 0.04; }
    98%      { opacity: 0; }
}

.crt-fringe {
    position: absolute;
    inset: 0;
    box-shadow:
        inset 4px 0 6px -4px rgba(255, 0, 60, 0.25),
        inset -4px 0 6px -4px rgba(0, 120, 255, 0.25);
}

/* ================================================================
   CRT flash / wide-open transition, played by index.js when
   swapping loading.html out for desktop.html. Lives INSIDE
   .crt-frame (appended there by index.js) so it's clipped by the
   frame's overflow:hidden, same as everything else on the site —
   it no longer bleeds past the pillarboxed edges.
   0.00s -> 0.20s  overlay blacks out (iframe swap happens here)
   0.20s -> 0.70s  bright line flashes, then grows to fill the frame
   0.48s -> 0.70s  overlay itself fades away, revealing the desktop
   ================================================================ */
#crt-transition {
    position: absolute;
    inset: 0;
    z-index: 80;
    background: #000;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

#crt-transition.run {
    animation:
        crtBlackout 200ms ease-in forwards,
        crtFadeReveal 220ms ease-out 480ms forwards;
}

#crt-transition-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow:
        0 0 30px 10px rgba(255, 255, 255, 0.9),
        0 0 90px 30px rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scaleY(0.01);
    opacity: 0;
}

#crt-transition.run #crt-transition-line {
    animation: crtLineFlash 500ms ease-out 200ms forwards;
}

@keyframes crtBlackout {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes crtFadeReveal {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes crtLineFlash {
    0%   { transform: translate(-50%, -50%) scaleY(0.01); opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: translate(-50%, -50%) scaleY(0.02); opacity: 1; }
    100% { transform: translate(-50%, -50%) scaleY(1);    opacity: 0; }
}