/* ------------------------------------------------------------------
   Coded42 Lab — 3D scrolling code wall
   Tweak the look from the custom properties below.
------------------------------------------------------------------- */
:root {
  /* Camera */
  --perspective: 92vw;  /* scales with the screen so the angle looks the same everywhere */
  --tilt-y: 30deg;      /* how far the right side recedes */
  --tilt-x: 7deg;      /* how far the top leans back */
  --tilt-z: -2deg;      /* roll: lines slope down to the right */

  /* Code */
  --code-size: clamp(16px, 2.1vw, 40px);
  --code-line: 1.62;

  /* Depth of field focus point (screen coordinates) */
  --focus-x: 26%;
  --focus-y: 46%;

  /* Palette sampled from the reference */
  --bg: #07090c;
  --c-text: #f2efe6;
  --c-tag: #9be15d;
  --c-attr: #e6e86a;
  --c-string: #56d6e8;
  --c-keyword: #ffc04a;
  --c-func: #6fe3c6;
  --c-number: #ff8a3d;
  --c-comment: #7fd3ff;
  --c-punct: #c9c4b8;
  --c-error: #ff5a4e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--c-text);
  overflow: hidden;
}

/* ---------- 3D scene ---------- */
.scene {
  position: fixed;
  inset: 0;
  perspective: var(--perspective);
  perspective-origin: 18% 42%;
  overflow: hidden;
}

.plane {
  position: absolute;
  left: 4vw;
  top: -80vh;
  width: 320vw;
  height: 260vh;
  transform-origin: 0% 50%;
  transform: rotateY(var(--tilt-y)) rotateX(var(--tilt-x)) rotateZ(var(--tilt-z));
  transform-style: preserve-3d;
  overflow: hidden;
}

.scroller {
  font-family: "JetBrains Mono", "Fira Code", Consolas, "DejaVu Sans Mono", monospace;
  font-weight: 700;
  font-size: var(--code-size);
  line-height: var(--code-line);
  white-space: pre;
  letter-spacing: -0.01em;
  /* Soft phosphor bloom like a photographed monitor */
  text-shadow: 0 0 .35em color-mix(in srgb, currentColor 45%, transparent);
  tab-size: 4;
  display: flex;
  gap: 3ch;
  will-change: transform; /* code-wall.js moves it every frame */
}

.pane { flex: none; width: var(--pane-width, 100ch); }
.line { display: block; color: var(--c-text); }
.ln {
  display: inline-block;
  width: 3ch;
  margin-right: 2ch;
  text-align: right;
  font-weight: 500;
  color: rgba(242, 239, 230, .22);
  text-shadow: none;
}

.t-tag     { color: var(--c-tag); }
.t-attr    { color: var(--c-attr); }
.t-string  { color: var(--c-string); }
.t-keyword { color: var(--c-keyword); }
.t-func    { color: var(--c-func); }
.t-number  { color: var(--c-number); }
.t-comment { color: var(--c-comment); font-weight: 500; }
.t-punct   { color: var(--c-punct); }
.t-error   { color: var(--c-error); }
.t-type    { color: var(--c-string); }

/* ---------- Depth of field ----------
   Each layer blurs what is behind it, masked so the blur only applies
   outside an ellipse around the focus point. Stacking 4 layers with
   growing radii gives a smooth, lens-like falloff. */
.dof { position: fixed; inset: 0; pointer-events: none; }

.dof__layer {
  position: absolute;
  inset: 0;
  --mask: radial-gradient(
    ellipse var(--rx) var(--ry) at var(--focus-x) var(--focus-y),
    transparent 0%, transparent 55%, #000 100%
  );
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
}
.dof__layer--1 { --rx: 40vw; --ry: 48vh; backdrop-filter: blur(1.2px); -webkit-backdrop-filter: blur(1.2px); }
.dof__layer--2 { --rx: 58vw; --ry: 64vh; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dof__layer--3 { --rx: 78vw; --ry: 84vh; backdrop-filter: blur(5.5px); -webkit-backdrop-filter: blur(5.5px); }
.dof__layer--4 { --rx: 98vw; --ry: 104vh; backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at var(--focus-x) var(--focus-y), transparent 45%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.65) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.7) 100%),
    linear-gradient(to right, rgba(0,0,0,.6) 0%, transparent 9%);
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #000 2px 3px);
  mix-blend-mode: multiply;
}

/* ---------- Hero copy ---------- */
.hero {
  position: fixed;
  right: clamp(16px, 6vw, 96px);
  bottom: clamp(24px, 9vh, 110px);
  max-width: min(520px, calc(100vw - 32px));
  padding: clamp(20px, 3vw, 36px);
  border-radius: 18px;
  font-family: Inter, system-ui, sans-serif;
  background: rgba(7, 9, 12, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.hero__eyebrow {
  margin: 0 0 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--c-comment);
}
.hero__title {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--c-string);
}
.hero__title sup {
  position: relative;
  top: -.95em;
  margin-left: .04em;
  font-size: .46em;
  vertical-align: 0;
  color: var(--c-keyword);
}
.hero__tagline {
  margin: 14px 0 24px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(242, 239, 230, .75);
}
.hero__cta {
  display: inline-flex;
  gap: .5em;
  align-items: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--c-tag);
  color: #0b1004;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--c-tag) 40%, transparent); }

/* ---------- Language HUD ---------- */
.hud {
  position: fixed;
  top: clamp(16px, 4vh, 36px);
  right: clamp(16px, 6vw, 96px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font: 500 13px "JetBrains Mono", monospace;
  color: var(--c-text);
  background: rgba(7, 9, 12, .6);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hud__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-tag);
  box-shadow: 0 0 10px var(--c-tag);
}
.hud__lang { color: rgba(242, 239, 230, .5); }

/* ---------- Character glitch ----------
   While switching languages code-wall.js swaps characters for these
   scrambled, colour-split glyphs before settling on the new code. */
.gl {
  text-shadow: -.09em 0 rgba(255, 40, 90, .85), .09em 0 rgba(40, 230, 255, .85);
}
.g-red   { color: var(--c-error); }
.g-cyan  { color: var(--c-string); }
.g-green { color: var(--c-tag); }

/* Add ?clean to the URL to show only the animation */
.clean .hero, .clean .hud { display: none; }

@media (max-width: 700px) {
  :root {
    --code-size: 15px;
    --tilt-y: 28deg;
    --focus-x: 30%;
    --focus-y: 32%;
  }
  .hero { left: 16px; right: 16px; bottom: 16px; }
  .hud { left: 16px; right: auto; }
}