/*
 * Night mode (<html data-theme="night">, set by theme.ts and the switch in the header).
 *
 * The sky is pink at the bottom, deepening through plum to black at the top, where there are
 * stars, some of them twinkling, and a couple of clouds drifting slowly across. The surfaces turn
 * to dark frosted glass with pale pink writing, so the text reads wherever it sits on the sky.
 *
 * Only the shop's own pages change: the designer keeps its working colours, and the admin has its
 * own layout. The ivy and the petals stay; they look lovely against the dark.
 */

/* ---- The switch: a little three-stop slider in the header (day, auto, night). ---- */
.theme-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, 2rem);
  padding: 0.2rem;
  border: 0;
  background: var(--card-strong);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.theme-switch[hidden] { display: none; }
/* The thumb slides under whichever stop is chosen. */
.theme-switch::before {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2rem;
  height: 1.7rem;
  content: "";
  background: var(--pink);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(214 63 134 / 0.35);
  transition: transform 0.25s ease, background-color 0.25s;
}
.theme-switch:has([value="auto"]:checked)::before { transform: translateX(2rem); background: var(--lilac); }
.theme-switch:has([value="night"]:checked)::before { transform: translateX(4rem); background: #6a4c9c; }
.theme-switch label {
  position: relative;
  display: grid;
  place-items: center;
  height: 1.7rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.theme-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.theme-switch label:has(:checked) { color: var(--white); }
.theme-switch label:has(:focus-visible) { outline: 3px solid var(--pink); outline-offset: 1px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .theme-switch::before { transition: none; }
}

/* ---- The sky (the layout's .sky): hidden by day. ---- */
.sky { display: none; }

:root[data-theme="night"]:not(:has(.designer)) {
  color-scheme: dark;
  --plum: #f7e6f1;           /* the writing */
  --plum-dark: #ffffff;
  --rose: #ff9cc9;
  --petal: #8a3d6c;
  --card: rgb(30 14 38 / 0.62);
  --card-strong: rgb(30 14 38 / 0.74);
  --field: rgb(22 10 28 / 0.88);
  --line: rgb(255 214 236 / 0.22);
  --line-strong: rgb(255 214 236 / 0.3);
  --alert: #ff9ab8;
  --button: var(--pink);
  --button-hover: #ffa6cc;
  --on-button: #2a1030;
}

:root[data-theme="night"] body:not(.admin):not(:has(.designer)) {
  background: linear-gradient(180deg, #030108 0%, #0b0614 24%, #221034 46%, #52214f 68%, #a8467c 88%, #e07aa8 100%) fixed;
}

:root[data-theme="night"] body:not(.admin):not(:has(.designer)) .sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
  pointer-events: none;
  /* The crescent moon, high on the left behind the ivy; the clouds drift across in front of it. */
  background: url("/assets/night-moon-fbaca308.svg") left 13% top 9rem / 7rem auto no-repeat;
}
@media (max-width: 40rem) {
  :root[data-theme="night"] body:not(.admin):not(:has(.designer)) .sky { background-position: right 1rem top 9.5rem; background-size: 6rem auto; }
}
/* Stars only in the dark top of the sky, fading out before the pink. */
.sky::before,
.sky::after {
  position: absolute;
  inset: 0 0 auto;
  height: 70vh;
  content: "";
  background: url("/assets/night-stars-a262b0a7.svg") top left / 30rem auto repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
}
.sky::after {
  background: url("/assets/night-stars-bright-ce9954a6.svg") 7rem 3rem / 30rem auto repeat;
}
.sky i {
  position: absolute;
  width: 21rem;
  height: 8.75rem;
  background: url("/assets/night-cloud-8e2f653f.svg") center / contain no-repeat;
  opacity: 0.32;
}
.sky i:nth-child(1) { top: 9vh; left: 8%; }
.sky i:nth-child(2) { top: 26vh; right: 6%; width: 15rem; height: 6.25rem; opacity: 0.22; }

/* Shooting stars: a bright head with a fading tail, streaking down to the left. Each one flashes
   across in the first sliver of a long cycle and is hidden for the rest, and the two cycles differ
   so they don't fall into a pattern. Only with motion allowed. */
.sky b {
  position: absolute;
  width: 9rem;
  height: 2px;
  background: linear-gradient(90deg, #fff, rgb(255 214 236 / 0.7) 25%, transparent);
  border-radius: 999px;
  filter: drop-shadow(0 0 3px rgb(255 230 245 / 0.9));
  opacity: 0;
  transform-origin: left center;
}
.sky b:nth-child(3) { top: 8vh; right: 18%; --angle: -24deg; }
.sky b:nth-child(4) { top: 20vh; left: 38%; --angle: -32deg; width: 6.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .sky b:nth-child(3) { animation: shooting-star 17s ease-in 4s infinite; }
  .sky b:nth-child(4) { animation: shooting-star 29s ease-in 15s infinite; }
}
@keyframes shooting-star {
  0%   { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(0.2); }
  0.5% { opacity: 1; }
  4%   { opacity: 0.9; transform: rotate(var(--angle)) translateX(-24rem) scaleX(1); }
  6%   { opacity: 0; transform: rotate(var(--angle)) translateX(-32rem) scaleX(0.6); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(-32rem) scaleX(0.6); }
}

@media (prefers-reduced-motion: no-preference) {
  .sky::after { animation: twinkle 5s ease-in-out infinite alternate; }
  .sky i:nth-child(1) { animation: cloud-drift 140s ease-in-out infinite alternate; }
  .sky i:nth-child(2) { animation: cloud-drift 190s ease-in-out -60s infinite alternate-reverse; }
}
@keyframes twinkle {
  0%   { opacity: 1; }
  40%  { opacity: 0.55; }
  70%  { opacity: 0.9; }
  100% { opacity: 0.4; }
}
@keyframes cloud-drift {
  from { transform: translateX(-12vw); }
  to   { transform: translateX(14vw); }
}

/* ---- Things with fixed colours that need a night version ---- */
:root[data-theme="night"] body:not(.admin):not(:has(.designer)) {
  /* Ivy a touch dimmer, as if by moonlight. */
  &::before, &::after { filter: brightness(0.82) saturate(0.9); }

  /* Ribbon titles keep their pink satin, with dark writing on it. */
  & :is(.home h2, .starters h2) { color: #4a2244; }

  /* Gift-tag cards. */
  & .paddle-card { background: linear-gradient(180deg, rgb(70 30 72 / 0.8), var(--card) 40%); }

  & .button.secondary:hover { background: rgb(255 255 255 / 0.14); }
  & .button.danger { color: var(--white); background: #c0336f; }
  & .button.danger:hover { background: #d94584; }

  & .age-gate { background: rgb(24 10 32 / 0.88); }

  & .theme-switch label:has([value="day"]:checked) { color: #4a2244; }
}