/* =====================================================================
   ELM Aesthetics — seasonal layer  (v2)
   Switched on by  <html data-season="autumn">  or  <html data-season="winter">.
   Remove the attribute and every rule here is inert. No core page is touched.

   Motion rules: every animation here is transform/opacity only (compositor
   work, never layout), slow (9–40 s cycles) and eased, so nothing jitters.
   ===================================================================== */

.season-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;                /* above .hero-bg, below .hero-blended-inner (z 3) */
  display: none;
  opacity: 0;
  animation: season-in 2.4s ease-out 0.6s forwards;
}
html[data-season="autumn"] .season-layer,
html[data-season="winter"] .season-layer { display: block; }
@keyframes season-in { to { opacity: 1; } }

/* ---------- Corner pieces: a drawn branch in each top corner ---------- */
.season-corner-wrap {
  position: absolute;
  top: 118px;
  width: 320px;
  color: var(--gold);
  opacity: .78;
  will-change: transform;
}
.season-corner-l { left: -14px;  transform-origin: 0 0;    animation: season-sway-l 11s ease-in-out infinite alternate; }
.season-corner-r { right: -14px; transform-origin: 100% 0; animation: season-sway-r 13s ease-in-out infinite alternate; }
.season-corner-r .season-corner { transform: scaleX(-1); }
.season-corner { display: none; width: 100%; height: auto; }
html[data-season="autumn"] .season-corner-autumn,
html[data-season="winter"] .season-corner-winter { display: block; }
@keyframes season-sway-l { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }
@keyframes season-sway-r { from { transform: rotate(0.9deg); }  to { transform: rotate(-0.9deg); } }

/* ---------- Seasonal line under the hero tagline ---------- */
.season-line {
  display: none;
  margin: 14px auto 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  text-wrap: balance;
}
html[data-season="autumn"] .season-line-autumn,
html[data-season="winter"] .season-line-winter { display: block; }

/* =====================================================================
   AUTUMN
   ===================================================================== */
html[data-season="autumn"] .hero-bg {
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%,   rgba(224, 185, 138, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 15% 100%, rgba(184, 118,  64, 0.14) 0%, transparent 60%),
    var(--teal-deep);
}

/* Three leaves release from the branches, one at a time, and drift the full
   height of the hero. Fall, sway and spin sit on three nested elements so each
   is a single transform the browser can composite without layout.
   .season-fall is a full-height invisible rail; translateY(112%) of the rail
   carries the leaf (at its top) just past the bottom of the hero. */
.season-fall      { position: absolute; top: -70px; height: 100%; display: none; will-change: transform; }
html[data-season="autumn"] .season-fall { display: block; }
.season-fall-sway { display: block; width: var(--leaf); height: var(--leaf); will-change: transform; }
.season-fall-spin { display: block; width: 100%; height: 100%; color: var(--gold); opacity: .62; will-change: transform; }
.season-fall-spin svg { display: block; width: 100%; height: 100%; }

.season-fall:nth-of-type(1) { --leaf: 40px; left: 11%; animation: season-fall-a 30s linear 1s  infinite; }
.season-fall:nth-of-type(2) { --leaf: 34px; left: 84%; animation: season-fall-b 34s linear 13s infinite; }
.season-fall:nth-of-type(3) { --leaf: 46px; left: 23%; animation: season-fall-a 38s linear 24s infinite; }
.season-fall:nth-of-type(1) .season-fall-sway { animation: season-sway-x 4.2s ease-in-out infinite alternate; }
.season-fall:nth-of-type(2) .season-fall-sway { animation: season-sway-x 3.6s ease-in-out .7s infinite alternate-reverse; }
.season-fall:nth-of-type(3) .season-fall-sway { animation: season-sway-x 4.8s ease-in-out .3s infinite alternate; }
.season-fall:nth-of-type(1) .season-fall-spin { animation: season-spin 16s linear infinite; }
.season-fall:nth-of-type(2) .season-fall-spin { animation: season-spin 13s linear infinite reverse; }
.season-fall:nth-of-type(3) .season-fall-spin { animation: season-spin 19s linear infinite; }

/* Visible for ~55% of the cycle, gone for the rest: usually one leaf in the
   air, sometimes two, never three. */
@keyframes season-fall-a {
  0%   { transform: translateY(0);    opacity: 0; }
  4%   { opacity: 1; }
  52%  { opacity: 1; }
  58%  { transform: translateY(112%); opacity: 0; }
  100% { transform: translateY(112%); opacity: 0; }
}
@keyframes season-fall-b {
  0%   { transform: translateY(0);    opacity: 0; }
  5%   { opacity: 1; }
  48%  { opacity: 1; }
  55%  { transform: translateY(112%); opacity: 0; }
  100% { transform: translateY(112%); opacity: 0; }
}
@keyframes season-sway-x { from { transform: translateX(-16px) rotate(-6deg); } to { transform: translateX(16px) rotate(6deg); } }
@keyframes season-spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =====================================================================
   WINTER / CHRISTMAS
   ===================================================================== */
html[data-season="winter"] .hero-bg {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%,    rgba(224, 185, 138, 0.22) 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(30,  65,  68, 0.60) 0%, transparent 60%),
    var(--teal-deep);
}

/* Soft gold bokeh — out-of-focus candle and fairy light. Drawn with a radial
   gradient (no filter), so the drift is pure transform. */
.season-bokeh {
  position: absolute;
  display: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,208,176,.38) 0%, rgba(240,208,176,.14) 38%, rgba(240,208,176,0) 70%);
  will-change: transform, opacity;
}
html[data-season="winter"] .season-bokeh { display: block; }
.season-bokeh:nth-of-type(1) { width: 220px; height: 220px; left: 4%;  top: 18%; animation: season-drift-a 34s ease-in-out infinite alternate,     season-pulse 7s   ease-in-out infinite; }
.season-bokeh:nth-of-type(2) { width: 140px; height: 140px; left: 20%; top: 62%; animation: season-drift-b 28s ease-in-out 3s infinite alternate,  season-pulse 9s   ease-in-out 1s infinite; }
.season-bokeh:nth-of-type(3) { width: 260px; height: 260px; left: 70%; top: 10%; animation: season-drift-b 40s ease-in-out 6s infinite alternate,  season-pulse 8s   ease-in-out 2s infinite; }
.season-bokeh:nth-of-type(4) { width: 120px; height: 120px; left: 86%; top: 58%; animation: season-drift-a 26s ease-in-out 9s infinite alternate,  season-pulse 6.5s ease-in-out .5s infinite; }
.season-bokeh:nth-of-type(5) { width: 180px; height: 180px; left: 46%; top: 76%; animation: season-drift-a 36s ease-in-out 12s infinite alternate, season-pulse 10s  ease-in-out 3s infinite; }
@keyframes season-drift-a { from { transform: translate(0, 0); } to { transform: translate(28px, -44px); } }
@keyframes season-drift-b { from { transform: translate(0, 0); } to { transform: translate(-32px, -36px); } }
@keyframes season-pulse   { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* A slow gold light passes across the elm tree and wordmark every 14 s.
   The shimmer is masked by the logo's own pixels, so only the mark catches it. */
.season-logo { display: block; position: relative; line-height: 0; width: 100%; max-width: 160px; margin: 0 auto 32px; }
.season-logo .hero-blended-logo { margin: 0; }
.season-shimmer {
  display: none;
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask: url("assets/logo-vertical-transparent.webp") center / contain no-repeat;
          mask: url("assets/logo-vertical-transparent.webp") center / contain no-repeat;
  pointer-events: none;
}
html[data-season="winter"] .season-shimmer { display: block; }
.season-shimmer::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(105deg, rgba(255,240,215,0) 0%, rgba(255,240,215,.55) 50%, rgba(255,240,215,0) 100%);
  transform: translateX(-130%) skewX(-12deg);
  animation: season-shimmer 14s ease-in-out 3s infinite;
  will-change: transform;
}
@keyframes season-shimmer {
  0%   { transform: translateX(-130%) skewX(-12deg); }
  18%  { transform: translateX(330%)  skewX(-12deg); }
  100% { transform: translateX(330%)  skewX(-12deg); }
}

/* A fine gold hairline, brightest at the centre, under the header on winter pages */
html[data-season="winter"] .site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(224,185,138,.5) 35%, rgba(240,208,176,.95) 50%, rgba(224,185,138,.5) 65%, transparent 100%);
  pointer-events: none;
}

/* =====================================================================
   Restraint: small screens and reduced motion
   ===================================================================== */
@media (max-width: 900px) {
  .season-corner-wrap { top: 96px; width: 170px; opacity: .5; }
  .season-corner-l { left: -22px; }
  .season-corner-r { right: -22px; }
  .season-fall:nth-of-type(3), .season-bokeh:nth-of-type(4), .season-bokeh:nth-of-type(5) { display: none !important; }
  .season-bokeh:nth-of-type(1) { width: 160px; height: 160px; }
  .season-bokeh:nth-of-type(3) { width: 180px; height: 180px; }
  .season-logo { max-width: 130px; margin-bottom: 26px; }
  .season-line { font-size: 0.64rem; letter-spacing: 0.24em; }
}
@media (prefers-reduced-motion: reduce) {
  .season-layer { animation: none; opacity: 1; }
  .season-corner-wrap, .season-fall, .season-fall-sway, .season-fall-spin,
  .season-bokeh, .season-shimmer::after { animation: none !important; }
  .season-fall { display: none !important; }
  .season-bokeh { opacity: .7; }
}