/* Intro overlay — words → stars → circles.
   Approved 2026-09-04. Timings and easing lifted from the approved study, not
   re-derived: this is the one that was signed off, so it must not drift.

   Kept out of styles.css deliberately. That file is the approved homepage,
   verbatim. This is a four-second overlay that sits on top of it and is easy to
   tune or remove without touching the site itself.

   The overlay is hidden by default and only shown when the inline head script
   adds .intro to <html>. So if JavaScript is off, blocked, or fails to parse,
   there is no overlay at all rather than a permanently covered site. */

#intro { display: none; }
.intro #intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--paper);
  overflow: hidden;
  /* The overlay never eats a click. Someone who already knows what they want
     can scroll and buy straight through it. */
  pointer-events: none;
  /* Safety net: if the script stops midway, the overlay still clears itself
     rather than covering the shop forever. Runs well past the ~4.2s sequence. */
  animation: intro-failsafe 0.4s linear 7s forwards;
}
#intro.done { display: none; }

@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---- words ---- */
#words { position: relative; z-index: 3; text-align: center; padding: 1rem; }
#words .w {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 5rem);
  line-height: 1;
  margin: 0 0.18em;
  opacity: 0;
  transform: translateY(28px) scale(0.85);
}
#words .w.on {
  opacity: 1;
  transform: none;
  transition: opacity 0.16s, transform 0.26s cubic-bezier(0.2, 1.5, 0.4, 1);
}
/* The moment that makes the sequence feel deliberate rather than random:
   every word drops to black at once. */
#words .w.black { color: var(--ink) !important; transition: color 0.18s; }

/* ---- stars ---- */
#stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#stars svg {
  position: absolute;
  width: var(--s);
  height: var(--s);
  opacity: 0;
  transform: scale(0) rotate(0deg);
}
#stars svg.pop {
  animation: starpop 0.34s cubic-bezier(0.2, 1.7, 0.4, 1) forwards,
             shake 0.18s 6 0.34s;
}
@keyframes starpop { to { opacity: 1; transform: scale(1) rotate(var(--r)); } }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -3px 2px; }
  50% { translate: 3px -2px; }
  75% { translate: -2px -3px; }
}

/* ---- circles ---- */
#circles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#circles i {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
}
#circles i.grow {
  transition: transform 0.62s cubic-bezier(0.62, 0, 0.3, 1);
  transform: translate(-50%, -50%) scale(1);
}

/* The head script already skips the overlay entirely when reduced motion is
   requested. This is belt and braces for a preference that changes mid-visit. */
@media (prefers-reduced-motion: reduce) {
  .intro #intro { display: none; }
}