/*
 * ed3n.com — HTML/CSS literary scene (zero client JS).
 *
 * Used by:
 *   /css          craft stage
 *   production <noscript> fallback (scoped .eden-css)
 *
 * Research: docs/css-crt/README.md
 *   Scanlines — Bebber / Clownes 50% gradient bars (NOT multiply-on-black)
 *   Phosphor mask — soft RGB vertical stripes
 *   Curvature — tube border-radius + deep inset shadows (not shader barrel)
 *   Atmosphere — layered radials + SVG feTurbulence dust
 *   Type CA — static red/cyan text-shadow
 */

/* —— Tokens —— */

.eden-css,
.eden-css-page {
  --void: #0a0a0a;
  --cream: #e8e0d0;
  --cream-rgb: 232, 224, 208;
  --attr: rgba(232, 224, 208, 0.72);

  --body-size: clamp(1.15rem, 2.4vw, 1.65rem);
  --body-lh: 1.65;
  --quote-max: 40rem;
  --pad-x: 1.5rem;
  --pad-y: 2rem;
  --attr-gap: 1.75rem;
  --attr-size: max(0.875rem, calc(var(--body-size) * 0.58));

  /* CRT — tuned to be *visible* on near-black (quiet, not arcade) */
  --scan-line: 3px;
  --scan-dark: 0.32;
  --scan-opacity: 1;
  --scan-drift: 36s;
  --phosphor-opacity: 0.55;
  --vignette-edge: 0.72;
  --tube-radius: 3.5% / 4.5%;
  --atmos-gain: 1;
  --grain-opacity: 0.12;
  --well-core: 0.97;
  --well-spread: 52%;
  --ca: 1;
}

/* Craft overrides (only when craft radios exist) */

html:has(#scan-medium:checked) .eden-css,
html:has(#scan-medium:checked).eden-css-page {
  --scan-dark: 0.48;
  --scan-line: 2.5px;
}
html:has(#scan-off:checked) .eden-css,
html:has(#scan-off:checked).eden-css-page {
  --scan-opacity: 0;
  --phosphor-opacity: 0;
}

html:has(#vig-strong:checked) .eden-css,
html:has(#vig-strong:checked).eden-css-page {
  --vignette-edge: 0.9;
}
html:has(#vig-off:checked) .eden-css,
html:has(#vig-off:checked).eden-css-page {
  --vignette-edge: 0.15;
}

html:has(#atmos-sparse:checked) .eden-css,
html:has(#atmos-sparse:checked).eden-css-page {
  --atmos-gain: 0.55;
}
html:has(#atmos-dense:checked) .eden-css,
html:has(#atmos-dense:checked).eden-css-page {
  --atmos-gain: 1.55;
}

html:has(#well-soft:checked) .eden-css,
html:has(#well-soft:checked).eden-css-page {
  --well-core: 0.78;
  --well-spread: 68%;
}

html:has(#type-large:checked) .eden-css,
html:has(#type-large:checked).eden-css-page {
  --body-size: clamp(1.25rem, 2.7vw, 1.85rem);
}

html:has(#grain-on:not(:checked)) .eden-css,
html:has(#grain-on:not(:checked)).eden-css-page {
  --grain-opacity: 0;
}

html:has(#ca-on:not(:checked)) .eden-css,
html:has(#ca-on:not(:checked)).eden-css-page {
  --ca: 0;
}

html:has(#curve-off:checked) .eden-css,
html:has(#curve-off:checked).eden-css-page {
  --tube-radius: 0;
}

/* —— Page shell (craft /css) —— */

.eden-css-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--cream);
  font-family: "EB Garamond", "Times New Roman", Times, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eden-css-page *,
.eden-css-page *::before,
.eden-css-page *::after,
.eden-css *,
.eden-css *::before,
.eden-css *::after {
  box-sizing: border-box;
}

/* Craft state inputs */
.craft-state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* —— Scene root —— */

.eden-css {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--void);
  color: var(--cream);
  font-family: "EB Garamond", "Times New Roman", Times, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Full-viewport tube: curvature cue via radius + inset glass */
.eden-css__tube {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--tube-radius);
  overflow: hidden;
  /* Deep tube glass — reads as CRT curvature / bezel */
  box-shadow:
    inset 0 0 12vmin rgba(0, 0, 0, 0.85),
    inset 0 0 4vmin rgba(0, 0, 0, 0.55),
    inset 0 0 1.5vmin rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(232, 224, 208, 0.04);
}

/* Outer page corners (outside tube radius) stay pure black */
.eden-css::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 100vmax #000;
  /* Cut hole for tube — approximate with mask on tube instead */
  display: none;
}

/* —— Atmosphere (painterly field) —— */

.eden-css__atmosphere {
  position: absolute;
  inset: -12%;
  z-index: 1;
  opacity: var(--atmos-gain);
  pointer-events: none;
  transform: rotate(-6deg) scale(1.05);
  background:
    /* Dense filament arm — lower right (Clifford-ish lobe) */
    radial-gradient(
      ellipse 55% 22% at 74% 66%,
      rgba(var(--cream-rgb), 0.28) 0%,
      rgba(var(--cream-rgb), 0.12) 28%,
      rgba(var(--cream-rgb), 0.04) 52%,
      transparent 72%
    ),
    /* Counter arm — upper left */
    radial-gradient(
      ellipse 48% 26% at 24% 30%,
      rgba(var(--cream-rgb), 0.24) 0%,
      rgba(var(--cream-rgb), 0.1) 32%,
      transparent 68%
    ),
    /* Spiral suggestion — mid band */
    radial-gradient(
      ellipse 70% 14% at 62% 48%,
      rgba(var(--cream-rgb), 0.16) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 16% at 30% 58%,
      rgba(var(--cream-rgb), 0.14) 0%,
      transparent 58%
    ),
    /* Soft secondary lobes */
    radial-gradient(
      ellipse 35% 30% at 82% 38%,
      rgba(var(--cream-rgb), 0.12) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 32% 28% at 14% 72%,
      rgba(var(--cream-rgb), 0.11) 0%,
      transparent 62%
    ),
    /* Core haze — slightly off-center, still dark enough for type */
    radial-gradient(
      ellipse 58% 50% at 47% 53%,
      rgba(var(--cream-rgb), 0.06) 0%,
      transparent 55%
    ),
    /* Star field / dust motes */
    radial-gradient(circle 1.2px at 11% 16%, rgba(var(--cream-rgb), 0.75), transparent 2.5px),
    radial-gradient(circle 1px at 19% 44%, rgba(var(--cream-rgb), 0.55), transparent 2px),
    radial-gradient(circle 1.4px at 27% 78%, rgba(var(--cream-rgb), 0.65), transparent 2.5px),
    radial-gradient(circle 1px at 38% 22%, rgba(var(--cream-rgb), 0.5), transparent 2px),
    radial-gradient(circle 1.2px at 46% 91%, rgba(var(--cream-rgb), 0.6), transparent 2.5px),
    radial-gradient(circle 1px at 58% 11%, rgba(var(--cream-rgb), 0.7), transparent 2px),
    radial-gradient(circle 1.5px at 67% 33%, rgba(var(--cream-rgb), 0.45), transparent 3px),
    radial-gradient(circle 1px at 73% 71%, rgba(var(--cream-rgb), 0.55), transparent 2px),
    radial-gradient(circle 1.2px at 81% 19%, rgba(var(--cream-rgb), 0.65), transparent 2.5px),
    radial-gradient(circle 1px at 88% 55%, rgba(var(--cream-rgb), 0.5), transparent 2px),
    radial-gradient(circle 1.3px at 93% 84%, rgba(var(--cream-rgb), 0.7), transparent 2.5px),
    radial-gradient(circle 1px at 6% 61%, rgba(var(--cream-rgb), 0.4), transparent 2px),
    radial-gradient(circle 1px at 52% 41%, rgba(var(--cream-rgb), 0.35), transparent 2px),
    /* Top falloff */
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.65) 0%,
      transparent 30%,
      transparent 70%,
      rgba(10, 10, 10, 0.35) 100%
    );
  filter: blur(0.6px);
}

/* Soft dust layer via SVG turbulence (CSS-Tricks grainy gradient pattern) */
.eden-css__dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(0.22 * var(--atmos-gain));
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.91 0 0 0 0 0.88 0 0 0 0 0.82 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  mask-image: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    transparent 0%,
    transparent 28%,
    black 55%,
    black 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    transparent 0%,
    transparent 28%,
    black 55%,
    black 100%
  );
}

.eden-css__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Reading well — solid black plate under quote */
.eden-css__well {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(var(--quote-max) + 4rem), 92%);
  height: min(62vh, 30rem);
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse 48% 42% at 50% 50%,
    rgba(10, 10, 10, var(--well-core)) 0%,
    rgba(10, 10, 10, calc(var(--well-core) * 0.95)) 22%,
    rgba(10, 10, 10, 0.55) 40%,
    transparent var(--well-spread)
  );
}

/* —— CRT overlays (on top of field + type area) —— */

/* Vignette + tube edge darkening */
.eden-css__vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: var(--tube-radius);
  background: radial-gradient(
    ellipse 68% 64% at 50% 48%,
    transparent 0%,
    transparent 32%,
    rgba(0, 0, 0, calc(var(--vignette-edge) * 0.35)) 58%,
    rgba(0, 0, 0, calc(var(--vignette-edge) * 0.75)) 78%,
    rgba(0, 0, 0, calc(var(--vignette-edge) * 0.95)) 100%
  );
}

/*
 * Scanlines — Clownes/Bebber pattern:
 * half transparent, half dark bar. Visible on black because bars are
 * stacked as absolute opacity darkening, not multiply blend.
 */
.eden-css__scanlines {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: var(--tube-radius);
  opacity: var(--scan-opacity);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, var(--scan-dark)) 50%
  );
  background-size: 100% var(--scan-line);
  animation: eden-scan-drift var(--scan-drift) linear infinite;
}

@keyframes eden-scan-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 var(--scan-line);
  }
}

/* Soft RGB phosphor / screen-door (Clownes vertical mask) */
.eden-css__phosphor {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: var(--tube-radius);
  opacity: var(--phosphor-opacity);
  background: linear-gradient(
    90deg,
    rgba(255, 60, 50, 0.045),
    rgba(80, 255, 100, 0.02),
    rgba(50, 100, 255, 0.045)
  );
  background-size: 3px 100%;
}

/* Glass glare — mild specular on upper tube */
.eden-css__glare {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  border-radius: var(--tube-radius);
  background: radial-gradient(
    ellipse 80% 40% at 50% 0%,
    rgba(232, 224, 208, 0.06) 0%,
    transparent 55%
  );
  mix-blend-mode: screen;
}

/* —— Quote —— */

.eden-css__reading {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
}

.eden-css__quote {
  position: relative;
  max-width: var(--quote-max);
  width: 100%;
  margin: 0;
}

.eden-css__quote p {
  margin: 0;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: 400;
  color: var(--cream);
  text-wrap: pretty;
  /* Subtle phosphor glow + optional CA */
  text-shadow:
    0 0 12px rgba(var(--cream-rgb), 0.12),
    calc(0.55px * var(--ca)) 0 0 rgba(255, 70, 60, 0.28),
    calc(-0.55px * var(--ca)) 0 0 rgba(60, 120, 255, 0.24);
}

.eden-css__quote footer {
  display: block;
  margin-top: var(--attr-gap);
  font-size: var(--attr-size);
  letter-spacing: 0.04em;
  color: var(--attr);
  font-style: normal;
  text-shadow:
    calc(0.4px * var(--ca)) 0 0 rgba(255, 70, 60, 0.18),
    calc(-0.4px * var(--ca)) 0 0 rgba(60, 120, 255, 0.15);
}

/* —— Reduced motion —— */

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

/* —— Craft chrome (/css only) —— */

.craft-hint {
  position: fixed;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(232, 224, 208, 0.45);
  pointer-events: none;
  font-family: "EB Garamond", "Times New Roman", Times, serif;
}

.craft-chip {
  position: fixed;
  top: 0.65rem;
  right: 0.75rem;
  z-index: 30;
  padding: 0.4rem 0.7rem;
  font-family: "EB Garamond", "Times New Roman", Times, serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(232, 224, 208, 0.55);
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(232, 224, 208, 0.15);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}

.craft-chip:hover,
html:has(#craft-open:checked) .craft-chip {
  color: rgba(232, 224, 208, 0.9);
  border-color: rgba(232, 224, 208, 0.35);
}

.craft-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3rem 0.75rem 1rem;
  background: rgba(10, 10, 10, 0.25);
  pointer-events: none;
}

html:has(#craft-open:checked) .craft-overlay {
  display: flex;
}

.craft-panel {
  pointer-events: auto;
  width: min(22rem, 100%);
  max-height: calc(100vh - 4rem);
  overflow: auto;
  padding: 1rem 1.1rem 1.15rem;
  background: rgba(12, 12, 12, 0.96);
  border: 1px solid rgba(232, 224, 208, 0.14);
  border-radius: 3px;
  color: #e8e0d0;
  font-family: "EB Garamond", "Times New Roman", Times, serif;
  font-size: 0.9rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.craft-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.craft-panel__header strong {
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}

.craft-panel__close {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.55;
  cursor: pointer;
}

.craft-panel__close:hover {
  opacity: 0.9;
}

.craft-panel__note {
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.55;
  margin-bottom: 0.85rem;
}

.craft-panel__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}

.craft-group {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(232, 224, 208, 0.08);
}

.craft-group__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.45;
  margin-bottom: 0.4rem;
}

.craft-group__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.craft-group__opts label,
.craft-group--checks label {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.55rem;
  color: rgba(232, 224, 208, 0.75);
  border: 1px solid rgba(232, 224, 208, 0.2);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}

.craft-group__opts label:hover,
.craft-group--checks label:hover {
  border-color: rgba(232, 224, 208, 0.45);
  color: #e8e0d0;
}

html:has(#scan-quiet:checked) label[for="scan-quiet"],
html:has(#scan-medium:checked) label[for="scan-medium"],
html:has(#scan-off:checked) label[for="scan-off"],
html:has(#vig-soft:checked) label[for="vig-soft"],
html:has(#vig-strong:checked) label[for="vig-strong"],
html:has(#vig-off:checked) label[for="vig-off"],
html:has(#atmos-sparse:checked) label[for="atmos-sparse"],
html:has(#atmos-control:checked) label[for="atmos-control"],
html:has(#atmos-dense:checked) label[for="atmos-dense"],
html:has(#well-hard:checked) label[for="well-hard"],
html:has(#well-soft:checked) label[for="well-soft"],
html:has(#type-control:checked) label[for="type-control"],
html:has(#type-large:checked) label[for="type-large"],
html:has(#grain-on:checked) label[for="grain-on"],
html:has(#ca-on:checked) label[for="ca-on"],
html:has(#curve-on:checked) label[for="curve-on"],
html:has(#curve-off:checked) label[for="curve-off"] {
  color: #e8e0d0;
  border-color: rgba(232, 224, 208, 0.55);
  background: rgba(232, 224, 208, 0.08);
}

.craft-group--checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: none;
  padding-top: 0.75rem;
}

.craft-panel__foot {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.5;
}

.craft-panel__foot a {
  color: rgba(232, 224, 208, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 224, 208, 0.25);
}

.craft-panel__foot a:hover {
  border-bottom-color: rgba(232, 224, 208, 0.55);
}

.craft-chip:focus-visible,
.craft-group__opts label:focus-visible,
.craft-group--checks label:focus-visible,
.craft-panel__close:focus-visible {
  outline: 1px solid rgba(232, 224, 208, 0.45);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .craft-hint {
    display: none;
  }

  .eden-css__well {
    height: min(72vh, 34rem);
  }
}