/* ============================================================
   style.css - how the site LOOKS.
   Read top to bottom: colours -> layout -> text -> CRT effects.
   ============================================================ */

/* 1. COLOURS ("CSS variables"). Change a value here and it changes everywhere.
   Use them with var(--name). */
:root {
  --bg:      #01040d;                 /* screen background (near black blue) */
  --bezel:   #0b0f18;                 /* plastic frame colour */
  --phosphor:#5cc8ff;                 /* main text blue */
  --dim:     #2a7fb5;                 /* less important text */
  --bright:  #d6f3ff;                 /* highlights */
  --glow:    rgba(60, 170, 255, .55); /* glow around text */
}

/* 2. RESET: make width/height include padding, remove default page margin */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bezel); }

/* 3. LAYOUT: "flexbox" centres the monitor in the browser window */
body {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(6px, 2vw, 28px);       /* clamp(min, ideal, max) = flexible size */
  font-family: "VT323", "Courier New", monospace;
  color: var(--phosphor);
  background: radial-gradient(ellipse at center, #202735 0%, var(--bezel) 72%);
}

/* 4. THE MONITOR (outer frame) */
.monitor {
  position: relative; width: 100%; height: 100%;
  max-width: 1100px; max-height: 760px;
  padding: 24px; border: 1px solid #30394b; border-radius: 48px;
  background: linear-gradient(145deg, #3a4353 0%, #161c28 18%, #080b12 62%, #252d3b 100%);
  box-shadow: 0 0 0 3px #080a0f, 0 5px 0 #05070b,
              inset 0 2px 2px rgba(255,255,255,.18), inset 0 -10px 18px rgba(0,0,0,.7),
              0 30px 80px rgba(0,0,0,.8), 0 0 90px rgba(40,120,255,.12);
}
.monitor::before {
  content: ""; position: absolute; inset: 7px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 42px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}

/* 5. THE SCREEN (curved glass). overflow:hidden clips anything sticking out. */
.screen {
  position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;
  border: 3px solid #060912; border-radius: 11% / 14%;
  background: radial-gradient(ellipse at 50% 43%, #092044 0%, #020a19 58%, var(--bg) 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.98), inset 0 0 28px rgba(60,170,255,.3),
              0 2px 5px rgba(255,255,255,.08), 0 8px 12px rgba(0,0,0,.65);
  animation: flicker 5s infinite;
}
.language-picker { position: absolute; top: -22px; right: clamp(24px, 5vw, 70px); z-index: 10; pointer-events: auto; display: flex; align-items: center; gap: 5px; visibility: hidden; }
.language-picker.in-content { position: static; justify-content: flex-end; margin: .3em 0 .5em; visibility: visible; }
.language-picker > span:not(.visually-hidden) { font-size: 1.1em; line-height: 1; }
.language-picker select { font: inherit; font-size: .8em; color: var(--phosphor); background: rgba(1,4,13,.8);
                          border: 1px solid var(--dim); padding: .15em .35em; cursor: pointer; box-shadow: 0 4px 0 #05070b, 0 0 8px rgba(0,0,0,.5); }
.language-picker select:focus-visible { outline: 1px solid var(--bright); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
                  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 6. TEXT AREA. position:absolute + inset:0 = fill the screen. overflow-y:auto = scroll. */
.terminal {
  position: absolute; inset: 0; overflow-y: auto;
  padding: clamp(22px, 4.5vw, 52px);
  font-size: clamp(19px, 2.6vw, 25px); line-height: 1.15;
  white-space: pre-wrap;                /* keep line breaks, still wrap long lines */
  word-break: break-word;
  /* text-shadow stacks: tight glow, wide glow, then red/blue edges for a colour-fringe look */
  text-shadow: 0 0 2px var(--phosphor), 0 0 9px var(--glow),
               -1px 0 rgba(255,60,120,.28), 1px 0 rgba(60,140,255,.35);
  scrollbar-width: none; cursor: text;
}
.terminal::-webkit-scrollbar { display: none; }

/* 7. TEXT STYLES used by script.js */
.hi  { color: var(--bright); }
.dim { color: var(--dim); }
.dir { color: #8fe0ff; font-weight: bold; }
.name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.name { font-size: clamp(38px, 8vw, 84px); line-height: 1; letter-spacing: .06em; color: var(--bright); margin: .1em 0 .2em; }
.name-video { display: block; width: auto; height: clamp(38px, 8vw, 84px); max-width: 100%; margin: .1em 0 .2em; object-fit: contain; }
#prompt-line { display: flex; flex-wrap: wrap; }

/* Blinking cursor block */
.cursor { display: inline-block; width: .55em; height: 1em; vertical-align: -.12em;
          background: var(--phosphor); box-shadow: 0 0 8px var(--glow); animation: blink 1s steps(1) infinite; }

/* 8. BUTTONS and clickable text */
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: .5em 0 .8em; }
button.btn {
  font: inherit; color: var(--phosphor); text-shadow: inherit; cursor: pointer;
  background: rgba(40,120,200,.08); border: 1px solid var(--phosphor); padding: .15em .8em;
  box-shadow: 0 0 8px var(--glow), inset 0 0 8px rgba(60,170,255,.15);
}
button.btn:hover, button.btn:focus-visible { background: var(--phosphor); color: var(--bg); text-shadow: none; outline: none; }
a.link { color: var(--bright); text-decoration: underline; cursor: pointer; }

/* 9. PHOTO GRID: as many 110px+ columns as fit, each photo cropped square */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: .5em 0 .8em; }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: pointer;
            border: 1px solid var(--dim); opacity: .92; }
.grid img:hover { opacity: 1; border-color: var(--bright); box-shadow: 0 0 14px var(--glow); }
.thumb { max-width: min(100%, 320px); border: 1px solid var(--dim); cursor: pointer; display: block; }
.films { display: grid; gap: 14px; margin: .5em 0 .8em; }
.film { display: flex; gap: 14px; max-width: 720px; padding: 8px; color: var(--phosphor); text-decoration: none;
  border: 1px solid var(--dim); background: rgba(40,120,200,.08); }
.film:hover, .film:focus-visible { border-color: var(--bright); box-shadow: 0 0 14px var(--glow); outline: none; }
.film img { width: min(260px, 38%); aspect-ratio: 16 / 9; object-fit: cover; align-self: flex-start; }
.film-copy { display: flex; flex-direction: column; gap: .35em; }
.film-copy strong { color: var(--bright); font-size: 1.2em; }
.film-link { color: var(--bright); text-decoration: underline; }
.videos { display: grid; gap: 10px; width: min(100%, 420px); margin: .5em 0 .8em; }
.video-card { display: grid; min-width: 0; }
.video-card iframe { width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--dim); background: var(--bg); }
.video-selectors { display: flex; flex-wrap: wrap; gap: 6px; }
.video-selectors .btn { min-width: 2.2em; padding-left: .35em; padding-right: .35em; }

/* 10. LIGHTBOX (big photo viewer). Hidden by default; script.js adds class "open". */
#lightbox { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
            justify-content: center; gap: 10px; padding: clamp(18px, 4vw, 44px);
            background: rgba(1,4,13,.95); cursor: pointer; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 100%; max-height: calc(100% - 44px); object-fit: contain; border: 1px solid var(--dim); }
#lightbox span { color: var(--dim); font-size: clamp(16px, 2vw, 20px); }

/* 11. CRT EFFECT LAYERS: stacked over the screen; pointer-events:none lets clicks pass through */
.layer { position: absolute; inset: 0; pointer-events: none; }
.scanlines { /* thin dark horizontal lines, repeated every 3px */
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,8,30,.38) 3px);
  mix-blend-mode: multiply; }
.beam { /* a soft bright band that sweeps down the screen */
  inset: auto 0 auto 0; height: 22%; animation: sweep 7s linear infinite;
  background: linear-gradient(to bottom, transparent, rgba(90,190,255,.07), transparent); }
.noise { /* film grain: a tiny SVG noise image, jittered */
  opacity: .07; mix-blend-mode: screen; animation: grain .5s steps(4) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .7  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.vignette { /* darker corners, like a real tube */
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.05), transparent 45%),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }

/* 12. ANIMATIONS: @keyframes describes the steps, "animation:" on an element plays it */
@keyframes blink   { 50% { opacity: 0; } }
@keyframes sweep   { from { transform: translateY(-120%); } to { transform: translateY(560%); } }
@keyframes grain   { 25% { background-position: -40px 20px; } 50% { background-position: 30px -50px; } 75% { background-position: -20px -30px; } }
@keyframes flicker { 0%,100% { opacity: 1; } 92% { opacity: .98; } 93% { opacity: .9; } 94% { opacity: 1; } 97% { opacity: .96; } }

/* Respect visitors who ask their device for less motion */
@media (prefers-reduced-motion: reduce) { .screen, .beam, .noise, .cursor { animation: none; } }

/* The real keyboard input lives off-screen */
#hidden-input { position: absolute; left: -9999px; opacity: 0; }