/* ====================================================================
   Omri's birthday zine — per-section thematic redesign
   Loaded AFTER zine.css. Each section gets its own visual world.
   ==================================================================== */

/* ============ Design tokens — extended palette per section ============ */
:root {
  /* Cosmic (numbers + night sky) */
  --cosmos-deep:    #0a0e1a;
  --cosmos-mid:     #141a2e;
  --cosmos-nebula:  #2a2247;
  --cosmos-star:    #f5ead2;
  --cosmos-glow:    #d9a96b;

  /* Twilight (now snapshot) */
  --dusk-1: #1b2540;
  --dusk-2: #2c3654;
  --dusk-3: #4a3a5e;
  --dusk-warm: #c4795d;

  /* Blueprint (energy) */
  --blueprint-bg:   #1c3a5e;
  --blueprint-2:    #2d4f7a;
  --blueprint-line: rgba(245, 234, 210, 0.18);
  --blueprint-text: #f5ead2;
  --blueprint-accent: #d9a96b;

  /* Botanical (garden) */
  --leaf-cream:  #fbf4e3;
  --leaf-paper:  #f1e5cd;
  --leaf-sage:   #7d9568;
  --leaf-shadow: rgba(74, 64, 54, 0.12);

  /* Instrument (climate widget) */
  --brass-1: #c89a5e;
  --brass-2: #9d7a44;
  --brass-bg: #f8efe0;
  --brass-rule: #6b5536;

  /* Parchment (year clock) */
  --parchment-bg: #efe3c8;
  --parchment-warm: #e8d4a8;
  --parchment-ink: #3a2e1c;
}

/* ============ Subtle global typographic refinement ============ */
body {
  /* Slightly heavier vertical rhythm + better Hebrew display */
  font-feature-settings: "kern", "liga", "calt";
}
.section-title {
  /* Hebrew display feels better with tighter tracking + small caps wouldn't apply to Hebrew, so emphasize weight + size hierarchy. */
  letter-spacing: -0.01em;
}
.section-caption {
  color: var(--ink-soft);
  font-size: 1.05em;
  line-height: 1.6;
}


/* ============ 1. Hero — warm almanac opening ============ */
.hero {
  /* keep the satellite. Add a thin warm horizon line at the bottom. */
  border-block-end: 4px solid var(--terra);
  box-shadow: inset 0 -40px 80px -40px rgba(176, 74, 35, 0.35);
}
.hero-overlay {
  /* Lift the title with a backdrop that feels like aged paper. */
  background:
    radial-gradient(ellipse at 30% 50%, rgba(253, 246, 236, 0.18), transparent 70%);
  padding: 1.5em 2em;
  border-radius: 0;
}
.hero-tagline {
  /* Italic-ish via tracking + slight tilt — Hebrew has no italics, so we use weight+spacing. */
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.005em;
  line-height: 1.5;
  opacity: 0.95;
}


/* ============ 2. Numbers — DEEP COSMIC ============ */
.numbers-section {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(217, 169, 107, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(176, 74, 35, 0.08), transparent 55%),
    linear-gradient(180deg, var(--cosmos-deep) 0%, var(--cosmos-mid) 45%, var(--cosmos-nebula) 100%);
  color: var(--cosmos-star);
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}
.numbers-section::before {
  /* Star field — tiny radial gradients scattered. */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 42%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 73% 22%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 65%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 78%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 88%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 38%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 55%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 84%, var(--cosmos-star) 50%, transparent 51%);
  background-size: 100% 100%;
  opacity: 0.7;
  pointer-events: none;
  animation: cosmos-twinkle 12s ease-in-out infinite alternate;
}
@keyframes cosmos-twinkle {
  0%   { opacity: 0.55; }
  100% { opacity: 0.85; }
}
.numbers-section .section-title,
.numbers-section .section-caption {
  color: var(--cosmos-star);
}
.numbers-section .section-caption {
  opacity: 0.78;
}
.number-tile {
  background: transparent !important;
  border: 1px solid rgba(245, 234, 210, 0.15) !important;
  border-radius: 0 !important;
  padding: 1.6rem 1.2rem !important;
  position: relative;
  transition: border-color 240ms ease;
}
.number-tile:hover {
  border-color: rgba(245, 234, 210, 0.45) !important;
}
.number-tile-value,
.number-tile .number-tile-value,
.number-tile [class*="value"] {
  font-family: "Heebo", "SF Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: var(--cosmos-star);
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem) !important;
}
.number-tile-label,
.number-tile [class*="label"] {
  color: var(--cosmos-glow);
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.85;
}
.numbers-footnote {
  color: var(--cosmos-star);
  opacity: 0.5;
}


/* ============ 3. Climate widget — INSTRUMENT PANEL ============ */
.climate-section {
  background:
    radial-gradient(ellipse at top, var(--brass-bg) 0%, var(--paper) 80%);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.climate-widget,
.climate-section .climate-widget {
  background:
    linear-gradient(180deg, #faf2e2 0%, #efe3c8 100%) !important;
  border: 1px solid var(--brass-2) !important;
  border-radius: 14px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.6) inset,
    0 -2px 0 rgba(107, 85, 54, 0.18) inset,
    0 12px 28px -12px rgba(74, 64, 54, 0.32);
  padding: 2rem !important;
}
.climate-widget .section-title,
.climate-section .section-title {
  color: var(--brass-rule);
  text-transform: none;
}
/* Wind compass: hairline brass rings */
.wind-compass {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5));
}
.wind-compass circle {
  stroke: var(--brass-2);
}
.wind-compass text {
  fill: var(--brass-rule);
  font-weight: 600;
}
.wind-compass .compass-arrow {
  fill: var(--terra);
}
.climate-metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brass-rule);
}
.climate-metric-label {
  color: var(--brass-2);
  letter-spacing: 0.03em;
}


/* ============ 4. Now snapshot — TWILIGHT ============ */
.now-section {
  background:
    linear-gradient(180deg,
      var(--dusk-1) 0%,
      var(--dusk-2) 50%,
      var(--dusk-3) 100%);
  color: var(--cosmos-star);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.now-section::before {
  /* Subtle stars peeking through */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(245, 234, 210, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 18%, rgba(245, 234, 210, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 8%, rgba(245, 234, 210, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 35%, rgba(245, 234, 210, 0.4) 50%, transparent 51%);
  pointer-events: none;
}
.now-section .section-title,
.now-section .section-caption {
  color: var(--cosmos-star);
}
.now-section .section-caption {
  opacity: 0.78;
}
.now-section .card,
.now-section .card--weather,
.now-section .card--sun,
.now-section .card--moon,
.now-section .card--iss,
.now-section .card--week {
  background: rgba(11, 15, 30, 0.55) !important;
  border: 1px solid rgba(245, 234, 210, 0.18) !important;
  backdrop-filter: blur(8px);
  color: var(--cosmos-star);
}
.now-section .card-title {
  color: var(--cosmos-glow);
}
.now-section .card-meta,
.now-section .card-fallback {
  color: rgba(245, 234, 210, 0.6);
}
.now-section .weather-value,
.now-section .sun-value,
.now-section .iss-when {
  color: var(--cosmos-star);
  font-variant-numeric: tabular-nums;
}
.now-section .moon-svg circle:first-of-type {
  fill: var(--dusk-1);
}


/* ============ 5. Yard — WARM EARTHY ============ */
.yard-section {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--leaf-cream) 100%);
  padding-block: clamp(3rem, 5vw, 4rem);
}
.yard-section .yard-map {
  border: 1px solid var(--terra);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 14px 36px -16px rgba(74, 64, 54, 0.35);
}
.yard-section .section-caption {
  font-style: italic;
}


/* ============ 6. Garden — BOTANICAL JOURNAL ============ */
.garden-section {
  background:
    linear-gradient(180deg, var(--leaf-cream) 0%, var(--leaf-paper) 100%);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
}
.garden-section::before {
  /* Subtle paper grain */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(176, 74, 35, 0.04) 1px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(125, 149, 104, 0.04) 1px, transparent 2px);
  background-size: 40px 40px, 60px 60px;
  pointer-events: none;
}
.garden-section .plant-card {
  background: #fbf4e3 !important;
  border: 1px solid rgba(125, 149, 104, 0.25) !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 32px -14px var(--leaf-shadow),
    0 1px 4px rgba(176, 74, 35, 0.06);
  padding: 1.6rem !important;
  position: relative;
}
.garden-section .plant-card::after {
  /* Botanical-journal margin tick */
  content: '';
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  width: 32px;
  height: 1px;
  background: var(--leaf-sage);
  opacity: 0.4;
}
.garden-section .plant-name-he {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.garden-section .plant-name-latin {
  font-family: "Times New Roman", "Georgia", serif;
  font-style: italic;
  color: var(--leaf-sage);
}
.garden-section .plant-zone strong {
  color: var(--leaf-sage);
}
.garden-section .plant-warnings li {
  border-inline-start: 2px solid var(--terra);
  padding-inline-start: 0.75em;
  margin-block: 0.5em;
  background: rgba(176, 74, 35, 0.04);
  padding-block: 0.4em;
  padding-inline-end: 0.5em;
  border-radius: 0 2px 2px 0;
}
.garden-section .plant-water-value--summer {
  color: var(--terra);
  font-weight: 800;
}


/* ============ 7. Energy — BLUEPRINT ============ */
.energy-section {
  background:
    linear-gradient(180deg, var(--blueprint-bg) 0%, var(--blueprint-2) 100%);
  background-image:
    linear-gradient(rgba(245, 234, 210, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 234, 210, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, var(--blueprint-bg) 0%, var(--blueprint-2) 100%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  color: var(--blueprint-text);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.energy-section .section-title,
.energy-section .section-caption {
  color: var(--blueprint-text);
}
.energy-section .section-caption {
  opacity: 0.78;
  font-family: "Heebo", "Courier New", monospace;
}
.energy-section .energy-panel,
.energy-section [class*="energy-card"],
.energy-section [class*="panel"] {
  background: rgba(245, 234, 210, 0.04);
  border: 1px solid var(--blueprint-line);
  border-radius: 0;
  padding: 1.5rem;
}
.energy-section h3,
.energy-section .panel-title {
  color: var(--blueprint-accent);
  font-weight: 700;
  border-bottom: 1px dashed var(--blueprint-line);
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
}
.energy-section [class*="value"],
.energy-section [class*="number"] {
  font-variant-numeric: tabular-nums;
  color: var(--blueprint-text);
}
/* Plotly chart adjustments for blueprint feel */
.energy-section .js-plotly-plot .plotly text {
  fill: var(--blueprint-text) !important;
}
/* Window-shading SVG */
.energy-section svg line,
.energy-section svg path {
  stroke-opacity: 1;
}


/* ============ 8. Night sky — DEEP DARK ============ */
.sky-section {
  background:
    radial-gradient(ellipse at 50% -10%, var(--cosmos-nebula) 0%, var(--cosmos-deep) 60%);
  color: var(--cosmos-star);
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}
.sky-section::before {
  /* Denser star field for the sky section */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 5% 15%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 32%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(2px 2px at 22% 8%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 42%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 20%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 55%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 10%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 38%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 25%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 50%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 12%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(2px 2px at 94% 60%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 72%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 88%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 50% 80%, var(--cosmos-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 92%, var(--cosmos-star) 50%, transparent 51%);
  pointer-events: none;
  opacity: 0.85;
  animation: cosmos-twinkle 18s ease-in-out infinite alternate;
}
.sky-section .section-title,
.sky-section .section-caption,
.sky-section h3,
.sky-section h4 {
  color: var(--cosmos-star);
}
.sky-section .section-caption {
  opacity: 0.78;
}
.sky-section .sky-card,
.sky-section [class*="card"]:not(.perseids-card) {
  background: rgba(10, 14, 26, 0.55);
  border: 1px solid rgba(245, 234, 210, 0.15);
  backdrop-filter: blur(6px);
}
.sky-section .perseids-star,
.sky-section [class*="perseids"] {
  /* Make Perseids glow */
  filter: drop-shadow(0 0 6px var(--cosmos-glow));
  color: var(--cosmos-glow);
}
.sky-section .planet-table,
.sky-section table {
  color: var(--cosmos-star);
}
.sky-section .planet-table td,
.sky-section .planet-table th {
  border-color: rgba(245, 234, 210, 0.18);
}
.sky-section .iss-timeline {
  border-inline-start: 1px solid rgba(245, 234, 210, 0.25);
}
.sky-section .meteor-card {
  background: rgba(10, 14, 26, 0.45);
}
.sky-section .moon-strip svg circle:first-of-type {
  fill: rgba(10, 14, 26, 0.85);
}
/* Bortle "you are here" highlight */
.sky-section [class*="bortle"] .bortle-here,
.sky-section .bortle-cell--here {
  background: var(--cosmos-glow);
  box-shadow: 0 0 12px var(--cosmos-glow);
}


/* ============ 9. Horizon — GRADIENT SKY ============ */
.horizon-section {
  background:
    linear-gradient(180deg,
      #2a3a5e 0%,
      #c4795d 50%,
      #d9a96b 75%,
      #efe3c8 100%);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
}
.horizon-section .section-title {
  color: var(--cosmos-star);
}
.horizon-section .section-caption {
  color: rgba(245, 234, 210, 0.92);
}
.horizon-section .horizon-strip,
.horizon-section #horizon-plot {
  background: transparent !important;
  border-radius: 6px;
}
.horizon-section .section-footnote {
  color: rgba(58, 46, 28, 0.7);
}
.horizon-section .horizon-controls,
.horizon-section input[type="range"] {
  /* Brass dial feel for sliders */
  accent-color: var(--terra);
}


/* ============ 10. Year clock — PARCHMENT ============ */
.yearclock-section {
  background:
    linear-gradient(180deg, var(--parchment-bg) 0%, var(--parchment-warm) 100%);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
}
.yearclock-section::before {
  /* Heavier paper grain */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(74, 64, 54, 0.05) 1px, transparent 2px),
    radial-gradient(circle at 67% 72%, rgba(176, 74, 35, 0.04) 1px, transparent 2px),
    radial-gradient(circle at 88% 23%, rgba(125, 149, 104, 0.04) 1px, transparent 2px);
  background-size: 50px 50px, 70px 70px, 90px 90px;
  pointer-events: none;
}
.yearclock-section .section-title {
  font-family: "Heebo", "Georgia", serif;
  font-weight: 800;
  color: var(--parchment-ink);
}
.yearclock-section .year-clock-svg {
  filter: drop-shadow(0 8px 24px rgba(74, 64, 54, 0.18));
}
.yearclock-section a[href*=".pdf"] {
  /* The "להוריד כפוסטר" link styled like a printed label */
  display: inline-block;
  border: 1px solid var(--parchment-ink);
  padding: 0.6em 1.4em;
  color: var(--parchment-ink);
  text-decoration: none;
  font-weight: 600;
  border-radius: 2px;
  transition: background 200ms ease, color 200ms ease;
}
.yearclock-section a[href*=".pdf"]:hover {
  background: var(--parchment-ink);
  color: var(--parchment-bg);
}


/* ============ House section (edit panel) — slight refinement ============ */
.house-section {
  background: linear-gradient(180deg, var(--paper) 0%, #f5ead2 100%);
  border-top: 1px solid rgba(176, 74, 35, 0.2);
  border-bottom: 1px solid rgba(176, 74, 35, 0.2);
}


/* ============ Edit-mode toggle — refined ============ */
#edit-mode-toggle {
  background: var(--terra) !important;
  color: var(--paper) !important;
  border: none !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(176, 74, 35, 0.35);
  transition: transform 180ms ease, background 200ms ease;
}
#edit-mode-toggle:hover {
  background: #c95835 !important;
  transform: translateY(-1px);
}
body.edit-mode #edit-mode-toggle {
  background: var(--sky) !important;
}


/* ============ Footer — colophon feel ============ */
.footer {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  padding-block: 3rem;
  border-top: 2px solid var(--terra);
  text-align: center;
  color: var(--ink-soft);
}
.footer-signature {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--terra);
  margin-bottom: 0.8em;
}
.footer-sources,
.footer-thanks,
.footer-built {
  font-size: 0.85em;
  opacity: 0.7;
  margin: 0.3em 0;
}


/* ============ Subtle entrance — section reveal on scroll ============ */
@media (prefers-reduced-motion: no-preference) {
  .numbers-section,
  .climate-section,
  .sky-section,
  .yearclock-section,
  .energy-section {
    /* Faint upward fade on scroll (CSS-only, no IO) — uses contain-intrinsic-size friendly properties */
    animation: section-rise 800ms ease-out;
  }
  @keyframes section-rise {
    0%   { transform: translateY(8px); opacity: 0.85; }
    100% { transform: translateY(0);    opacity: 1; }
  }
}


/* ============ Mobile refinements ============ */
@media (max-width: 720px) {
  .numbers-section,
  .sky-section {
    padding-block: 3rem;
  }
  .numbers-section::before,
  .sky-section::before {
    /* Slightly less dense stars on small screens */
    opacity: 0.6;
  }
  .climate-widget {
    padding: 1.25rem !important;
  }
}