/* Seasonal looks (src/_data/seasons.js, partials/season-head.njk and
   season-body.njk). Loaded on every page while a season or closure is in the
   build; everything here stays hidden until the head script marks <html>
   s-<season> and s-on (homepage launch), data-notice with s-bar or s-closed
   (notice). Colours
   are the brand's own (guide v2.0): Amber, ink and white. */

:root {
  --s-amber: #F9A518;
  --s-glow: rgba(249, 165, 24, .55);
  --s-ink: #333333;
  --s-dark: #1D1D1F;
  --s-grey: #666666;
  --s-wire: rgba(51, 51, 51, .35);
}

/* Fairy lights: a fine wire with amber bulbs that hang and twinkle. */
.season-lights, .intro-lights { display: flex; justify-content: space-between; align-items: flex-start; border-top: 1.5px solid var(--s-wire); }
.season-lights i, .intro-lights i { display: block; width: 9px; height: 12px; margin-top: 3px; border-radius: 50% 50% 46% 46%; background: var(--s-amber); box-shadow: 0 0 8px 1px var(--s-glow); position: relative; animation: s-twinkle 2.4s ease-in-out infinite; }
.season-lights i::before, .intro-lights i::before { content: ''; position: absolute; left: 2.5px; top: -4px; width: 4px; height: 4px; border-radius: 1px; background: var(--s-ink); }
.season-lights i:nth-child(even), .intro-lights i:nth-child(even) { margin-top: 7px; animation-delay: -1.2s; }
.season-lights i:nth-child(3n), .intro-lights i:nth-child(3n) { animation-delay: -.6s; }
@keyframes s-twinkle { 0%, 100% { opacity: 1; box-shadow: 0 0 9px 2px var(--s-glow); } 50% { opacity: .55; box-shadow: 0 0 2px 0 var(--s-glow); } }

/* Homepage launch: the season's lines in place of the brand lines, and the
   string of lights in place of the amber rule above the logo. */
.intro-season, .intro-lights { display: none; }
.s-on .intro-std { display: none; }
.s-xmas .intro-lights { display: flex; width: clamp(220px, 28vw, 360px); opacity: 0; animation: d4-word .7s var(--ease, ease) 1.35s forwards; }
.s-xmas .intro-lights i { width: 11px; height: 15px; }
.s-xmas.d4 .intro img { border-top: 0; padding-top: 0; }

/* Seasonal art (partials/season-art.njk): hidden out of season. */
.s-hat, .s-garland, .s-sparkles { display: none; }
/* Christmas has the lights, hat and baubles; New Year (from 26 Dec, Steve
   20/10) keeps only the stars. */
.s-xmas .s-hat, .s-xmas .s-garland, .s-on .s-sparkles { display: block; }

/* Santa hat on the roof of the logo's house (peak at 11.8% across, 7% down). */
.brand, .intro-logo { position: relative; }
.intro-logo { display: block; }
.s-hat { position: absolute; left: 3.6%; top: -44%; width: 16%; height: auto; transform: rotate(-14deg); transform-origin: 50% 80%; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.s-xmas .intro-logo .s-hat { animation: s-hat-on .55s cubic-bezier(.3, 1.5, .5, 1) 1.55s backwards; }
@keyframes s-hat-on { from { opacity: 0; transform: translateY(-40px) rotate(-40deg); } }

/* Fairy lights hanging from the foot of the header. */
.top .s-garland { position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; }
.s-xmas .top .s-garland { display: flex; justify-content: space-around; align-items: flex-start; }
.s-garland::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: radial-gradient(60% 9px at 50% 0, transparent 92%, var(--s-wire) 93%, var(--s-wire) 100%, transparent 101%) 0 -1px / 5.55% 18px repeat-x; }
.s-garland i { position: relative; width: 7px; height: 10px; margin-top: 7px; border-radius: 50% 50% 46% 46%; background: var(--s-amber); box-shadow: 0 0 7px 1px var(--s-glow); animation: s-twinkle 2.4s ease-in-out infinite; }
.s-garland i:nth-child(odd) { margin-top: 4px; }
.s-garland i:nth-child(4n+1) { background: #FFC94D; }
.s-garland i:nth-child(3n) { animation-delay: -.8s; }
.s-garland i:nth-child(5n) { animation-delay: -1.6s; }
@media (max-width: 760px) { .s-garland i:nth-child(n+19) { display: none; } }

/* Twinkling stars behind the launch lines. */
.s-sparkles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.s-sparkles svg { position: absolute; height: auto; opacity: 0; animation: s-star 3.2s ease-in-out var(--d) infinite; }
@keyframes s-star { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .85; transform: scale(1) rotate(45deg); } }
.intro { isolation: isolate; }
.s-sparkles svg { transform-origin: 50% 50%; }

/* Baubles that drop in on their threads and sway (wide screens only). */
.s-baubles { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s-xmas .s-baubles { display: block; }
.s-baubles > div { position: absolute; top: 0; width: var(--sz); height: calc(var(--len) + var(--sz)); transform-origin: 50% 0; animation: s-drop .9s cubic-bezier(.3, 1.4, .5, 1) var(--d) backwards, s-sway 4s ease-in-out calc(var(--d) + .9s) infinite; }
.s-baubles > div::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: var(--len); background: var(--s-wire); }
.s-baubles svg { position: absolute; left: 0; top: var(--len); width: 100%; height: auto; }
@keyframes s-drop { from { transform: translateY(-110%); } }
@keyframes s-sway { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@media (max-width: 760px) { .s-baubles > div:nth-child(n+3) { display: none; } .s-baubles > div { --len: 60px; } }

/* In season the launch logo is larger, so the hat reads. */
.s-xmas.d4 .intro img { width: clamp(230px, 26vw, 330px); }

/* The notice bar: a slim dark card along the foot of every page. */
.season-bar { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 820px; margin: 0 auto; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; background: #FFF3DF; color: #4A3B2A; border: 1px solid #F6D9A8; border-radius: 12px; box-shadow: 0 10px 30px rgba(120, 70, 10, .18); font: 500 .92rem/1.45 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* The head script shows the chosen bar ([data-season-bar=id]). */
.s-bar-hidden .season-bar { display: none; }
.season-bar .season-lights { flex: none; width: 74px; }
.season-bar-text { flex: 1; margin: 0; }
.season-bar-during, .s-closed .season-bar-before { display: none; }
.s-closed .season-bar-during { display: block; }
.season-bar-text button { margin-left: 6px; padding: 0 0 2px; border: 0; background: linear-gradient(var(--s-amber), var(--s-amber)) left bottom / 100% 2px no-repeat; color: var(--s-ink); font: inherit; font-weight: 600; cursor: pointer; }
.season-bar-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #6B4E2E; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.season-bar-x:hover { background: rgba(120, 70, 10, .1); }
@media (max-width: 600px) {
  .season-bar { left: 12px; right: 12px; bottom: 12px; padding: 12px 8px 12px 14px; font-size: .86rem; gap: 10px; }
  .s-xmas .season-bar .season-lights { display: none; }
}

/* The closure notice: shown once per visit while the office is closed. */
.season-note { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 14px; background: radial-gradient(120% 80% at 0% 100%, #FEEBCB 0%, rgba(254, 235, 203, 0) 60%), #FFFAF2; color: #5A4A38; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); font: 400 1rem/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.season-note::backdrop { background: rgba(22, 22, 24, .55); }
.season-note[open] { animation: s-in .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes s-in { from { opacity: 0; transform: translateY(18px); } }
.season-note-card { padding: 0 clamp(22px, 5vw, 40px) clamp(24px, 5vw, 36px); }
.season-note .season-lights { margin: 0 calc(-1 * clamp(22px, 5vw, 40px)) 26px; padding: 0 clamp(18px, 4vw, 30px); }
.season-note h2 { margin: 0 0 12px; color: var(--s-amber); font-family: 'Caveat', cursive; font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 700; letter-spacing: 0; line-height: 1.02; }
.season-note-dates { margin: 0 0 22px; }
.season-note-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.season-note-list li { padding: 12px 16px; background: #fff; border-radius: 10px; box-shadow: 0 3px 10px rgba(150, 90, 20, .1); }
.season-note-list b { display: block; color: var(--s-ink); font-weight: 600; }
.season-note-list span { display: block; font-size: .95rem; }
.season-note a { color: var(--s-ink); font-weight: 600; text-decoration: none; background: linear-gradient(var(--s-amber), var(--s-amber)) left bottom / 100% 2px no-repeat; }
.season-note-signoff { margin: 0 0 24px; color: #6B4E2E; font-family: 'Caveat', cursive; font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.season-note form { margin: 0; }
.season-note-close { display: inline-block; padding: 14px 24px; border: 0; border-radius: 4px; background: var(--s-amber); color: var(--s-ink); font: 600 .95rem/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .25s, color .25s; }
.season-note-close:hover { background: var(--s-ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .season-lights i, .intro-lights i, .season-note[open] { animation: none; }
}

/* New Year: no fairy lights on the bar or the notice, and the notice says
   Happy New Year. */
.season-bar .season-lights, .season-note .season-lights { display: none; }
.s-xmas .season-bar .season-lights, .s-xmas .season-note .season-lights { display: flex; }
.season-note-card { padding-top: clamp(24px, 5vw, 36px); }
.s-xmas .season-note-card { padding-top: 0; }

/* A plain notice (storm season, tax time): an amber rule and a link. */
.season-bar:not(.season-bar--closure) { border-left: 4px solid var(--s-amber); }
.season-bar-text a { margin-left: 6px; padding-bottom: 2px; color: var(--s-ink); font-weight: 600; text-decoration: none; white-space: nowrap; background: linear-gradient(var(--s-amber), var(--s-amber)) left bottom / 100% 2px no-repeat; }