/* Everbright — Christmas page extras (loaded only on christmas.html).
   Same motion rules as the rest of the site: opacity/transform only, all off for reduced-motion. */

.on-pine { background: radial-gradient(120% 90% at 20% 0%, #1d6a41 0%, #0f3f28 45%, #072316 100%); color: var(--text); }
.on-holly { background: radial-gradient(120% 120% at 30% 0%, #d02a3c 0%, #a31b2b 45%, #6d0f1b 100%); color: #fff6ee; }
.on-holly .lede, .on-holly .step p { color: #f6dcdc; }
.on-holly .eyebrow { color: var(--gold-hi); }
.on-holly em { color: var(--gold-hi); }
.on-holly .step__n { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .35); }
.on-holly .step::before { background: rgba(255, 255, 255, .22); }
.on-pine .lede { color: #cfe3d6; }

/* lights helper: 4 interleaved colours on any path (dots = round-capped zero-length dashes) */
.lights path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 52; }
.lights.glow path { stroke-width: 20; opacity: .28; }
.lights.core path { stroke-width: 8; }
.lights .a { stroke: #ff3b3b; }
.lights .b { stroke: #ffd48a; stroke-dashoffset: -13; }
.lights .c { stroke: #2ee26b; stroke-dashoffset: -26; }
.lights .d { stroke: #fff6e6; stroke-dashoffset: -39; }
.lights.fixed path { vector-effect: non-scaling-stroke; }
.tw-a { animation: tw 3s ease-in-out infinite; will-change: opacity; }
.tw-b { animation: tw 3s ease-in-out infinite -1.5s; will-change: opacity; }
@keyframes tw { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* festive hero */
.phero--xmas { background: radial-gradient(90% 130% at 85% 0%, #1f7a49 0%, #0f4029 38%, #07140f 80%); padding-top: calc(var(--header-h) + clamp(72px, 11vw, 140px)); }
.phero--xmas h1 { max-width: 14ch; }
.phero--xmas em { color: var(--holly-hi); }
.garland { position: absolute; left: 0; right: 0; top: calc(var(--header-h) - 14px); height: 110px; z-index: -1; pointer-events: none; }
.garland svg { width: 100%; height: 100%; }
.garland .wire { fill: none; stroke: #0b3a22; stroke-width: 7; vector-effect: non-scaling-stroke; }
.garland .wire2 { fill: none; stroke: #1c6b40; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 6; }
.xtree { position: absolute; right: max(2vw, calc((100vw - var(--wrap)) / 2 - 20px)); bottom: -6px; width: clamp(180px, 26vw, 330px); z-index: -1; pointer-events: none; display: none; }
.xtree svg { width: 100%; height: auto; overflow: visible; }
.xtree .star { transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.85); opacity: .75; } 50% { transform: scale(1.15); opacity: 1; } }
@media (min-width: 760px) { .xtree { display: block; } }
.xchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.xchips li { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(248, 223, 161, .4); background: rgba(6, 9, 19, .35); color: var(--gold-hi); font: 700 .76rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }

/* falling snow: two tiled layers translated by exactly one tile height => seamless, compositor-only */
.snow { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.snow::before, .snow::after { content: ""; position: absolute; left: 0; right: 0; top: -300px; bottom: 0; background-repeat: repeat; will-change: transform; }
.snow::before { background-image: radial-gradient(2.5px 2.5px at 30px 40px, rgba(255, 255, 255, .85), transparent), radial-gradient(2px 2px at 140px 120px, rgba(255, 255, 255, .7), transparent), radial-gradient(3px 3px at 230px 220px, rgba(255, 255, 255, .8), transparent), radial-gradient(2px 2px at 80px 260px, rgba(255, 255, 255, .6), transparent); background-size: 300px 300px; animation: snowfall 16s linear infinite; }
.snow::after { top: -200px; background-image: radial-gradient(1.6px 1.6px at 40px 30px, rgba(255, 255, 255, .6), transparent), radial-gradient(1.6px 1.6px at 120px 110px, rgba(255, 255, 255, .5), transparent), radial-gradient(2px 2px at 170px 170px, rgba(255, 255, 255, .55), transparent); background-size: 200px 200px; animation: snowfall2 10s linear infinite; }
@keyframes snowfall { to { transform: translateY(300px); } }
@keyframes snowfall2 { to { transform: translateY(200px); } }

/* string of bulbs between sections */
.bulbline { position: relative; height: 34px; margin-top: -1px; overflow: hidden; pointer-events: none; background: var(--ink); }
.bulbline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #0b3a22; }
.bulbline i { position: absolute; inset: 3px 0 0 0; background-repeat: repeat-x; background-size: 104px 34px; will-change: opacity; animation: tw 2.8s ease-in-out infinite; background-image: radial-gradient(circle at 13px 12px, #ff3b3b 0 4px, rgba(255, 59, 59, .35) 5px, transparent 11px), radial-gradient(circle at 39px 12px, #ffd48a 0 4px, rgba(255, 212, 138, .35) 5px, transparent 11px), radial-gradient(circle at 65px 12px, #2ee26b 0 4px, rgba(46, 226, 107, .35) 5px, transparent 11px), radial-gradient(circle at 91px 12px, #fff6e6 0 4px, rgba(255, 246, 230, .35) 5px, transparent 11px); }
.bulbline i + i { animation-delay: -1.4s; background-position: 52px 0; opacity: .5; }
.bulbline--paper::before { background: #5c0c17; }

/* festive cards on pine */
.on-pine .card { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(248, 223, 161, .2); }
.on-pine .card .ico { background: rgba(208, 42, 60, .28); color: #ffc2c9; }
.on-pine .card p { color: #cfe3d6; }
@media (hover: hover) { .on-pine .card:hover { border-color: rgba(248, 223, 161, .55); } }
.on-pine .card--feature { background: linear-gradient(160deg, rgba(233, 189, 98, .22), rgba(255, 255, 255, .04)); }
.on-pine .card--feature .ico { background: rgba(233, 189, 98, .2); color: var(--gold-hi); }

/* candy-cane frame + warmer paper */
.on-paper--xmas { background: linear-gradient(180deg, #fbf3e4, #f4e8d0); }
.photo--candy { padding: 10px; border: 0; background: repeating-linear-gradient(135deg, #d02a3c 0 16px, #fffaf0 16px 32px); box-shadow: 0 30px 70px -30px rgba(109, 15, 27, .55); }
.photo--candy img { border-radius: calc(var(--r-l) - 8px); }
.photo--candy .photo__tag { left: 24px; top: 24px; }
.photo--candy figcaption { left: 10px; right: 10px; bottom: 10px; border-radius: 0 0 calc(var(--r-l) - 8px) calc(var(--r-l) - 8px); }
.on-paper--xmas .style { border-color: rgba(208, 42, 60, .22); }

/* red band with snow */
.band--red { background: radial-gradient(80% 140% at 50% 0%, #d02a3c 0%, #a31b2b 45%, #5c0c17 100%); }
.band--red p { color: #f9dede; }
.band--red em { color: var(--gold-hi); }


/* ---------- festive hovers ---------- */
.theme-xmas .card, .theme-xmas .style { position: relative; overflow: hidden; transition: transform var(--t-med) var(--ease), border-color var(--t-med), box-shadow var(--t-med), background-color var(--t-med); }
/* a string of bulbs "plugs in" along the top edge */
.theme-xmas .card::after, .theme-xmas .style::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 8px; height: 10px; pointer-events: none; opacity: 0; transform: translateY(-5px);
  background:
    radial-gradient(circle, #ff3b3b 0 3.2px, transparent 3.8px) 0 50% / 60px 10px repeat-x,
    radial-gradient(circle, #ffd48a 0 3.2px, transparent 3.8px) 15px 50% / 60px 10px repeat-x,
    radial-gradient(circle, #2ee26b 0 3.2px, transparent 3.8px) 30px 50% / 60px 10px repeat-x,
    radial-gradient(circle, #4aa3ff 0 3.2px, transparent 3.8px) 45px 50% / 60px 10px repeat-x;
  filter: drop-shadow(0 0 5px rgba(255, 214, 150, .9));
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.theme-xmas .card:active::after, .theme-xmas a.card:focus-visible::after { opacity: 1; transform: none; }
@keyframes bulbs-tw { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes jingle { 0% { transform: rotate(0); } 20% { transform: rotate(-16deg) scale(1.1); } 45% { transform: rotate(12deg) scale(1.1); } 70% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@media (hover: hover) {
  .theme-xmas .card:hover::after, .theme-xmas .style:hover::after { opacity: 1; transform: none; animation: bulbs-tw 1.6s ease-in-out .3s infinite; }
  .theme-xmas .card:hover { transform: translateY(-5px); border-color: rgba(255, 115, 132, .65); box-shadow: 0 22px 50px -20px rgba(208, 42, 60, .65), 0 0 0 1px rgba(255, 115, 132, .25), 0 0 46px -14px rgba(46, 226, 107, .45); }
  .theme-xmas .card:nth-child(even):hover { border-color: rgba(76, 197, 138, .7); box-shadow: 0 22px 50px -20px rgba(34, 133, 79, .75), 0 0 0 1px rgba(76, 197, 138, .3), 0 0 46px -14px rgba(255, 115, 132, .4); }
  .theme-xmas .card:hover .ico { animation: jingle .7s var(--ease) both; background: rgba(208, 42, 60, .4); color: #fff; }
  .theme-xmas .card:nth-child(even):hover .ico { background: rgba(34, 133, 79, .5); }
  .theme-xmas .style:hover { transform: translateY(-4px); border-color: rgba(208, 42, 60, .55); box-shadow: 0 18px 40px -20px rgba(208, 42, 60, .5); }
  .theme-xmas .style:hover .style__line { filter: drop-shadow(0 0 8px var(--a)); }
  .theme-xmas .faq details:hover { border-color: rgba(255, 115, 132, .5); background: rgba(208, 42, 60, .09); }
  .theme-xmas .faq details:hover summary { color: var(--gold-hi); }
  .theme-xmas .btn--ghost:hover { border-color: var(--holly-hi); background: rgba(208, 42, 60, .14); }
  .theme-xmas .footer a:hover { color: #ff9aa7; }
}
/* candy-cane underline on every nav link while on the Christmas page */
.theme-xmas .nav a:not(.btn)::after { height: 3px; bottom: 3px; border-radius: 2px; background: repeating-linear-gradient(135deg, #ff3b3b 0 6px, #fff6e6 6px 12px); }
.theme-xmas .faq .ans a:hover { color: #ff9aa7; }

@media (prefers-reduced-motion: reduce) { .snow::before, .snow::after { transform: none !important; } }