/* ========================================
   SUN TRACK (index.html hero)
   A solar arc spans the page: the sun drifts along a parabolic path from the
   left horizon (sunrise) up to midday and back down to the right horizon
   (sunset). At night it rests at the horizon ends and fades.
   Distinct from body.css — no shared tokens reused here.
   ======================================== */

.hero-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) var(--content-padding);
}

/* Full-viewport overlay that rides above the navbar (site-header z-index: 5001).
   pointer-events: none keeps it transparent to clicks so nav and page content
   remain fully functional. */
.sun-track {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5002;
  pointer-events: none;
}

.sun-body {
  pointer-events: auto;
  cursor: help;
}

.sun-arc {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.sun-arc-path {
  fill: none;
  stroke: url(#sun-arc-gradient);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  opacity: 0.55;
  filter: drop-shadow(0 0 3px rgba(212, 130, 42, 0.25));
}

html.dark-mode .sun-arc-path {
  opacity: 0.5;
  filter: drop-shadow(0 0 3px rgba(212, 130, 42, 0.2));
}

.sun-body {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(30px, 4vw, 52px);
  height: clamp(30px, 4vw, 52px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d5, #ffe08a 25%, #f5a623 55%, #d4822a 80%, #9c5a12);
  box-shadow:
    0 0 14px rgba(255, 200, 110, 0.9),
    0 0 34px rgba(245, 166, 35, 0.65),
    0 0 70px rgba(212, 130, 42, 0.45),
    0 0 120px rgba(212, 130, 42, 0.22);
  transition: left 0.2s linear, top 0.2s linear, opacity 0.8s ease;
  will-change: left, top;
  z-index: 100;
  pointer-events: auto;
  cursor: default;
}

.sun-track.is-night .sun-body {
  background: radial-gradient(circle at 35% 30%, #cfd6dc, #9aa5b1 30%, #6c757d 60%, #495057);
  box-shadow:
    0 0 8px rgba(170, 180, 190, 0.5),
    0 0 20px rgba(140, 150, 160, 0.35),
    0 0 44px rgba(120, 130, 140, 0.22);
  opacity: 0.28;
}

/* Breathing glow during the day */
.sun-body::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.4), rgba(245, 166, 35, 0) 70%);
  animation: sun-breath 4s ease-in-out infinite;
  pointer-events: none;
}

.sun-track.is-night .sun-body::after {
  animation: none;
  background: radial-gradient(circle, rgba(150, 160, 170, 0.12), rgba(150, 160, 170, 0) 70%);
}

@keyframes sun-breath {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.1); }
}

/* Dark mode */
html.dark-mode .sun-body {
  background: radial-gradient(circle at 35% 30%, #fff6d5, #ffe08a 25%, #f5a623 55%, #d4822a 80%, #9c5a12);
  box-shadow:
    0 0 14px rgba(255, 200, 110, 0.9),
    0 0 34px rgba(245, 166, 35, 0.65),
    0 0 70px rgba(212, 130, 42, 0.45),
    0 0 120px rgba(212, 130, 42, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .sun-body,
  .sun-body::after,
  .sun-tooltip {
    transition: none;
    animation: none;
  }
}

.sun-location-note {
  position: absolute;
  left: 50%;
  bottom: clamp(0.15rem, 1vh, 0.35rem);
  transform: translateX(-50%);
  max-width: min(42ch, 90vw);
  text-align: center;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.4;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark-mode .sun-location-note {
  color: var(--text-muted);
  opacity: 0.6;
}

.sun-tooltip {
  position: absolute;
  left: 50%;
  top: -2.4em;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.7rem;
  background: var(--bg-primary, #fdf6e8);
  border: 1px solid var(--border-color, #e8dcc0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #495057);
  white-space: nowrap;
  pointer-events: none;
  z-index: 101;
  opacity: 0;
  transition: opacity 0.15s ease, display 0.15s ease;
}

.sun-tooltip.is-visible {
  display: flex;
  opacity: 1;
}

.sun-tooltip-time {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-primary, #2c5f5a);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.sun-tooltip-next {
  color: var(--text-secondary, #495057);
}

.sun-tooltip-times {
  color: var(--text-muted, #6c757d);
  font-size: 0.62rem;
}

html.dark-mode .sun-tooltip {
  background: var(--bg-primary, #11181d);
  border-color: var(--border-color, #2f3941);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  color: var(--text-secondary, #dfe6ea);
}

html.dark-mode .sun-tooltip-time {
  color: #ffffff;
}

html.dark-mode .sun-tooltip-next {
  color: var(--text-secondary, #dfe6ea);
}

html.dark-mode .sun-tooltip-times {
  color: var(--text-muted, #a2adb9);
}

@media (max-width: 480px) {
  .sun-tooltip {
    font-size: 0.62rem;
    padding: 0.3rem 0.55rem;
  }
}