/* The scene: a beige PC built from CSS 3D boxes, drawn at --u per unit.
   The portfolio screen lives inside the CRT, so the whole machine stays a 3D object. */

:root {
  --u: 3.5px;
  --pc-line: rgba(80, 66, 40, 0.35);
  --pc-slot: #3b332a;
  --crt-black: #0b0f0c;
  --crt-green: #b7f0b4;
  --s: 0.3;
  --tx: 0px;
  --ty: 0px;
  --rx: -12deg;
  --ry: -24deg;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--room);
}
.scene .room {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 236, 200, 0.10), rgba(0, 0, 0, 0) 48%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 236, 200, 0.05), rgba(0, 0, 0, 0) 50%),
    var(--room);
}

.stage {
  position: absolute;
  inset: 0;
  perspective: 2400px;
  perspective-origin: 50% 45%;
}

.pc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(360 * var(--u));
  height: calc(480 * var(--u));
  margin-left: calc(-180 * var(--u));
  margin-top: calc(-240 * var(--u));
  transform-style: preserve-3d;
  transform: translate3d(var(--tx), var(--ty), 0) scale3d(var(--s), var(--s), var(--s)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.25, 1);
  will-change: transform;
}

.shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(560 * var(--u));
  height: calc(480 * var(--u));
  margin-left: calc(-280 * var(--u));
  margin-top: calc(-240 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 68%);
  transform: translateY(calc(216 * var(--u))) rotateX(90deg) translateZ(calc(-6 * var(--u)));
}

/* 3D box primitive */
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  transform-style: preserve-3d;
}
.box .face {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--pc-beige);
  backface-visibility: hidden;
}
.f-front, .f-back { width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2); }
.f-left, .f-right { width: var(--d); height: var(--h); margin-left: calc(var(--d) / -2); margin-top: calc(var(--h) / -2); }
.f-top, .f-bottom { width: var(--w); height: var(--d); margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2); }
.f-front { transform: translateZ(calc(var(--d) / 2)); }
.f-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: var(--pc-beige-dark); }
.f-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: var(--pc-beige-dark); }
.f-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: var(--pc-beige-deep); }
.f-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: var(--pc-beige-light); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: var(--pc-beige-deep); }

.box .face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset calc(1 * var(--u)) calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.45), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 rgba(80, 66, 40, 0.25);
  background-image: 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='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: calc(60 * var(--u)) calc(60 * var(--u));
}

/* tower */
.tower { --w: calc(360 * var(--u)); --h: calc(130 * var(--u)); --d: calc(330 * var(--u)); transform: translateY(calc(150 * var(--u))); }
.tower .f-front {
  background: linear-gradient(180deg, var(--pc-beige-light), var(--pc-beige) 30%, var(--pc-beige-dark));
  border-radius: calc(4 * var(--u));
}
.tw-ridge { position: absolute; left: calc(118 * var(--u)); top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: calc(2 * var(--u)); background: linear-gradient(180deg, rgba(80,66,40,0.25), rgba(80,66,40,0.45)); box-shadow: calc(1 * var(--u)) 0 0 rgba(255,255,255,0.4); }
.tw-power { position: absolute; left: calc(18 * var(--u)); top: calc(16 * var(--u)); width: calc(30 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--pc-beige-dark); box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,0.5), inset 0 calc(-1 * var(--u)) 0 rgba(80,66,40,0.4), 0 calc(1 * var(--u)) 0 rgba(80,66,40,0.3); }
.tw-leds { position: absolute; left: calc(20 * var(--u)); top: calc(92 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
.tw-leds i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #8e8571; box-shadow: inset 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,0.4); }
.tw-leds i:first-child { background: #7fd58a; box-shadow: 0 0 calc(6 * var(--u)) rgba(127,213,138,0.8); }
.tw-vents { position: absolute; left: calc(60 * var(--u)); top: calc(14 * var(--u)); width: calc(50 * var(--u)); height: calc(100 * var(--u)); background: repeating-linear-gradient(45deg, rgba(80,66,40,0.35) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(8 * var(--u))); clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%); }
.tw-bay { position: absolute; left: calc(148 * var(--u)); right: calc(24 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(3 * var(--u)); background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(80,66,40,0.08)); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(80,66,40,0.3); }
.tw-bay-a { top: calc(14 * var(--u)); }
.tw-bay-b { top: calc(70 * var(--u)); height: calc(42 * var(--u)); }
.tw-slot { position: absolute; left: calc(16 * var(--u)); right: calc(56 * var(--u)); top: calc(16 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--pc-slot); box-shadow: inset 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,0.6), 0 calc(1 * var(--u)) 0 rgba(255,255,255,0.35); }
.tw-slot-sm { left: calc(110 * var(--u)); right: calc(50 * var(--u)); top: calc(15 * var(--u)); height: calc(7 * var(--u)); }
.tw-lever { position: absolute; right: calc(18 * var(--u)); top: calc(10 * var(--u)); width: calc(22 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--pc-beige-dark); box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,0.5), inset 0 calc(-1 * var(--u)) 0 rgba(80,66,40,0.45); }
.tw-eject { position: absolute; right: calc(20 * var(--u)); top: calc(14 * var(--u)); width: calc(16 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--pc-beige-dark); box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,0.5), inset 0 calc(-1 * var(--u)) 0 rgba(80,66,40,0.45); }
.tw-badge { position: absolute; left: calc(18 * var(--u)); top: calc(44 * var(--u)); width: calc(36 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(2 * var(--u)); background: linear-gradient(135deg, rgba(80,66,40,0.18), rgba(80,66,40,0.05)); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(80,66,40,0.35); }

/* swivel base */
.swivel { --w: calc(210 * var(--u)); --h: calc(22 * var(--u)); --d: calc(220 * var(--u)); transform: translateY(calc(74 * var(--u))); }
.swivel .face { background: var(--pc-beige-dark); }
.swivel .f-top { background: var(--pc-beige); }

/* monitor */
.monitor { --w: calc(330 * var(--u)); --h: calc(290 * var(--u)); --d: calc(300 * var(--u)); transform: translateY(calc(-82 * var(--u))); }
.monitor .f-front {
  background: linear-gradient(160deg, var(--pc-beige-light), var(--pc-beige) 45%, var(--pc-beige-dark));
  border-radius: calc(10 * var(--u));
}
.monitor .f-top, .monitor .f-right, .monitor .f-left, .monitor .f-back { border-radius: calc(8 * var(--u)); }
.bezel {
  position: absolute;
  inset: calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: linear-gradient(180deg, var(--pc-beige-dark), var(--pc-beige) 20%, var(--pc-beige) 80%, var(--pc-beige-dark));
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,0.5), inset 0 0 0 calc(1 * var(--u)) rgba(80,66,40,0.25);
}

/* the CRT: 242 x 186 units */
.crt {
  position: absolute;
  left: calc(22 * var(--u));
  right: calc(22 * var(--u));
  top: calc(18 * var(--u));
  bottom: calc(54 * var(--u));
  border-radius: calc(14 * var(--u)) / calc(18 * var(--u));
  background: radial-gradient(ellipse at 50% 45%, #141a16 0%, var(--crt-black) 70%, #050705 100%);
  box-shadow:
    inset 0 0 0 calc(2 * var(--u)) #1c1a16,
    inset 0 0 calc(18 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.9),
    0 0 0 calc(3 * var(--u)) rgba(80,66,40,0.35),
    0 calc(2 * var(--u)) 0 calc(4 * var(--u)) rgba(255,255,255,0.25);
  overflow: hidden;
  font-family: var(--font-pixel);
  color: var(--crt-green);
  text-shadow: 0 0 calc(2 * var(--u)) rgba(183,240,180,0.7);
}
.scene:not(.is-on) .crt { cursor: pointer; }
.crt-text {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(4 * var(--u));
  text-align: center;
  padding: calc(6 * var(--u));
}
.crt-name { font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.crt-start {
  appearance: none;
  background: none;
  border: 0;
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  text-shadow: inherit;
  cursor: pointer;
  border-radius: calc(2 * var(--u));
}
.crt-start:hover, .crt-start:focus-visible { background: rgba(183,240,180,0.12); outline: none; }
.crt-cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  margin-left: 0.2em;
  vertical-align: -0.1em;
  background: currentColor;
  animation: crtBlink 1.1s steps(1) infinite;
}
@keyframes crtBlink { 50% { opacity: 0; } }
.crt-boot {
  position: absolute;
  inset: 0;
  padding: calc(8 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  white-space: pre-line;
  display: none;
}
.crt.is-booting .crt-text { display: none; }
.crt.is-booting .crt-boot { display: block; }
.crt.is-on .crt-text, .crt.is-on .crt-boot { display: none; }
.crt-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at 28% 16%, rgba(255,255,255,0.08), rgba(255,255,255,0) 42%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.45) 100%);
}
.scene:not(.is-on) .crt-glass {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 calc(2 * var(--u)), rgba(0,0,0,0.28) calc(2 * var(--u)) calc(3 * var(--u))),
    radial-gradient(ellipse at 30% 18%, rgba(255,255,255,0.14), rgba(255,255,255,0) 40%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

/* the screen, inside the CRT, laid out at full size */
.screen {
  position: absolute;
  inset: 0;
  font-family: var(--font-body);
  color: var(--cream);
  text-shadow: none;
  display: grid;
  grid-template-rows: 52px 1fr 48px;
  grid-template-columns: 1fr;
  grid-template-areas: "top" "desk" "bottom";
}
.screen[hidden] { display: none; }

.mon-label {
  position: absolute;
  left: calc(26 * var(--u));
  right: calc(26 * var(--u));
  bottom: calc(18 * var(--u));
  height: calc(24 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.mon-brand { font-family: var(--font-body); font-size: calc(4.2 * var(--u)); line-height: 1; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(80,66,40,0.7); margin-right: auto; white-space: nowrap; }
.mon-serial { font-family: var(--font-body); font-size: calc(4 * var(--u)); line-height: 1; font-weight: 600; letter-spacing: 0.16em; color: rgba(80,66,40,0.5); margin-left: calc(4 * var(--u)); margin-right: auto; }
.mon-led { width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: #7fd58a; box-shadow: 0 0 calc(3 * var(--u)) rgba(127,213,138,0.9); }
.mon-knob { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--pc-beige-dark); box-shadow: inset 0 calc(0.5 * var(--u)) 0 rgba(255,255,255,0.5), inset 0 calc(-0.5 * var(--u)) 0 rgba(80,66,40,0.5); }
.monitor .sticker {
  position: absolute;
  right: calc(70 * var(--u));
  bottom: calc(14 * var(--u));
  padding: calc(1.2 * var(--u)) calc(2.4 * var(--u));
  background: var(--orange);
  color: #1a0a04;
  font-family: var(--font-body);
  font-size: calc(3.2 * var(--u));
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 0 calc(0.5 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,0.3);
  z-index: 2;
}

.intro-skip {
  position: absolute;
  right: var(--s-300);
  bottom: var(--s-300);
  appearance: none;
  background: none;
  border: 0;
  padding: var(--s-75) var(--s-100);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-30);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.3s var(--ease), opacity 0.5s var(--ease);
}
.intro-skip:hover { color: var(--cream); }
.scene.is-on .intro-skip { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .crt-cursor { animation: none; }
  .pc { transition: none; }
}

/* phones: no machine. The screen is lifted out of the CRT by intro.js and becomes the page. */
@media (max-width: 760px) {
  .scene { position: static; overflow: visible; background: none; }
  .screen { position: static; inset: auto; display: block; }
  .screen[hidden] { display: none; }
}