/* src/styles/views/today-hero-a.css — countdown cover proposal A, "Sunrise over the ridges" (朝日).
   Light washi cover; the shu sun half-risen behind layered sumi ridges. Scope: .today-hero-a. */

.today-hero-a {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-4) var(--r-4);
  margin-top: calc(-1 * var(--s-2));
}
/* washi grain (0 in dark mode via token) */
.today-hero-a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--motif-grain); background-size: 128px 128px; opacity: var(--grain-opacity);
}

/* ── Scene: sky glow, sun, ridges, mist ── */
.today-hero-a .tha-scene {
  position: relative; height: 176px; z-index: -1;
  background: radial-gradient(circle at 73% 64%, var(--accent-wash) 0, transparent 42%);
}
.today-hero-a .tha-scene::after { /* morning mist: the near ridge dissolves into the paper */
  content: ''; position: absolute; inset: auto 0 0 0; height: 36%;
  background: linear-gradient(to bottom, transparent, var(--surface) 96%);
}
.today-hero-a .tha-svg { display: block; width: 100%; height: 100%; }
.today-hero-a .tha-sun { fill: var(--accent); }
.today-hero-a .tha-ridge-far  { fill: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.today-hero-a .tha-ridge-mid  { fill: color-mix(in srgb, var(--text) 14%, var(--surface)); }
.today-hero-a .tha-ridge-near { fill: color-mix(in srgb, var(--text) 21%, var(--surface)); }

.today-hero-a .tha-month {
  position: absolute; left: calc(var(--gutter) + var(--safe-left) - 2px); top: var(--s-6);
  font: 600 14px/1 var(--font-mincho); letter-spacing: .25em; color: var(--text-3);
}

/* ── Copy ── */
.today-hero-a .tha-body {
  display: flex; flex-direction: column;
  padding: 0 calc(var(--gutter) + var(--safe-right) + 4px) var(--s-6) calc(var(--gutter) + var(--safe-left) + 4px);
  margin-top: calc(-1 * var(--s-4));
}
.today-hero-a .tha-eyebrow {
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-section); text-transform: uppercase;
  color: var(--text-2); margin-bottom: var(--s-3);
}
.today-hero-a .tha-title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--s-3); font: inherit; }
.view-today .today-hero-a .today-num { color: var(--text); }
.view-today .today-hero-a .today-unit { color: var(--text-2); }
.today-hero-a .tha-depart {
  display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); margin-bottom: var(--s-6);
  font: 500 15px/20px var(--font-sans); color: var(--text-2);
}
.today-hero-a .route-strip { width: 100%; }

/* ── A gentle, one-time rise ── */
@media (prefers-reduced-motion: no-preference) {
  .today-hero-a .tha-sun { animation: tha-rise 1.8s var(--ease-out) both; transform-box: fill-box; }
  .today-hero-a .tha-scene { animation: tha-glow 1.8s var(--ease-out) both; }
}
@keyframes tha-rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes tha-glow { from { opacity: .6; } to { opacity: 1; } }

@media (min-width: 1024px) {
  .today-hero-a { border: 1px solid var(--line); border-radius: var(--r-4); margin-top: var(--s-2); }
  .today-hero-a .tha-scene { height: 220px; }
  .today-hero-a .tha-month { left: var(--s-6); }
  .today-hero-a .tha-body { padding-inline: var(--s-9) var(--s-8); padding-bottom: var(--s-7); }
}