/* Skipstone studio site — additional styles on top of colors_and_type.css */

* { box-sizing: border-box; }

/* CRT casing variables — drives the rounded-screen illusion + bezel colour.
   Tweak in one place. Mobile shrinks the curve so it doesn't dominate on
   narrow viewports. */
:root {
  --crt-casing:   #1A1426;   /* dark plum, slightly deeper than --ss-mulberry */
  --crt-bezel:    14px;      /* gap between viewport edge and screen */
  --crt-curve-x:  46px;
  --crt-curve-y:  30px;
}
@media (max-width: 640px) {
  :root {
    --crt-bezel:    5px;
    --crt-curve-x:  22px;
    --crt-curve-y:  14px;
  }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--ss-bone);
  overflow-x: hidden;
}

/* Viewport-fixed CRT bezel — the rounded "screen" sits inside this and the
   casing colour fills everything OUTSIDE it via a massive box-shadow. Always
   anchored to the viewport, never scrolls with the page.

   Two stacked shadows on a single element:
     1. Outer (0 0 0 100vmax) — casing colour fills everywhere outside the
        rounded rect. Hard, opaque.
     2. Inner (inset, blurred + slight spread) — a soft falloff that fades
        the casing into the screen for ~60px, so the screen→bezel transition
        reads as a gentle curve rather than a hard line.
*/
.crt-casing {
  /* The rounded frame is back. The previous attempt had a binary edge —
     fully-transparent screen suddenly hits opaque casing at the rounded
     border. Now the screen darkens GRADUALLY toward the edge via an
     inner radial gradient, so by the time you reach the rounded boundary
     the screen is already ~65% plum. That makes the bezel transition
     read as 0.65 → 1.0 instead of 0 → 1.0 — a soft fade, not a hard cut.
  */
  position: fixed;
  inset: var(--crt-bezel);
  pointer-events: none;
  z-index: 10000;
  border-radius: var(--crt-curve-x) / var(--crt-curve-y);
  /* Inner gradient — clipped to the rounded rect, fades the screen toward
     the bezel. Centre stays fully clear. */
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 55%,
    rgba(26, 20, 38, 0.08) 68%,
    rgba(26, 20, 38, 0.25) 80%,
    rgba(26, 20, 38, 0.50) 92%,
    rgba(26, 20, 38, 0.65) 100%
  );
  /* Outer fill — casing colour everywhere outside the rounded screen */
  box-shadow: 0 0 0 100vmax var(--crt-casing);
  /* Faint bezel-lip highlight */
  outline: 1px solid rgba(242, 240, 229, 0.05);
  outline-offset: -1px;
}

/* Pixel rendering for any image we want crisp */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Hard pixel typography for tiny labels */
.pixel-text {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
}

/* Page shell */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--ss-s-6);
  position: relative;
  z-index: 1;
}

/* CRT scanline overlay (toggle).
   Three layered animations, all subtle:
     1. crtDrift  — scanlines slide downward at ~3px/s. Definitely visible at
                    rest, never distracting.
     2. crtRoll   — a faint horizontal "vsync" band drifts top→bottom across the
                    page every ~9s. Sells "live signal" without strobing.
     3. crtFlicker— rare opacity dip every ~12s. Single steppy frame.
*/
@keyframes crtDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}
@keyframes crtRoll {
  0%   { transform: translateY(-30vh); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(130vh); opacity: 0; }
}
@keyframes crtFlicker {
  0%, 97%, 100% { opacity: 1; }
  98%           { opacity: 0.82; }
  99%           { opacity: 0.94; }
}
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(53, 43, 66, 0.03) 0px,
      rgba(53, 43, 66, 0.03) 1px,
      transparent 1px,
      transparent 4px
    );
  background-size: 100% 4px;
  mix-blend-mode: multiply;
  animation: crtDrift 1.4s linear infinite, crtFlicker 12s steps(40, end) infinite;
  will-change: background-position, opacity;
}
.crt-overlay::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 110px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(53, 43, 66, 0.05) 45%,
    rgba(53, 43, 66, 0.07) 50%,
    rgba(53, 43, 66, 0.05) 55%,
    transparent 100%
  );
  animation: crtRoll 9s linear infinite;
  will-change: transform, opacity;
}
.crt-overlay::after {
  /* The casing-element gradient now carries the entire screen-curve job.
     This layer only handles the very faint reflection sheen on the upper
     glass — every other darkening was compounding with the casing fade
     and making the screen feel murky. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(242, 240, 229, 0.030) 0%,
    transparent 18%);
}

/* Barrel-warp wrapper — DISABLED.
   The SVG feDisplacementMap filter was killing performance (the browser
   re-rasterised the entire page on every paint, and with multiple
   running animations the memory + CPU usage spiked badly). The wrapper
   div remains in App.jsx + the SVG filter defs remain in index.html as
   a no-op, but the filter is not applied. Real CRT warp at this scale
   needs either a CSS-only illusion or a WebGL approach — revisit later.
*/
.crt-screen {
  /* filter: url(#crt-warp);  — disabled, see comment above */
}
@media (prefers-reduced-motion: reduce) {
  .crt-overlay,
  .crt-overlay::before { animation: none; }
}

/* Dither grain overlay (very subtle) */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.21  0 0 0 0 0.17  0 0 0 0 0.26  0 0 0 1 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* Eyebrow label, stamped */
.eyebrow {
  font-family: var(--ss-body);
  font-size: var(--ss-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ss-mulberry);
  -webkit-font-smoothing: none;
}

/* Stamp shadow utility */
.stamp {
  border: 1.5px solid var(--ss-mulberry);
  background: var(--ss-bone);
  box-shadow: 2px 2px 0 var(--ss-mulberry);
}
.stamp-mint   { background: var(--ss-mint);  border-color: var(--ss-navy); }
.stamp-pink   { background: var(--ss-pink);  color: var(--ss-mulberry); }
.stamp-plum   { background: var(--ss-mulberry); color: var(--ss-bone); border-color: var(--ss-mulberry); }

/* Marquee */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}

/* Wordmark stone idle skip */
@keyframes stoneSkip {
  0%, 70%, 100% { transform: translate(0, 0); }
  76%           { transform: translate(2px, -3px); }
  82%           { transform: translate(4px, 0); }
  88%           { transform: translate(6px, -2px); }
  94%           { transform: translate(8px, 0); }
}
.stone-skip {
  display: inline-block;
  animation: stoneSkip 4.2s steps(1, end) infinite;
}

/* Blinking cursor */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.cursor { display: inline-block; animation: blink 1s steps(1, end) infinite; }

/* Pixel button — base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  font-family: var(--ss-body);
  font-size: var(--ss-fs-md);
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1.5px solid var(--ss-mulberry);
  background: var(--ss-mulberry);
  color: var(--ss-bone);
  box-shadow: 2px 2px 0 var(--ss-navy);
  text-decoration: none;
  transition: transform 80ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 80ms cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-font-smoothing: none;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ss-navy);
}
.btn:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 var(--ss-navy);
}
.btn-ghost {
  background: var(--ss-bone);
  color: var(--ss-mulberry);
  border-color: var(--ss-mulberry);
  box-shadow: 2px 2px 0 var(--ss-mulberry);
}
.btn-ghost:hover { box-shadow: 4px 4px 0 var(--ss-mulberry); }
.btn-ghost:active { box-shadow: 0 0 0 var(--ss-mulberry); }

.btn-mint {
  background: var(--ss-mint);
  color: var(--ss-navy);
  border-color: var(--ss-navy);
  box-shadow: 2px 2px 0 var(--ss-navy);
}

/* Cursor trail pebble (drawn via JS) */
.trail-pebble {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  width: 8px;
  height: 8px;
  background: var(--ss-mint);
  border: 1.5px solid var(--ss-mulberry);
  border-radius: var(--ss-r-pebble);
}

/* Section heading */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed color-mix(in oklab, var(--ss-mulberry) 35%, transparent);
}
.section-head .num {
  font-family: var(--ss-display);
  font-size: 36px;
  color: var(--ss-mulberry);
  line-height: 1;
}
.section-head .label {
  font-family: var(--ss-body);
  font-size: var(--ss-fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ss-mulberry);
  -webkit-font-smoothing: none;
}
.section-head .rule { flex: 1; }

/* Game card hover hit */
.game-card { transition: transform 80ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 80ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.game-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ss-mulberry) !important; }
.game-card:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ss-mulberry) !important; }

/* Terminal */
.terminal {
  background: var(--ss-mulberry);
  color: var(--ss-mint);
  border: 1.5px solid var(--ss-mulberry);
  box-shadow: 4px 4px 0 var(--ss-navy);
  padding: 14px 16px;
  font-family: var(--ss-mono);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ss-navy);
  border: 1.5px solid var(--ss-mulberry);
  border-bottom: 0;
  color: var(--ss-bone);
  font-family: var(--ss-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}
.terminal-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ss-bone); display: inline-block; }
.terminal-bar .dot.dot-mint { background: var(--ss-mint); }
.terminal-bar .dot.dot-pink { background: var(--ss-pink); }

/* Sticker rotated badge */
.sticker {
  display: inline-block;
  padding: 4px 10px 2px;
  font-family: var(--ss-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ss-pink);
  color: var(--ss-mulberry);
  border: 1.5px solid var(--ss-mulberry);
  box-shadow: 2px 2px 0 var(--ss-mulberry);
  transform: rotate(-3deg);
  -webkit-font-smoothing: none;
}

/* Headline */
.display { font-family: var(--ss-display); line-height: 0.95; letter-spacing: -0.01em; color: var(--ss-navy); }

/* Mint hover underline */
.lnk {
  color: var(--ss-navy);
  text-decoration: underline;
  text-decoration-color: var(--ss-mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
.lnk:hover { text-decoration-color: var(--ss-pink); }

/* Sun/star pixel decor */
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.twinkle { animation: twinkle 1.4s steps(2, end) infinite; }

/* Cards on cards row */
.shelf-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 760px) {
  .shelf-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .shelf-row { grid-template-columns: 1fr; }
}

/* Dev-log (blog post) grid — same breakpoints as the shelf */
@media (max-width: 760px) {
  .devlog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
  .devlog-grid { grid-template-columns: 1fr !important; }
}

/* Git-history split (terminal + sidebar) — stack on narrow screens */
@media (max-width: 760px) {
  .log-grid { grid-template-columns: 1fr !important; }
}

/* Two-column featured */
.feat {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border: 1.5px solid var(--ss-mulberry);
  background: var(--ss-bone);
  box-shadow: 4px 4px 0 var(--ss-mulberry);
}
@media (max-width: 760px) {
  .feat { grid-template-columns: 1fr; }
}

/* Pond canvas frame */
.pond-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1.5px solid var(--ss-mulberry);
  background: var(--ss-mulberry);
  box-shadow: 4px 4px 0 var(--ss-navy);
  overflow: hidden;
  image-rendering: pixelated;
}

/* keyboard key */
.kbd {
  display: inline-block;
  padding: 2px 8px 1px;
  border: 1.5px solid var(--ss-mulberry);
  background: var(--ss-bone-warm);
  font-family: var(--ss-body);
  font-size: 13px;
  box-shadow: 1px 1px 0 var(--ss-mulberry);
  -webkit-font-smoothing: none;
}

/* corner marks */
.corner-mark {
  position: absolute;
  font-family: var(--ss-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ss-bone);
  opacity: 0.7;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  z-index: 2;
}

/* Boot animation for body fade in (no scroll fades, but page-load is allowed) */
@keyframes bootFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.boot-fade { animation: bootFade 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ============================================================
   Mobile responsive overrides.

   Hero / Featured / Footer set grid-template-columns and headline
   fontSize via inline JSX style, which beats class rules without
   !important. Rules below target both class hooks (.hero-grid,
   .feat-grid, .footer-grid, .log-grid, .ss-wordmark, .feat-countdown)
   and the pre-existing .display class so headlines collapse even
   without JSX changes.
   ============================================================ */
@media (max-width: 760px) {
  .page { padding: 0 14px; overflow-x: hidden; }

  /* Force every multi-column grid back to one column on phones */
  .hero-grid   { grid-template-columns: 1fr !important; gap: 18px !important; align-items: start !important; }
  .feat-grid   { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .log-grid    { grid-template-columns: 1fr !important; }

  /* Display headlines: hero h1 + featured title both render via .display.
     Filepile pixel caps are ~0.95em wide, so 9vw keeps a 10-char line on screen. */
  .display { font-size: clamp(30px, 9vw, 96px) !important; overflow-wrap: anywhere; }

  /* Wordmark — class is set on Wordmark's inner text div. */
  .ss-wordmark { font-size: clamp(34px, 11vw, 60px) !important; }

  /* Featured card: thumbnail flips above text */
  .feat-thumb  { min-height: 200px !important; border-right: 0 !important; border-bottom: 1.5px solid var(--ss-mulberry) !important; }
  .feat-right  { padding: 20px 18px 18px !important; min-width: 0 !important; }

  /* Countdown: 4 tiles in a row overflow narrow screens — stack 2x2 */
  .feat-countdown { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* "est. nz '24" sticker — pull inside the viewport */
  .hero-sticker { right: 0 !important; top: -14px !important; transform: rotate(6deg) scale(0.85); transform-origin: top right; }

  /* Section heads: wrap rather than squeeze the dashed rule to zero */
  .section-head { flex-wrap: wrap; gap: 8px 12px; }
  .section-head .rule { flex-basis: 100%; order: 99; }

  /* Pond reads as a thin letterbox at 16/7 on a phone — give it 4/3 */
  .pond-frame { aspect-ratio: 4 / 3 !important; }

  /* Defensive: nothing inside .page may overflow its column */
  .page img, .page canvas, .page svg { max-width: 100%; }
}

@media (max-width: 420px) {
  .page { padding: 0 12px; }
  .display { font-size: clamp(26px, 9.5vw, 72px) !important; }
  .feat-right .display { font-size: clamp(28px, 10vw, 48px) !important; }
}