/* ==========================================================================
   Ashley's Art: winter
   A seasonal layer over styles.css, like fall.css. Every rule is scoped to
   html[data-season="winter"], which the switch in index.html sets from
   December 1 to the end of February. In December the page also gets
   data-holiday, which swaps the icicles for twinkling string lights and adds a
   present next to the cocoa.
   Frosted strawberry: snow and ice blues, with a berry pink that keeps it hers.
   ========================================================================== */

html[data-season="winter"] {
  --paper:      #F6F9FD;   /* fresh snow */
  --paper-2:    #E8F0FA;   /* ice */
  --cream:      #FCFDFF;
  --ink:        #2C3A57;   /* winter night */
  --ink-2:      #5C6C8A;
  --pink:       #E8587C;   /* frosted berry */
  --pink-deep:  #CC3E63;
  --pink-soft:  #FFD4DF;
  --cocoa:      #2C3A57;
  --cocoa-lite: #8DA2C4;
  --butter:     #FFE6A0;   /* candle light */
  --line:       #D6E3F3;
  --ice:        #8DB8E6;
  --ice-deep:   #5E93CF;

  --shadow-s: 0 3px 0 rgba(94,147,207,.12), 0 8px 20px -10px rgba(44,58,87,.30);
  --shadow-m: 0 5px 0 rgba(94,147,207,.12), 0 20px 40px -18px rgba(44,58,87,.36);
}

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

/* ---------- nav + buttons ---------- */
html[data-season="winter"] .nav { background: rgba(246,249,253,.88); }
html[data-season="winter"] .btn-order { box-shadow: 0 5px 0 var(--pink-deep), 0 14px 26px -12px rgba(204,62,99,.8); }
html[data-season="winter"] .btn-order:hover { box-shadow: 0 7px 0 #A82D4E, 0 18px 30px -12px rgba(204,62,99,.85); }
html[data-season="winter"] .btn-order:active { box-shadow: 0 2px 0 #A82D4E; }
html[data-season="winter"] .btn-ghost:hover { border-color: var(--ice); box-shadow: 0 6px 0 var(--line); }
html[data-season="winter"] .foot .brand-bow path,
html[data-season="winter"] .foot .brand-bow circle { fill: var(--pink-soft); }

/* ---------- hero ---------- */
html[data-season="winter"] .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='%23BCD6F2' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* snowflake-dot washi tape */
html[data-season="winter"] .tape {
  background:
    radial-gradient(circle at 6px 6px, #fff 2.2px, transparent 2.8px) 0 0 / 14px 14px,
    radial-gradient(circle at 13px 12px, rgba(255,255,255,.75) 1.4px, transparent 2px) 0 0 / 14px 14px,
    rgba(167,201,238,.85);
}

/* garland under the nav: icicles, or string lights in December */
.winter-garland { display: none; }
html[data-season="winter"] .winter-garland {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 64px;
  pointer-events: none; z-index: 1; overflow: hidden;
}
html[data-season="winter"] .winter-garland svg { display: block; width: 100%; height: 100%; }
html[data-season="winter"] .hero { padding-top: clamp(66px, 8vw, 96px); }
.winter-bulb { animation: twinkle 2.4s ease-in-out infinite; }
.winter-bulb-glow { animation: twinkleGlow 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes twinkleGlow { 0%, 100% { opacity: .55; } 50% { opacity: .1; } }

/* stickers added by winter.js */
html[data-season="winter"] .winter-mug {
  position: absolute; left: 2%; bottom: -26px; width: 104px; z-index: 2;
  filter: drop-shadow(0 9px 10px rgba(44,58,87,.28));
  animation: bob2 7s ease-in-out infinite reverse;
}
html[data-season="winter"] .winter-mug svg,
html[data-season="winter"] .winter-gift svg { display: block; width: 100%; height: auto; overflow: visible; }
.winter-steam { animation: steam 3.2s ease-in-out infinite; }
.winter-steam.s2 { animation-delay: -1.6s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .85; } 100% { opacity: 0; transform: translateY(-10px); } }
html[data-season="winter"] .winter-gift {
  position: absolute; left: calc(2% + 92px); bottom: -22px; width: 62px; z-index: 2;
  filter: drop-shadow(0 8px 9px rgba(44,58,87,.26)); transform: rotate(8deg);
}
html[data-season="winter"] .mascot .winter-knit {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
}
html[data-season="winter"] .winter-polaroid-flake {
  position: absolute; right: -18px; bottom: 30px; width: 52px; transform: rotate(14deg);
  filter: drop-shadow(0 5px 7px rgba(44,58,87,.28));
}
html[data-season="winter"] .winter-polaroid-flake svg { display: block; width: 100%; height: auto; }

/* the floating decorations become snowflakes and a mitten */
html[data-season="winter"] .deco svg { width: 1.25em; height: 1.25em; display: block; }

/* ---------- sections ---------- */
html[data-season="winter"] .chips li:hover { border-color: var(--ice); }
html[data-season="winter"] .rev-hearts { color: var(--pink); }
html[data-season="winter"] .rev:nth-child(6n+1) .rev-av { background: #E8587C !important; }
html[data-season="winter"] .rev:nth-child(6n+2) .rev-av { background: #5E93CF !important; }
html[data-season="winter"] .rev:nth-child(6n+3) .rev-av { background: #2C3A57 !important; }
html[data-season="winter"] .rev:nth-child(6n+4) .rev-av { background: #8DA2C4 !important; }
html[data-season="winter"] .rev:nth-child(6n+5) .rev-av { background: #CC3E63 !important; }
html[data-season="winter"] .rev:nth-child(6n)   .rev-av { background: #7FB3A8 !important; }

/* light snowfall pattern behind the order section */
html[data-season="winter"] .order {
  background:
    radial-gradient(circle at 10px 12px, rgba(141,184,230,.22) 2.6px, transparent 3.2px) 0 0 / 36px 36px,
    radial-gradient(circle at 28px 28px, rgba(141,184,230,.16) 1.8px, transparent 2.4px) 0 0 / 36px 36px,
    var(--paper);
}

html[data-season="winter"] .foot { color: #E4EDFA; }
html[data-season="winter"] .lb { background: rgba(28,38,60,.93); }

/* ---------- cursor + trail: a snowflake instead of a heart ---------- */
@media (hover: hover) and (pointer: fine) {
  html[data-season="winter"] .cursor { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  html[data-season="winter"] .heart-trail { width: 13px; height: 13px; animation: flakePuff 1s ease-out forwards; }
}
@keyframes flakePuff {
  0%   { transform: translateY(0) rotate(0) scale(1); opacity: .95; }
  100% { transform: translateY(24px) rotate(90deg) scale(.5); opacity: 0; }
}

/* ---------- snowfall ---------- */
.winter-sky { display: none; }
html[data-season="winter"] .winter-sky {
  display: block; position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden;
}
.sf {
  position: absolute; top: -40px; width: var(--s, 16px); height: var(--s, 16px);
  animation: sfFall var(--d, 18s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.sf svg {
  display: block; width: 100%; height: 100%; opacity: .92;
  animation: sfSway calc(var(--d, 18s) / 3) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes sfFall { from { transform: translateY(-5vh); } to { transform: translateY(110vh); } }
@keyframes sfSway {
  from { transform: translateX(calc(var(--sway, 30px) * -1)) rotate(0deg); }
  to   { transform: translateX(var(--sway, 30px)) rotate(120deg); }
}
body.lb-open .winter-sky { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .winter-sky { display: none !important; }
  .winter-bulb, .winter-bulb-glow, .winter-steam { animation: none !important; }
}