/* Living monitors: an old beige CRT that becomes a thin modern screen while the project inside changes.
   Every size and colour is derived from four phases (0 → 1) that js/monitor.js writes on .monitor:
   --noise (screen switching on), --hw (case and bezel), --late (screen shape, glass and stand), --scroll.
   The defaults below are the final state, so without JS (or with reduced motion) people see the finished work. */

.monitor {
  --hw: 1;
  --late: 1;
  --noise: 0;
  --scroll: 0;
  --cut-1: 0%;
  --cut-2: 0%;
  --case: color-mix(in srgb, #0B0A10 calc(var(--hw) * 100%), #D8CDB8);
  --lip: color-mix(in srgb, #0B0A10 calc(var(--hw) * 100%), #B9AE9A);
  --bezel: calc(var(--bezel-min) + (1 - var(--hw)) * var(--bezel-extra));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.monitor--lg {
  --bezel-min: 10px;
  --bezel-extra: 34px;
  --neck-h: 44px;
  width: min(100%, 1080px, calc((100svh - 220px) * 1.45));
  margin-inline: auto;
}

.monitor--sm {
  --bezel-min: 6px;
  --bezel-extra: 18px;
  --neck-h: 26px;
  width: 100%;
}

.monitor-case {
  position: relative;
  box-sizing: border-box;
  width: calc(72% + 28% * var(--late));
  padding: var(--bezel) var(--bezel) calc(var(--bezel) * 1.35);
  border-radius: calc(12px + (1 - var(--hw)) * 22px);
  background: var(--case);
  box-shadow: inset 0 -8px 0 var(--lip), 0 40px 120px rgba(0, 0, 0, 0.5);
}

/* Ventilation slots on top of the CRT; they fade with the beige. */
.monitor-case::before {
  content: '';
  position: absolute;
  top: calc(var(--bezel) * 0.32);
  left: 32%;
  width: 36%;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 10px, transparent 10px 16px);
  opacity: calc(1 - var(--hw));
}

.monitor-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: calc(4 / 3 + (16 / 10 - 4 / 3) * var(--late));
  border-radius: calc(4px + (1 - var(--late)) * 22px);
  background: #111;
}

.monitor-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* The oldest screen looks like an old tube: a touch soft, faded and warm. */
.monitor-layer[data-stage='0'] {
  filter: blur(calc((1 - var(--late)) * 0.6px)) saturate(calc(1 - (1 - var(--late)) * 0.25)) sepia(calc((1 - var(--late)) * 0.15));
}

.monitor-layer[data-stage='1'] {
  clip-path: inset(0 0 0 var(--cut-1));
}

.monitor-layer[data-stage='2'] {
  clip-path: inset(0 0 0 var(--cut-2));
}

/* The LED sketch (js/sketch.js) keeps its blue: no old-tube fade on it, only the CRT scanlines on top. */
.sketch-canvas {
  background: #0E0D14;
}

.monitor-layer.sketch-canvas {
  filter: none;
}

/* A long screenshot that scrolls by itself at the end, as if someone were browsing it. */
.monitor-layer--scroll {
  overflow: hidden;
}

.monitor-layer--scroll img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(calc(var(--scroll) * -30%));
}

/* Glass effects: grey static while it switches on, then scanlines and a dark vignette that clear up. */
.monitor-fx,
.monitor-fx::before,
.monitor-fx::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.monitor-fx::before {
  content: '';
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2px),
    #2B2B2B;
  opacity: var(--noise);
}

.monitor-fx::after {
  content: '';
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 90px 24px rgba(0, 0, 0, 0.6);
  opacity: calc(1 - var(--late));
}

.monitor-year {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(14, 13, 20, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.monitor-led {
  position: absolute;
  right: calc(var(--bezel) + 6px);
  bottom: calc(var(--bezel) * 0.55 - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) calc(var(--late) * 100%), #F2A541);
}

.monitor-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.monitor-neck {
  width: calc(4% + (1 - var(--late)) * 14%);
  height: var(--neck-h);
  background: var(--lip);
}

.monitor-foot {
  width: calc(26% + (1 - var(--late)) * 16%);
  height: calc(6px + (1 - var(--late)) * 20px);
  border-radius: 10px 10px 4px 4px;
  background: var(--case);
}

.monitor figcaption {
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* Older browsers: without these features the var()-driven values above are dropped entirely,
   so the monitor shows its final, modern look instead of collapsing. */
@supports not (aspect-ratio: calc(1 + 1)) {
  .monitor-screen {
    aspect-ratio: 16 / 10;
  }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .monitor-case,
  .monitor-neck,
  .monitor-foot {
    background: #0B0A10;
  }

  .monitor-led {
    background: var(--accent);
  }
}

/* With reduced motion the monitor stays in its final state; these thumbnails tell the before and after. */
.monitor-thumbs {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .monitor-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    width: 100%;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
  }

  /* The demos' "before" is built in HTML, so its thumbnail is a small screen rather than an image. */
  .monitor-thumbs .monitor-screen {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
  }

  .monitor-thumbs .sketch-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
  }

  .monitor-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    border-radius: 6px;
  }

  .monitor-thumbs li > span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
  }
}

@media (max-width: 860px) {
  .monitor--lg {
    --bezel-min: 6px;
    --bezel-extra: 16px;
    --neck-h: 28px;
  }

  .monitor-case {
    width: 100%;
  }

  .monitor-year {
    left: 10px;
    bottom: 8px;
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* "Before" screens for the demos: a generic old desktop program showing the problem (no real brands).
   Sizes follow the screen width (container units) so it reads the same on a phone and a desktop. */
.monitor-screen {
  container-type: inline-size;
}

.before-screen {
  box-sizing: border-box;
  padding: 7cqw 8cqw;
  background: #3A6EA5;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 4.2cqw;
  line-height: 1.35;
  color: #111;
}

.before-screen p,
.before-screen ul {
  margin: 0;
}

.before-win {
  border: 2px solid #DFDFDF;
  border-right-color: #404040;
  border-bottom-color: #404040;
  background: #C0C0C0;
}

.before-bar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.8cqw 1.6cqw;
  background: #000080;
  color: #fff;
  font-weight: 700;
}

.before-bar i {
  width: 3cqw;
  height: 2.6cqw;
  background: #C0C0C0;
}

.before-bar i:first-of-type {
  margin-left: auto;
}

.before-alert {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2.4cqw 3cqw 1cqw;
  font-weight: 700;
}

.before-dot {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: #D11;
  animation: before-blink 1s steps(2, start) infinite;
}

.before-screen .before-list {
  margin: 1cqw 3cqw 3cqw;
  padding: 1.4cqw 2.4cqw;
  border: 2px solid #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
  background: #fff;
  list-style: none;
}

.before-list--mail li {
  font-weight: 700;
}

.before-list--mail li + li {
  border-top: 1px solid #ddd;
}

.before-note {
  position: absolute;
  right: 6cqw;
  bottom: 9cqw;
  padding: 3cqw 3.4cqw;
  background: #FFE873;
  box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.35);
  font-family: 'Comic Sans MS', 'Segoe Print', cursive;
  font-size: 4.6cqw;
  transform: rotate(-4deg);
}

@keyframes before-blink {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .before-dot {
    animation: none;
  }
}