/* ============================================================
   scenes.css — per-chapter worlds + reusable visual pieces
   Each chapter sets its own --accent / --accent-2 / --glow and
   a signature background motif. Visual "stacks" create the
   multi z-index depth (cards offset + parallax speeds).
   ============================================================ */

/* ---------- Reusable: layered media stack (3D depth) ---------- */
.stack {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.stack__item {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform 0.5s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Reusable media frame + empty "drop asset here" state */
.media-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
}
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: var(--line);
}
.media-frame .ph {
  text-align: center;
  padding: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--paper-faint);
}
.media-frame .ph b {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.media-frame .ph .dim { color: var(--accent); }
.media-frame .ph svg { width: 30px; height: 30px; margin: 0 auto 0.8rem; stroke: var(--accent); }

.media-frame__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1.4rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* Small floating glass info card */
.float-card {
  position: absolute;
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(14, 14, 20, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-1);
  z-index: 6;
}
.float-card .k {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent);
}
.float-card .v {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Chapter SVG icon badge */
.ico-badge {
  display: inline-grid;
  place-items: center;
  width: clamp(46px, 6vw, 58px);
  height: clamp(46px, 6vw, 58px);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--scene-tint);
  color: var(--accent);
}
.ico-badge svg { width: 56%; height: 56%; stroke: var(--accent); fill: none; }

/* "30 years" stat strip */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.stat-strip .stat .n {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--accent);
}
.stat-strip .stat .l {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Generic chapter bg glow blob */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { --accent: var(--gold); --accent-2: #b59bff; --glow: rgba(236,193,120,0.45); --scene-tint: rgba(236,193,120,0.06); }
.hero .blob.a { width: 50vw; height: 50vw; left: -10vw; top: -10vw; background: rgba(236,193,120,0.18); }
.hero .blob.b { width: 40vw; height: 40vw; right: -8vw; bottom: -12vw; background: rgba(155,140,255,0.16); }
.hero__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 40% at 50% 42%, rgba(236,193,120,0.12), transparent 70%);
}

/* ============================================================
   1997 — EARLY WEB (CRT / phosphor)
   ============================================================ */
.scene--web {
  --accent: #5ef0c0; --accent-2: #4aa8ff;
  --glow: rgba(94,240,192,0.4); --scene-tint: rgba(74,168,255,0.06);
}
.scene--web .layer--bg {
  background-image:
    linear-gradient(rgba(94,240,192,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,240,192,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
}
.crt {
  position: relative;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(160deg, #1c2230, #0a0d14);
  border: 1px solid rgba(94,240,192,0.25);
  box-shadow: var(--shadow-2), inset 0 0 40px rgba(94,240,192,0.06);
}
.crt__screen {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #04130f;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.crt__screen::after {  /* scanlines */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,0.22) 2px 3px);
  pointer-events: none;
  animation: flicker 6s infinite;
}
.crt__screen .scan {
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  z-index: 2;
  background: linear-gradient(transparent, rgba(94,240,192,0.12), transparent);
  animation: scanline 5.5s linear infinite;
}
.crt__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: rgba(94,240,192,0.7);
}
.crt__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(94,240,192,0.4); }
.crt__url {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid rgba(94,240,192,0.25);
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.crt__code {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.4rem;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.3vw, 0.82rem);
  line-height: 1.85;
  color: #7ef7c8;
  text-shadow: 0 0 8px rgba(94,240,192,0.5);
}
.crt__code .t { color: #4aa8ff; }
.crt__code .s { color: #ffd166; }
.crt__code .cursor { display: inline-block; width: 9px; height: 1.1em; background: #7ef7c8; vertical-align: -2px; animation: blink 1.1s step-end infinite; }
.crt__foot {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--paper-faint);
  text-align: center;
}

/* ---- Flash (Ruffle) playback inside the CRT ---- */
.crt__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 1.1rem;
  padding: 1.2rem;
  text-align: center;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.crt__screen.is-playing .flash-grid,
.crt__screen.is-playing .crt__placeholder,
.crt__screen.is-playing .crt__code {
  opacity: 0;
  visibility: hidden;
}

/* 2x2 grid of the four real Flash examples, inside the CRT */
.flash-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.flash-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
  text-align: left;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.flash-tile:hover {
  transform: translateY(-3px);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.flash-tile__play {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: opacity var(--dur-fast);
}
.flash-tile:hover .flash-tile__play { opacity: 1; }
.flash-tile__name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.flash-tile__type {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
/* screenshot behind each archive tile (added by JS when the image exists) */
.flash-tile { overflow: hidden; }
.flash-tile__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}
.flash-tile.has-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 30%, rgba(2, 12, 9, 0.92));
  pointer-events: none;
}
.flash-tile__name,
.flash-tile__type { position: relative; z-index: 2; }
.flash-tile__play { z-index: 2; }
.flash-back {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 6;
  display: none;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.8em;
  border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
  background: rgba(4, 19, 15, 0.7);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.flash-back:hover { background: color-mix(in oklab, var(--accent) 20%, #04130f); }
.crt__screen.is-playing .flash-back { display: inline-flex; }
.flash-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background: #04130f;
}
.flash-play {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.62em 1.15em;
  border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.flash-play:hover {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  transform: translateY(-2px);
}
.flash-note {
  margin-top: 0.9rem;
  max-width: 46ch;
  margin-inline: auto;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--paper-dim);
  text-align: center;
}
.flash-note b { color: var(--paper); }
.flash-note code {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  padding: 0.05em 0.4em;
  border-radius: 4px;
}

/* ---- Site archive slider (inside the CRT) ---- */
.archive { position: absolute; inset: 0; z-index: 3; }
.archive__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.archive__track::-webkit-scrollbar { display: none; }
.archive__page {
  flex: 0 0 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 14px;
}
.archive__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 28px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  background: rgba(4, 19, 15, 0.55);
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-out);
}
.archive__nav:hover { background: color-mix(in oklab, var(--accent) 22%, #04130f); }
.archive__prev { left: 6px; }
.archive__next { right: 6px; }
.archive__dots { display: flex; gap: 6px; justify-content: center; margin-top: 9px; }
.archive__dots b {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper-faint); cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.archive__dots b.is-active { background: var(--accent); transform: scale(1.3); }

/* ---- Vintage browser modal ---- */
.site-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  background: rgba(4, 6, 10, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.site-viewer.is-open { opacity: 1; visibility: visible; }
.site-viewer__win {
  width: fit-content;
  max-width: 96vw;
  height: auto;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0b10;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-out);
}
.site-viewer.is-open .site-viewer__win { transform: none; }
.site-viewer__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(#1a1a22, #121219);
  border-bottom: 1px solid var(--line);
}
.site-viewer__dots { display: flex; gap: 0.4rem; }
.site-viewer__dots i { width: 11px; height: 11px; border-radius: 50%; background: #444; }
.site-viewer__dots i:nth-child(1) { background: #ff5f57; }
.site-viewer__dots i:nth-child(2) { background: #febc2e; }
.site-viewer__dots i:nth-child(3) { background: #28c840; }
.site-viewer__addr {
  flex: 1;
  padding: 0.42rem 0.9rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-viewer__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  display: grid;
  place-items: center;
  transition: background 0.2s, color 0.2s;
}
.site-viewer__close:hover { background: var(--gold); color: #0b0a07; }
/* the old sites are 800x600 designs — show them at that fixed logical size and
   scale the whole "screen" down to fit (keeps 4:3 even on a phone). JS sets the
   wrapper's px size + the iframe scale; these are the defaults before JS runs. */
.site-viewer__screen {
  flex: none;
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 96vw;
  overflow: hidden;
  background: #fff;
}
.site-viewer__frame { width: 800px; height: 600px; border: 0; background: #fff; transform-origin: top left; }
body.viewer-open { overflow: hidden; }

/* ============================================================
   SHIFT — pivot interstitial (.com -> art)
   ============================================================ */
.scene--shift {
  --accent: #ff9d4d; --accent-2: #ffd27a;
  --glow: rgba(255,157,77,0.4); --scene-tint: rgba(255,157,77,0.05);
  text-align: center;
}
.scene--shift .scene__inner { max-width: 1000px; }
.scene--shift h2 { font-size: var(--fs-hero); }
.scene--shift .blob.a { width: 46vw; height: 46vw; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(255,157,77,0.12); }
.pivot-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 2.2rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  flex-wrap: wrap;
}
.pivot-line .arrow { color: var(--accent); }
.pivot-line b { color: var(--paper); }

/* ============================================================
   GRAPHICATZ — laser cutting & machinery (molten)
   ============================================================ */
.scene--graphicatz {
  --accent: #ff7a3c; --accent-2: #ffd166;
  --glow: rgba(255,122,60,0.42); --scene-tint: rgba(255,122,60,0.06);
}
.scene--graphicatz .blob.a { width: 44vw; height: 44vw; right: -6vw; top: -4vw; background: rgba(255,122,60,0.16); }
.laser-rig { position: relative; }
.laser-rig .beam {
  position: absolute;
  top: -4%;
  left: 50%;
  width: 2px;
  height: 50%;
  background: linear-gradient(#fff, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent), 0 0 40px var(--accent);
  transform: translateX(-50%);
  z-index: 7;
  animation: laser-bob 3.6s var(--ease-inout) infinite;
}
.laser-rig .head {
  position: absolute;
  top: -7%;
  left: 50%;
  width: 60px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(160deg, #d9dde4, #6b7280);
  transform: translateX(-50%);
  z-index: 8;
  box-shadow: var(--shadow-1);
  animation: laser-bob 3.6s var(--ease-inout) infinite;
}
.ember {
  position: absolute;
  bottom: 14%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  z-index: 7;
  animation: ember-rise 2.8s linear infinite;
}

/* ============================================================
   LASER ENGINEERING — models (brass / engraved)
   ============================================================ */
.scene--laser {
  --accent: #e8b15a; --accent-2: #a7e3d2;
  --glow: rgba(232,177,90,0.4); --scene-tint: rgba(232,177,90,0.05);
}
.scene--laser .layer--bg {
  background-image: repeating-linear-gradient(45deg, rgba(232,177,90,0.05) 0 2px, transparent 2px 16px);
  mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 80%);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.chip {
  padding: 0.5em 1em;
  border-radius: 100px;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--accent); color: var(--paper); transform: translateY(-2px); }

/* Judo rank certificate (Israel Judo Association) */
.credential {
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 4.5vw, 3.4rem);
  max-width: 780px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.credential__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.credential__rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.1;
  text-align: center;
  color: var(--accent);
}
.credential__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--paper);
}
.credential__sub {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
}
.credential__quote {
  margin: 0 0 1.3rem;
  padding-left: 1rem;
  border-left: 2px solid color-mix(in oklab, var(--accent) 40%, transparent);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--paper-dim);
}
.credential__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.2rem;
}
.credential__by {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--paper-faint);
}

/* ============================================================
   BOOKS — Kodesh / 3D kids / Torah tunes (royal + anaglyph)
   ============================================================ */
.scene--books {
  --accent: #8aa6ff; --accent-2: #ff6b6b;
  --glow: rgba(138,166,255,0.4); --scene-tint: rgba(138,166,255,0.06);
}
.scene--books .blob.a { width: 40vw; height: 40vw; left: -6vw; bottom: -8vw; background: rgba(138,166,255,0.16); }
.book-fan { position: relative; height: 100%; }
.book {
  position: absolute;
  width: 44%;
  aspect-ratio: 2 / 3;
  border-radius: 6px 12px 12px 6px;
  box-shadow: var(--shadow-2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-display);
  color: #0b0a10;
  transition: transform var(--dur-slow) var(--ease-out);
}
.book::before { /* spine */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: rgba(0,0,0,0.22);
  border-radius: 6px 0 0 6px;
}
.book .ph { color: inherit; opacity: 0.85; }
.book.b1 { left: 4%; top: 16%; transform: rotate(-9deg); background: linear-gradient(150deg, #cdd8ff, #8aa6ff); z-index: 4; }
.book.b2 { left: 30%; top: 6%; transform: rotate(2deg); background: linear-gradient(150deg, #fff0e0, #ffd166); z-index: 6; }
.book.b3 { left: 54%; top: 18%; transform: rotate(11deg); background: linear-gradient(150deg, #ffd6d6, #ff8a8a); z-index: 5; }
/* anaglyph 3D shimmer on the kids book */
.book.b2 .anaglyph {
  font-family: var(--font-display);
  font-size: 1.4rem;
  position: relative;
  color: #111;
}
.book.b2 .anaglyph::before,
.book.b2 .anaglyph::after {
  content: "3D";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}
.book.b2 .anaglyph::before { color: #ff2d2d; transform: translateX(-2px); }
.book.b2 .anaglyph::after { color: #2dffff; transform: translateX(2px); }

/* ============================================================
   DENVER — 2013 USA, web design & SEO (digital + Rockies)
   ============================================================ */
.scene--denver {
  --accent: #9b8cff; --accent-2: #5ed6ff;
  --glow: rgba(155,140,255,0.4); --scene-tint: rgba(94,214,255,0.06);
}
.scene--denver .mountains {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: var(--z-scene-mid);
  opacity: 0.5;
}
.scene--denver .mountains svg { width: 100%; height: 100%; }
.seo-panel {
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(14,14,22,0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
}
.seo-panel .searchbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--paper-dim);
}
.seo-panel .searchbar i { width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 50%; position: relative; }
.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 90px; }
.bars span {
  flex: 1;
  background: linear-gradient(var(--accent), var(--accent-2));
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  transform: scaleY(0.18);
  transition: transform 1.1s var(--ease-out);
}
/* bars always show their height; .is-in just (re)plays the grow-in animation */
.scene--denver .bars span { transform: scaleY(var(--h, 0.4)); }
.scene--denver.is-in .bars span { transform: scaleY(var(--h, 0.5)); }
.seo-panel__cap {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--paper-dim);
}

/* ---- Website accordion (Denver / SEO section) ---- */
.site-accordion { display: flex; flex-direction: column; gap: 0.5rem; }
.site-acc {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(14, 14, 22, 0.92); /* opaque so the 3D planes can't bleed through and hide the text */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s;
}
.site-acc[open] {
  border-color: color-mix(in oklab, var(--accent) 42%, var(--line));
  background: rgba(22, 22, 32, 0.95);
}
.site-acc summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.site-acc summary::-webkit-details-marker { display: none; }
.site-acc__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
}
.site-acc__ico svg { width: 17px; height: 17px; }
.site-acc__name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 1rem; color: var(--paper); }
.site-acc__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.site-acc__chev { flex: none; color: var(--paper-dim); transition: transform 0.3s var(--ease-out), color 0.3s; }
.site-acc__chev svg { width: 16px; height: 16px; display: block; }
.site-acc[open] .site-acc__chev { transform: rotate(180deg); color: var(--accent); }
.site-acc__body { padding: 0 0.95rem 0.95rem 3.65rem; }
.site-acc__body p { margin: 0 0 0.5rem; font-size: var(--fs-small); line-height: 1.55; color: var(--paper-dim); }
.site-acc__body a { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--accent); }
.site-acc__body a:hover { text-decoration: underline; }
/* smooth expand where supported (2026) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .site-acc::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.32s var(--ease-out), content-visibility 0.32s allow-discrete;
  }
  .site-acc[open]::details-content { height: auto; }
}

/* LinkedIn link (contact section) */
.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  transition: color 0.2s;
}
.linkedin-link svg { color: var(--accent); flex: none; }
.linkedin-link:hover { color: var(--paper); }

/* ============================================================
   TEACHING — kids (playful warm)
   ============================================================ */
.scene--teaching {
  --accent: #ff8a6b; --accent-2: #ffd35e;
  --glow: rgba(255,138,107,0.4); --scene-tint: rgba(255,211,94,0.06);
}
.scene--teaching .blob.a { width: 38vw; height: 38vw; right: -4vw; top: 0; background: rgba(255,211,94,0.16); }
.confetti-shape {
  position: absolute;
  z-index: var(--z-scene-mid);
}

/* ============================================================
   JUDO — champion (red / white / indigo)
   ============================================================ */
.scene--judo {
  --accent: #ff5d5d; --accent-2: #7b8cff;
  --glow: rgba(255,93,93,0.4); --scene-tint: rgba(123,140,255,0.06);
}
.scene--judo .layer--bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 40% 50%, #000, transparent 80%);
}
.belt-knot {
  position: relative;
  height: 26px;
  border-radius: 4px;
  background: #0a0a0a;
  box-shadow: var(--shadow-1);
}
.belt-knot::after {
  content: "";
  position: absolute;
  right: 14%;
  top: -12px;
  width: 56px;
  height: 50px;
  border: 9px solid #0a0a0a;
  border-radius: 4px;
}
.medal {
  position: absolute;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a0, var(--accent));
  color: #5b1b1b;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--shadow-2);
  z-index: 7;
}

/* ============================================================
   FAMILY — the constant (warm rose + gold)
   ============================================================ */
.scene--family {
  --accent: #f3a6a0; --accent-2: #f0c97a;
  --glow: rgba(243,166,160,0.4); --scene-tint: rgba(243,166,160,0.06);
}
.scene--family .blob.a {
  width: 44vw; height: 44vw; left: 50%; top: 46%;
  transform: translate(-50%, -50%); background: rgba(243,166,160,0.12);
}

/* ============================================================
   TORAH — above all (gold + royal radiance)
   ============================================================ */
.scene--torah {
  --accent: #f0c97a; --accent-2: #caa6ff;
  --glow: rgba(240,201,122,0.45); --scene-tint: rgba(240,201,122,0.07);
  text-align: center;
}
.scene--torah .scene__inner { max-width: 1040px; }
.radiance {
  position: absolute;
  left: 50%; top: 46%;
  width: min(70vw, 640px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: var(--z-scene-bg);
}
.radiance .ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240,201,122,0.18);
  border-radius: 50%;
}
.radiance .ring:nth-child(2) { inset: 12%; }
.radiance .ring:nth-child(3) { inset: 24%; }
.radiance .ring:nth-child(4) { inset: 36%; border-color: rgba(202,166,255,0.22); }
.radiance .core {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  filter: blur(8px);
  animation: breathe 5s var(--ease-inout) infinite;
}
.heb-float {
  font-family: var(--font-hebrew);
  font-size: clamp(2.4rem, 7vw, 5rem);
  color: var(--accent);
  line-height: 1;
  opacity: 0.9;
}
.scene--torah blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--paper);
  max-width: 40ch;
  margin: 2rem auto 0;
}
.scene--torah cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-style: normal;
}

.torah-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  max-width: 940px;
  margin: 2.6rem auto 0;
  text-align: left;
}
.pillar {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 11, 16, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pillar h3 {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.pillar p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--paper-dim);
}
@media (max-width: 720px) {
  .torah-pillars { grid-template-columns: 1fr; max-width: 480px; }
}

/* SEO skills grid (Denver / SEO & Marketing) — reuses .pillar cards */
.seo-skills {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 720px) { .seo-skills { grid-template-columns: 1fr; } }

/* Selected client work — link cards (Denver / SEO section) */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.client-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 11, 16, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.client-card:hover,
.client-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  outline: none;
}
.client-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--paper);
}
.client-card__meta {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.client-card__note {
  margin-top: 0.15rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--paper-dim);
}
.client-card__go {
  margin-top: auto;
  padding-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--paper-faint);
  transition: color 0.3s;
}
.client-card:hover .client-card__go,
.client-card:focus-visible .client-card__go { color: var(--accent); }

/* ---- Contact accent ---- */
.contact { --accent: var(--gold); --accent-2: #b59bff; --glow: rgba(236,193,120,0.45); --scene-tint: rgba(236,193,120,0.06); }

/* ---- Mobile: simplify stacks ---- */
@media (max-width: 860px) {
  .stack { aspect-ratio: 4 / 3; margin-top: 2.5rem; }
  .float-card { padding: 0.7rem 0.9rem; }
  .float-card .k { font-size: 1.3rem; }
  .ghost-index { opacity: 0.35; }
}