/* ==========================================================================
   Ashley's Art: fall
   A seasonal layer over styles.css. Every rule is scoped to
   html[data-season="fall"], which the switch in index.html sets until the end of
   November, so without it the site is exactly the usual strawberry-milk pink.
   Pumpkin spice instead of strawberry milk; a cranberry rose keeps a little of
   Ashley's pink in the hearts.
   ========================================================================== */

html[data-season="fall"] {
  --paper:      #FFF6EC;   /* oat milk */
  --paper-2:    #FCE9D6;   /* toasted */
  --cream:      #FFFCF6;
  --ink:        #5A2A1D;   /* maple syrup */
  --ink-2:      #8A5944;
  --pink:       #EC8445;   /* pumpkin */
  --pink-deep:  #D0592A;   /* burnt orange */
  --pink-soft:  #FFD8BC;   /* peach */
  --cocoa:      #6B3A25;
  --cocoa-lite: #B9876C;
  --butter:     #F6C657;   /* mustard */
  --line:       #F1D0B2;
  --rose:       #C9445A;   /* cranberry rose */
  --sage:       #8DA474;

  --shadow-s: 0 3px 0 rgba(208,89,42,.12), 0 8px 20px -10px rgba(107,58,37,.32);
  --shadow-m: 0 5px 0 rgba(208,89,42,.12), 0 20px 40px -18px rgba(107,58,37,.38);
}

html[data-season="fall"] ::selection { background: var(--pink-soft); }

/* ---------- nav + buttons ---------- */
html[data-season="fall"] .nav { background: rgba(255,246,236,.88); }
html[data-season="fall"] .btn-order { box-shadow: 0 5px 0 var(--pink-deep), 0 14px 26px -12px rgba(208,89,42,.8); }
html[data-season="fall"] .btn-order:hover { box-shadow: 0 7px 0 #A9441C, 0 18px 30px -12px rgba(208,89,42,.85); }
html[data-season="fall"] .btn-order:active { box-shadow: 0 2px 0 #A9441C; }
html[data-season="fall"] .brand-bow path,
html[data-season="fall"] .brand-bow circle { fill: var(--rose); }
html[data-season="fall"] .foot .brand-bow path,
html[data-season="fall"] .foot .brand-bow circle { fill: var(--butter); }

/* ---------- hero ---------- */
/* the hand underline under "you", in mustard */
html[data-season="fall"] .hero h1 em::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8c22-7 44 3 66-1s30-4 50 1' fill='none' stroke='%23F6C657' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* plaid washi tape */
html[data-season="fall"] .tape {
  background:
    repeating-linear-gradient(0deg,  rgba(208,89,42,.32) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, rgba(208,89,42,.32) 0 6px, transparent 6px 12px),
    rgba(255,216,188,.88);
}

/* leaf garland hanging under the nav */
.fall-garland { display: none; }
html[data-season="fall"] .fall-garland {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 70px;
  pointer-events: none; z-index: 1;
}
html[data-season="fall"] .fall-garland svg { display: block; width: 100%; height: 100%; }
html[data-season="fall"] .hero { padding-top: clamp(70px, 8vw, 100px); }

/* stickers added by fall.js */
html[data-season="fall"] .fall-pumpkin {
  position: absolute; left: 2%; bottom: -26px; width: 104px; z-index: 2;
  filter: drop-shadow(0 9px 10px rgba(107,58,37,.3));
  animation: bob2 7s ease-in-out infinite reverse;
}
html[data-season="fall"] .fall-pumpkin svg { display: block; width: 100%; height: auto; }
html[data-season="fall"] .mascot .fall-scarf {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
html[data-season="fall"] .fall-polaroid-leaf {
  position: absolute; right: -20px; bottom: 30px; width: 58px; transform: rotate(18deg);
  filter: drop-shadow(0 6px 8px rgba(107,58,37,.3));
}
html[data-season="fall"] .fall-polaroid-leaf svg { display: block; width: 100%; height: auto; }

/* the floating decorations become leaves and acorns */
html[data-season="fall"] .deco svg { width: 1.25em; height: 1.25em; display: block; }
html[data-season="fall"] .deco { color: inherit; }

/* ---------- sections ---------- */
html[data-season="fall"] .chips li:hover { border-color: var(--pink); }
html[data-season="fall"] .rev-hearts { color: var(--rose); }
html[data-season="fall"] .rev:nth-child(6n+1) .rev-av { background: #EC8445 !important; }
html[data-season="fall"] .rev:nth-child(6n+2) .rev-av { background: #C9445A !important; }
html[data-season="fall"] .rev:nth-child(6n+3) .rev-av { background: #8A5944 !important; }
html[data-season="fall"] .rev:nth-child(6n+4) .rev-av { background: #8DA474 !important; }
html[data-season="fall"] .rev:nth-child(6n+5) .rev-av { background: #D0592A !important; }
html[data-season="fall"] .rev:nth-child(6n)   .rev-av { background: #B9876C !important; }

/* flannel behind the order section */
html[data-season="fall"] .order {
  background:
    repeating-linear-gradient(90deg, rgba(208,89,42,.055) 0 28px, transparent 28px 56px),
    repeating-linear-gradient(0deg,  rgba(208,89,42,.055) 0 28px, transparent 28px 56px),
    repeating-linear-gradient(90deg, rgba(90,42,29,.035) 0 2px, transparent 2px 14px),
    var(--paper);
}

html[data-season="fall"] .foot { color: #FFE8D4; }
html[data-season="fall"] .lb { background: rgba(62,30,19,.92); }

/* ---------- cursor + trail: a maple leaf instead of a heart ---------- */
@media (hover: hover) and (pointer: fine) {
  html[data-season="fall"] .cursor { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  html[data-season="fall"] .cursor path { stroke-width: 1.5; }
  html[data-season="fall"] .heart-trail { width: 15px; height: 15px; animation: leafPuff .95s ease-out forwards; }
}
@keyframes leafPuff {
  0%   { transform: translateY(0) rotate(0) scale(1); opacity: .95; }
  100% { transform: translateY(30px) rotate(150deg) scale(.55); opacity: 0; }
}

/* ---------- falling leaves ----------
   A handful of leaves drifting down the page. Transform-only animations on a
   fixed layer, so they cost next to nothing; hidden while the viewer is open
   and for anyone who prefers less motion. */
.fall-sky { display: none; }
html[data-season="fall"] .fall-sky {
  display: block; position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden;
}
.fl {
  position: absolute; top: -48px; width: var(--s, 22px); height: var(--s, 22px);
  animation: flFall var(--d, 16s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.fl svg {
  display: block; width: 100%; height: 100%; opacity: .88;
  animation: flSway calc(var(--d, 16s) / 4) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes flFall { from { transform: translateY(-6vh); } to { transform: translateY(112vh); } }
@keyframes flSway {
  from { transform: translateX(calc(var(--sway, 40px) * -1)) rotate(-30deg); }
  to   { transform: translateX(var(--sway, 40px)) rotate(40deg); }
}
body.lb-open .fall-sky { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fall-sky { display: none !important; }
}