/* ============ SKY · time of day ============
   Scoped to html[data-sky="…"] (set by sky.js). Only the hero, the nav
   capsule while it sits over the hero, and the .sky-* elements sky.js adds. */

/* ---- the backdrop: a body-level layer sized to the hero (sky.js keeps it in step) ----
   It sits in the DOM just before #hearts-canvas, so it paints under the floating
   hearts and the orbs while the hero itself (z-index 1) stays transparent and
   tappable. Night and dusk cross-fade by opacity, so 21:00 arriving while she
   reads is a soft dissolve rather than a cut. */
.sky-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
}
.sky-layer {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.sky-layer-night {
  /* the night ends like the site's other dark blocks: soft corners, a shadow on the cream */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 34px 70px -34px rgba(82, 26, 40, 0.5);
  background:
    radial-gradient(70% 34% at 50% 102%, rgba(217, 108, 138, 0.26), transparent 70%),
    radial-gradient(60% 40% at 88% -6%, rgba(122, 64, 112, 0.34), transparent 70%),
    linear-gradient(112deg, transparent 34%, rgba(255, 249, 244, 0.028) 50%, transparent 66%),
    linear-gradient(180deg, #23112B 0%, #341327 48%, #4A1827 82%, #521A28 100%);
}
.sky-layer-dusk {
  background:
    radial-gradient(80% 46% at 50% -8%, rgba(242, 196, 179, 0.9), transparent 72%),
    linear-gradient(180deg, #F3C7B6 0%, #F6DCE3 48%, #FDF8F5 100%);
}
html[data-sky="night"] .sky-layer-night { opacity: 1; }
html[data-sky="evening"] .sky-layer-dusk { opacity: 1; }

/* ---- star canvas ---- */
.sky-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease 0.2s;
}
html[data-sky="night"] .sky-stars { opacity: 1; }

/* ---- morning: one slow band of light ---- */
.sky-beam {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
html[data-sky="morning"] .sky-beam { opacity: 1; }
.sky-beam-band {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  transform: translate3d(-140%, 0, 0) skewX(-16deg);
  will-change: transform;
}
.sky-beam-wide {
  width: 46%;
  background: linear-gradient(90deg, rgba(255, 220, 178, 0) 0%, rgba(255, 220, 178, 0.66) 50%, rgba(255, 220, 178, 0) 100%);
  filter: blur(14px);
}
.sky-beam-thin {
  width: 12%;
  margin-left: 17%;
  background: linear-gradient(90deg, rgba(255, 252, 245, 0) 0%, rgba(255, 252, 245, 0.9) 50%, rgba(255, 252, 245, 0) 100%);
  filter: blur(5px);
}
.sky-beam.is-on .sky-beam-band { animation: sky-beam 3.2s cubic-bezier(0.45, 0.05, 0.35, 1) 0.1s both; }
.sky-beam.is-on .sky-beam-thin { animation-duration: 3s; animation-delay: 0.3s; }
@keyframes sky-beam {
  from { transform: translate3d(-140%, 0, 0) skewX(-16deg); }
  to   { transform: translate3d(calc(100vw + 60%), 0, 0) skewX(-16deg); }
}

/* ---- the greeting line ---- */
.sky-greet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  margin-top: 1.35rem;
  color: var(--ink-soft);
  line-height: 1.55;
  /* transition + delay come from .reveal / .delay-3 — not redefined here */
}
.sky-greet.is-swapping { opacity: 0; transition: opacity 0.26s ease; }
.sky-greet-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.8s ease;
}
.sky-greet-line .ar { color: var(--rose); font-weight: 700; transition: color 0.8s ease; }
.sky-greet-ico {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: rgba(217, 108, 138, 0.1);
  color: var(--rose);
  transition: background-color 0.8s ease, color 0.8s ease;
}
.sky-greet-ico svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-sky="morning"] .sky-greet-ico { color: #D9924B; background: rgba(242, 196, 179, 0.34); }
html[data-sky="day"] .sky-greet-ico { color: #C98A5C; background: rgba(242, 196, 179, 0.3); }
html[data-sky="evening"] .sky-greet-ico { color: #C4586F; background: rgba(217, 108, 138, 0.14); }
.sky-greet-ar {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
  transition: color 0.8s ease;
}
/* the greeting sits between the sub and the CTA, so the CTA closes up a little */
html[data-sky]:not(.has-special) .sky-greet + .cta { margin-top: 1.7rem; }
/* on special days the ribbon speaks instead */
html.has-special .sky-greet { display: none; }

/* ---- evening: a slightly deeper ink under a dusk sky ---- */
html[data-sky="evening"] .hero-sub { color: #61454D; }
html[data-sky="evening"] .hero-title {
  background-image: linear-gradient(135deg, #30202A 18%, var(--maroon) 52%, var(--rose) 82%, var(--rose-soft));
}
html[data-sky="evening"] .hero .eyebrow {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(217, 108, 138, 0.26);
}
html[data-sky="evening"] .sky-greet-line { color: #30202A; }

/* ---- night: cream text on a plum sky ---- */
html[data-sky="night"] .hero .eyebrow {
  background: rgba(255, 249, 244, 0.07);
  border-color: rgba(255, 249, 244, 0.16);
  color: #F3C4D0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-sky="night"] .hero-title {
  background-image: linear-gradient(135deg, #FFF9F4 12%, #F6DCE3 42%, #E8A0B0 78%, #F2C4B3);
  filter: drop-shadow(0 10px 30px rgba(232, 160, 176, 0.18));
}
html[data-sky="night"] .hero-sub { color: rgba(255, 249, 244, 0.78); }
html[data-sky="night"] .hero-sub .ar { color: #F9C9D7; }
html[data-sky="night"] .sky-greet,
html[data-sky="night"] .sky-greet-ar { color: rgba(255, 249, 244, 0.66); }
html[data-sky="night"] .sky-greet-line { color: #FFF9F4; }
html[data-sky="night"] .sky-greet-line .ar { color: #F3C4D0; }
html[data-sky="night"] .sky-greet-ico { color: #F3C4D0; background: rgba(255, 249, 244, 0.1); }
/* the CTA keeps its ink + rose identity; a faint rim keeps it legible on plum */
html[data-sky="night"] .cta {
  box-shadow:
    0 0 0 1px rgba(255, 249, 244, 0.14),
    0 22px 50px -18px rgba(0, 0, 0, 0.55);
}
html[data-sky="night"] .cta:hover {
  box-shadow:
    0 0 0 1px rgba(255, 249, 244, 0.2),
    0 30px 60px -18px rgba(0, 0, 0, 0.6);
}
html[data-sky="night"] .hero-times {
  background: rgba(255, 249, 244, 0.08);
  border-color: rgba(255, 249, 244, 0.16);
  color: #FFF9F4;
  box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.5);
}
html[data-sky="night"] .hero-times-text span { color: rgba(255, 249, 244, 0.62); }
html[data-sky="night"] .hero-times-icon { background: rgba(232, 160, 176, 0.2); color: #F3C4D0; }
html[data-sky="night"] .hero-times-arrow { color: rgba(255, 249, 244, 0.6); }
html[data-sky="night"] .hero-times.is-due .hero-times-text span { color: var(--rose-soft); }
html[data-sky="night"] .scroll-hint { border-color: rgba(255, 249, 244, 0.32); }
html[data-sky="night"] .scroll-hint span { background: var(--rose-soft); }

/* ---- nav capsule darkens a touch, only while it floats over the night hero ---- */
html[data-sky] .nav {
  transition:
    transform 0.7s var(--ease-fluid),
    opacity 0.7s var(--ease-fluid),
    background-color 0.7s ease,
    border-color 0.7s ease,
    color 0.7s ease,
    box-shadow 0.7s ease;
}
html[data-sky="night"].sky-hero-under-nav .nav {
  background: rgba(46, 22, 36, 0.58);
  border-color: rgba(255, 249, 244, 0.14);
  color: #FFF9F4;
  box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.55);
}
html[data-sky="night"].sky-hero-under-nav .nav-links a { color: rgba(255, 249, 244, 0.72); }
html[data-sky="night"].sky-hero-under-nav .nav-links a:hover { color: #F3C4D0; }
html[data-sky="night"].sky-hero-under-nav .nav-heart { color: var(--rose-soft); }
html[data-sky="night"].sky-hero-under-nav .nav-progress { background: rgba(255, 249, 244, 0.14); }

/* ---- reduced motion: the sky is still, the ∞ is already drawn ---- */
@media (prefers-reduced-motion: reduce) {
  .sky-layer,
  .sky-stars { transition: none; }
  .sky-beam { display: none; }
  .sky-greet.is-swapping { opacity: 1; }
}