/* Autumn layer. Loaded only where the route passes autumn=True.
   Leaves are created by autumn.js; nothing here takes clicks. */

.autumn-back,
.autumn-overhang,
.autumn-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.autumn-back { z-index: 2; }
.autumn-overhang { z-index: 2; }
.autumn-leaves { z-index: 5; }

.autumn-leaves.falling-refined {
  perspective: 840px;
}
.autumn-leaves.falling-refined,
.autumn-leaves.falling-refined .leaf-field,
.autumn-leaves.falling-refined .pl {
  transform-style: preserve-3d;
}

/* Board sits between the branches and the falling leaves. */
.shell {
  position: relative;
  z-index: 3;
}

.stage {
  background:
    linear-gradient(180deg, #f7fbf7 0%, #f3f8f4 46%, #eef5f0 100%);
}

.autumn-back,
.autumn-back *,
.autumn-overhang,
.autumn-overhang *,
.autumn-leaves,
.autumn-leaves *,
  pointer-events: none;
}

.a-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.c-crimson { color: #b8381a; }
.c-orange  { color: #ee7a14; }
.c-gold    { color: #f2b01e; }
.c-russet  { color: #a8501f; }
.c-ember   { color: #d9501a; }
.c-olive   { color: #c4a82a; }
.c-scarlet  { color: #e43712; }
.c-amber    { color: #ff8f14; }
.c-marigold { color: #f5c21a; }
.c-wine     { color: #8e2614; }

.a-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 250px at 0% -6%, rgba(226, 142, 48, 0.11), transparent 70%),
    radial-gradient(700px 250px at 100% -6%, rgba(226, 142, 48, 0.11), transparent 70%),
    linear-gradient(to bottom, rgba(176, 96, 36, 0.05), transparent 12%),
    linear-gradient(to top, rgba(150, 82, 30, 0.06), transparent 22%);
}

.leaf-field {
  position: absolute;
  inset: 0;
}

.pl {
  position: absolute;
  opacity: 0.92;
  will-change: transform;
  transform-origin: center;
}

.pl svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1.5px 1px rgba(60, 30, 12, 0.22));
}

/* Wind strokes only show while a gust clears the pile. */
.a-wind {
  position: absolute;
  top: 12vh;
  left: 0;
  width: 100%;
  height: 46vh;
  overflow: visible;
}

.a-wind .w {
  fill: none;
  stroke: rgba(122, 88, 48, 0.34);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 240 900;
  stroke-dashoffset: 1000;
  opacity: 0;
}

.gusting .a-wind .w { animation: wind-gust 3.6s ease-out forwards; }
.gusting .a-wind .w2 { animation-delay: 0.18s; }
.gusting .a-wind .w3 { animation-delay: 0.36s; }

.a-branch {
  position: absolute;
  top: 0;
  overflow: visible;
}

/* Full branches. They are allowed to overlap the board. */
.a-branch-r {
  right: -24px;
  top: -16px;
  width: min(520px, 46vw);
  aspect-ratio: 360 / 230;
  height: auto;
}

.a-branch-l {
  left: -22px;
  top: -14px;
  width: min(460px, 42vw);
  aspect-ratio: 320 / 210;
  height: auto;
}

.branch-sway { transform-box: view-box; }
.branch-sway-r { transform-origin: 100% 0; animation: branch-r 8s ease-in-out infinite alternate; }
.branch-sway-l { transform-origin: 0 0;    animation: branch-l 9.5s ease-in-out infinite alternate; }

.gusting .branch-sway-r { animation: branch-gust-r 3.4s ease-in-out; }
.gusting .branch-sway-l { animation: branch-gust-l 3.4s ease-in-out; }

@keyframes wind-gust {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  15%  { opacity: 0.9; }
  70%  { stroke-dashoffset: -140; opacity: 0.8; }
  100% { stroke-dashoffset: -460; opacity: 0; }
}

@keyframes branch-r {
  from { transform: rotate(-1.2deg); }
  to   { transform: rotate(1.4deg); }
}

@keyframes branch-l {
  from { transform: rotate(1deg); }
  to   { transform: rotate(-1.3deg); }
}

@keyframes branch-gust-r {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-3.2deg); }
  55%      { transform: rotate(2.4deg); }
  80%      { transform: rotate(-1deg); }
}

@keyframes branch-gust-l {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(3.6deg); }
  55%      { transform: rotate(-2deg); }
  80%      { transform: rotate(1deg); }
}

@media (max-width: 760px) {
  .a-branch-r { width: 220px; }
  .a-branch-l { width: 200px; }
  .a-wind { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .branch-sway { animation: none !important; }
}