/* ============================================================
   Daily Watchword — Christmas star (Today page only)
   A hanging Moravian star that appears from Advent Sunday to
   Epiphany (6 January). All of its behaviour is in js/star.js;
   this file is only its looks. Loaded solely by index.html, so
   nothing here touches the rest of the app.

   The star sits BELOW the top bar and bottom nav in the stacking
   order (z-index 40 vs their 50), so the menu button and the
   navigation are never covered or blocked.
   ============================================================ */

#star-wrap {
  position: fixed;
  top: 0;
  right: 6%;               /* hangs in the upper-right, clear of the ☰ menu */
  width: 104px;
  height: 172px;
  z-index: 40;             /* under the top bar (50) so the menu stays tappable */
  pointer-events: none;    /* the wrapper never blocks the page… */
}
#star {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: auto;    /* …but the star itself can be touched */
  cursor: grab;
  touch-action: none;      /* let JS handle a finger dragged across the star */
  transform: translateY(-190px); /* start hidden above the screen; JS drops it in */
  color: #b9b3a7;          /* cable colour (light theme) */
}
:root[data-theme="dark"] #star { color: #6b7280; }

/* The drop-in: slides down and settles with a gentle overshoot */
#star.dropped {
  animation: star-drop 1.6s cubic-bezier(0.34, 1.4, 0.44, 1) forwards;
}
@keyframes star-drop {
  from { transform: translateY(-190px); }
  to   { transform: translateY(0); }
}

/* Illuminated: a soft warm halo, as if lit from inside */
#star.lit #star-body { filter: url(#star-glow); }

/* ---------- The once-a-season welcome banner ---------- */
#star-welcome {
  position: fixed;
  top: 76px;               /* just below the 64px top bar */
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(92%, 30rem);
  z-index: 45;             /* above the star, below the top bar */
  background-color: var(--surface-container-lowest);
  background-image: url("../icons/paper.svg");
  background-repeat: repeat;
  border: 1px solid var(--hairline-faint);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 14px 16px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#star-welcome.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#star-welcome p {
  color: var(--on-surface-variant);
  margin-bottom: 12px;
}
#star-welcome .star-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
#star-welcome a.star-welcome-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: var(--primary);
}
#star-welcome button.star-welcome-dismiss {
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--radius-lg);
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
}

/* People who ask their device to reduce motion get no drop, no sway,
   no swinging and no sliding banner — everything simply appears. */
@media (prefers-reduced-motion: reduce) {
  #star, #star.dropped {
    animation: none;
    transform: translateY(0);
  }
  #star-welcome {
    transition: opacity 0.001s;
    transform: translateX(-50%) translateY(0);
  }
}