/* =========================================================================
   Seasonal touches (mu-plugins/ellie-seasonal.php, seasonal.js)
   Loaded only while a season is showing. Everything off the theme's tokens.
   ========================================================================= */
.ellie-season-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 60;
}

/* The corner button: a calico disc with the season drawn in it, edged in
   the chalk line the site rules its sections with. The label slides out on
   hover and focus, and stays out while anything moves. 48px tall, so it is
   a comfortable target on a phone. */
.ellie-season-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 61;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 5px;
  border: 1px solid var(--wp--preset--color--chalk-line);
  border-radius: 999px;
  background-color: var(--wp--preset--color--calico);
  color: var(--wp--preset--color--ink);
  box-shadow: 0 8px 22px -12px rgba(28, 26, 23, 0.45), 0 1px 2px rgba(28, 26, 23, 0.08);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 120ms ease-out;
}
.ellie-season-toggle:hover { border-color: var(--wp--preset--color--terracotta); box-shadow: 0 10px 26px -12px rgba(28, 26, 23, 0.55); }
.ellie-season-toggle:active { transform: scale(0.97); }
.ellie-season-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 3px; }
.ellie-season-toggle canvas {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  transition: opacity 200ms ease;
}
/* Stopped: the picture rests at half strength, so the button reads as off. */
.ellie-season-toggle:not(.is-playing) canvas { opacity: 0.6; }
.ellie-season-label {
  display: block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 360ms ease-out, opacity 240ms ease, padding 360ms ease-out;
}
.ellie-season-toggle:hover .ellie-season-label,
.ellie-season-toggle:focus-visible .ellie-season-label,
.ellie-season-toggle.is-open .ellie-season-label {
  max-width: 22rem;
  opacity: 1;
  padding: 0 0.85rem 0 0.45rem;
}

/* The occasion, before the action: "NEW YEAR · Stop the sequins", in the
   tracked capitals the site sets its own small labels in. */
.ellie-season-occasion {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--selvedge);
}
.ellie-season-occasion:not(:empty)::after {
  content: "\00B7";
  color: var(--wp--preset--color--terracotta);
  margin: 0 0.45rem;
  font-size: 0.9rem;
}
@media (max-width: 420px) {
  .ellie-season-toggle.is-open .ellie-season-label { max-width: calc(100vw - 110px); }
}

/* Pride: the header's chalk rule becomes a rainbow tacked in running
   stitch, sewn in once from the left. The inline border colour comes from
   the block editor, so it takes !important to step aside. */
.ellie-season-pride header.wp-block-template-part > .wp-block-group { position: relative; border-bottom-color: transparent !important; }
.ellie-season-pride header.wp-block-template-part > .wp-block-group::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #E40303 0 16.66%, #FF8C00 0 33.33%, #FFED00 0 50%, #008026 0 66.66%, #24408E 0 83.33%, #732982 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 15px);
  mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 15px);
  transform-origin: left center;
  animation: ellie-pride-sew 1.6s ease-out both;
}
@keyframes ellie-pride-sew { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .ellie-season-toggle, .ellie-season-label, .ellie-season-toggle canvas { transition: none; }
  .ellie-season-pride header.wp-block-template-part > .wp-block-group::after { animation: none; }
}