/*
  www/css/comms.css
  Commander radio transmissions: a CSS-built CRT monitor (bezel, screws,
  scanlines, flicker, noise, vignette) showing a green pixel portrait,
  next to a phosphor-green typewriter log and channel buttons.
*/

.comms {
  --phos: #7CFF9E;
  --phos-dim: #2FAE58;
  background: radial-gradient(ellipse at 30% 40%, #062519 0%, #020D10 60%, #01080B 100%);
}
.comms .eyebrow { background: var(--phos); }

.radio {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center;
}

/* ---------- Monitor ---------- */
.crt {
  position: relative; padding: 26px 26px 54px; border-radius: 26px;
  background: linear-gradient(145deg, #3A4148, #1C2126 55%, #121518);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -6px 0 rgba(0, 0, 0, .4), 0 30px 60px rgba(0, 0, 0, .55), 0 0 90px rgba(124, 255, 158, .08);
}
.crt::before, .crt::after {
  content: ''; position: absolute; top: 12px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9aa3ab, #3a4148);
}
.crt::before { left: 12px; } .crt::after { right: 12px; }
.crt__screen {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 18px / 22px;
  background: #031A0C; border: 4px solid #0A0D0F;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9);
}
.crt__img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; animation: flicker 5s infinite steps(1); }
.crt.is-switching .crt__img { animation: tune .45s steps(6); }
/* Scanlines + vignette + glass glare */
.crt__screen::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .09) 0 18%, transparent 30%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .65) 100%);
}
.crt__noise {
  position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise .6s steps(4) infinite;
}
.crt__label {
  position: absolute; left: 50%; bottom: 15px; translate: -50% 0; padding: 5px 14px; border-radius: 5px;
  background: #0B0E10; color: var(--phos); font: 400 20px/1 var(--f-pixel); letter-spacing: .16em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- Log ---------- */
.log { font-family: var(--f-pixel); color: var(--phos); text-shadow: 0 0 8px rgba(124, 255, 158, .55); }
.log__meta { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: .08em; color: var(--phos-dim); }
.rec { width: 12px; height: 12px; border-radius: 50%; background: var(--vulcan); box-shadow: 0 0 10px var(--vulcan); animation: blink 1.2s steps(1) infinite; }
.log__name { margin-top: 14px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; color: #C8FFD6; }
.log__text { min-height: 7.2em; margin-top: 18px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; }
.log__text::after { content: '█'; margin-left: 4px; animation: blink 1s steps(1) infinite; }

.channels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.channel {
  position: relative; padding: 0; border: 2px solid rgba(124, 255, 158, .25); border-radius: 10px; overflow: hidden;
  background: #031A0C; cursor: pointer; transition: border-color .2s, transform .2s var(--ease-out);
}
.channel img { width: 100%; aspect-ratio: 1; object-fit: cover; opacity: .55; filter: saturate(.8); transition: opacity .2s; }
.channel span { position: absolute; inset: auto 0 0; padding: 3px 0; background: rgba(0, 0, 0, .7); color: var(--phos); font: 400 15px/1 var(--f-pixel); letter-spacing: .05em; }
.channel:hover { transform: translateY(-3px); }
.channel:hover img, .channel[aria-selected="true"] img { opacity: 1; }
.channel[aria-selected="true"] { border-color: var(--phos); box-shadow: 0 0 16px rgba(124, 255, 158, .4); }

@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 48% { opacity: 1; } 82% { opacity: .96; } }
@keyframes tune { 0% { filter: brightness(3) contrast(.4); transform: scaleY(.02); } 50% { filter: brightness(1.6); transform: scaleY(1.05) skewX(4deg); } 100% { filter: none; transform: none; } }
@keyframes noise { 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, 8%); } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 860px) {
  .radio { grid-template-columns: 1fr; }
  .crt { max-width: 420px; width: 100%; margin: 0 auto; padding: 16px 16px 46px; }
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .log__text { min-height: 8.4em; }
}