/* Christmas & New Year layer for Treasure Island.
   Loaded only while the season is switched on in the admin. Every piece here
   is added on top of the normal design: absolutely positioned, pointer-events
   off, and nothing in the page moves or changes size because of it. */

:root {
  --xm-red: #d6303f;
  --xm-green: #2f9e5a;
  --xm-ice: #a6cee9;
}

/* ---------- falling snow ---------- */
.xm-snow {
  position: fixed; inset: 0; z-index: 850;
  pointer-events: none; width: 100%; height: 100%;
}

/* ---------- string lights under the menu ---------- */
.xm-lights {
  position: absolute; left: 0; right: 0; top: calc(100% - 3px);
  height: 26px; pointer-events: none; z-index: 1;
  transition: opacity .35s ease;
}
.xm-lights svg { display: block; width: 100%; height: 26px; overflow: visible; }
.xm-lights .xm-wire { fill: none; stroke: rgba(0, 48, 74, .38); stroke-width: 1.2; }
.nav--light:not(.scrolled) .xm-lights .xm-wire { stroke: rgba(255, 255, 255, .55); }
.xm-bulb { animation: xmTwinkle 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.xm-bulb ellipse { filter: drop-shadow(0 0 3px var(--c, #ffba1a)); }
@keyframes xmTwinkle {
  0%, 100% { opacity: 1; }
  45% { opacity: .5; }
  55% { opacity: .62; }
}
/* the menu slides away on scroll; the lights go with it rather than dangle */
.nav.hidden .xm-lights, .nav.nav--drawer .xm-lights { opacity: 0; }

/* ---------- hat on the logo ---------- */
.xm-hat {
  position: absolute; left: 21px; top: -16px; width: 30px; height: 27px;
  pointer-events: none; transform: rotate(-14deg); transform-origin: 50% 90%;
  filter: drop-shadow(0 2px 2px rgba(0, 26, 42, .25));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.xm-hat svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand:hover .xm-hat { transform: rotate(-22deg) translateY(-2px); }
@media (max-width: 900px) { .xm-hat { width: 26px; height: 23px; left: 17px; top: -14px; } }

/* ---------- snow resting on the hero picture ---------- */
.xm-cap {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 40, 64, .22));
}
.xm-cap svg { width: 100%; height: 100%; display: block; }

/* ---------- snowy edge on the footer ---------- */
.xm-drift {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 2;
  pointer-events: none;
}
.xm-drift svg { width: 100%; height: 100%; display: block; }

/* ---------- small touches ---------- */
/* eyebrow dots become snowflakes */
html[data-season] .eyebrow::before {
  width: 10px; height: 10px; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 4l3 2.5L15 4M9 20l3-2.5 3 2.5M4 10.5l1.6 2-2.6 1M20 10.5l-1.6 2 2.6 1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 4l3 2.5L15 4M9 20l3-2.5 3 2.5M4 10.5l1.6 2-2.6 1M20 10.5l-1.6 2 2.6 1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* a sprig of holly on the "Now open" badge (a sparkle at New Year) */
html[data-season] .hero-badge { position: relative; }
html[data-season] .hero-badge::after {
  content: ""; position: absolute; right: -9px; top: -11px; width: 26px; height: 22px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M12 13C9 6 3 5 1 8c3 0 3 3 5 4-2 1-3 3-2 5 2-3 5-2 8-4z' fill='%232f9e5a'/%3E%3Cpath d='M14 13c3-7 9-8 11-5-3 0-3 3-5 4 2 1 3 3 2 5-2-3-5-2-8-4z' fill='%23268a4c'/%3E%3Ccircle cx='11' cy='14.5' r='2.6' fill='%23d6303f'/%3E%3Ccircle cx='15.2' cy='14.8' r='2.4' fill='%23e8414f'/%3E%3Ccircle cx='13' cy='11.4' r='2.3' fill='%23c42535'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-season-phase="newyear"] .hero-badge::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M13 1l1.8 6.2L21 9l-6.2 1.8L13 17l-1.8-6.2L5 9l6.2-1.8z' fill='%23FFBA1A'/%3E%3Cpath d='M21.5 13l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8z' fill='%23F5A50A'/%3E%3Cpath d='M4 13.5l.6 1.8 1.8.6-1.8.6-.6 1.8-.6-1.8-1.8-.6 1.8-.6z' fill='%23FFD166'/%3E%3C/svg%3E");
}


/* ---------- frozen touches ---------- */
/* buttons: snow resting on the top edge, a frost sparkle and an icy rim.
   Inside the button (it clips its own edges), behind the text. */
html[data-season] .btn--gold::before,
html[data-season] .btn--navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.4 7.2L20 12l-6.6 2.8L12 22l-1.4-7.2L4 12l6.6-2.8z' fill='%23fff'/%3E%3Cpath d='M19.5 3.5l.5 2 2 .5-2 .5-.5 2-.5-2-2-.5 2-.5z' fill='%23eaf6ff'/%3E%3C/svg%3E") right 13% top 5px / 12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M0 0h40v3.4c-2.6 3.4-5.6 3.6-8 1.4s-4.8-2.4-7 .2-5.4 3.8-8.4 1.2S11.8 4 9.6 6.2 4 9.4 0 4.6z' fill='%23fff'/%3E%3C/svg%3E") left top / 40px 9px repeat-x;
  transition: opacity .45s ease, transform .55s ease;
}
html[data-season] .btn--sm::before { background-size: 10px 10px, 32px 7px; background-position: right 12% top 4px, left top; }
html[data-season] .btn--gold { box-shadow: var(--sh-gold), inset 0 0 0 1.5px rgba(255, 255, 255, .55), inset 0 -9px 16px -11px rgba(110, 175, 225, .7); }
html[data-season] .btn--gold:hover { box-shadow: 0 24px 54px -18px rgba(245, 165, 10, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .6), inset 0 -9px 16px -11px rgba(110, 175, 225, .75); }
html[data-season] .btn--navy { box-shadow: 0 16px 40px -18px rgba(0, 48, 74, .7), inset 0 0 0 1.5px rgba(190, 225, 248, .35), inset 0 -10px 18px -12px rgba(166, 206, 233, .55); }
/* a little melt on hover, then it freezes over again */
html[data-season] .btn--gold:hover::before,
html[data-season] .btn--navy:hover::before { opacity: .45; transform: translateY(-2px); }

/* icicles under the "Now open" badge */
html[data-season] .hero-badge::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: calc(100% - 1px); height: 11px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 11'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaf6fe'/%3E%3Cstop offset='1' stop-color='%2390c4e8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0h34v1.2l-2.2.2-1.3 6.8-1.4-6.8-4 .2-.9 3.6-.9-3.6-3.6.1-1.4 9.1-1.5-9.1-3.8.1-.8 4.2-.9-4.2-3.7.1L5.8 8.6 4.3 1.6 0 1.4z' fill='url(%23g)'/%3E%3C/svg%3E") left top / 34px 11px repeat-x;
  filter: drop-shadow(0 0 .6px rgba(70, 135, 190, .7)) drop-shadow(0 1px 1px rgba(80, 140, 190, .3));
}

/* the gold headline: an icy glint passes over it every few seconds */
html[data-season] .hero h1 em {
  background:
    linear-gradient(100deg, transparent 42%, rgba(232, 246, 255, .95) 49%, rgba(255, 255, 255, 1) 50%, rgba(232, 246, 255, .95) 51%, transparent 58%) 160% 0 / 260% 100% no-repeat,
    linear-gradient(100deg, var(--gold-600), var(--gold) 40%, var(--coral));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(166, 206, 233, .45));
  animation: xmGlint 6.5s ease-in-out 1.8s infinite;
}
@keyframes xmGlint {
  0% { background-position: 160% 0, 0 0; }
  32%, 100% { background-position: -60% 0, 0 0; }
}

/* frost creeping in from the corners of the hero picture */
.xm-frost { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.xm-frost::before, .xm-frost::after {
  content: ""; position: absolute; width: clamp(90px, 26%, 170px); aspect-ratio: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cg stroke-width='1.6' opacity='.9'%3E%3Cpath d='M160 160L96 96M160 160l-70-26M160 160l-26-70M118 118l-16 4M118 118l4-16M132 132l-20 2M132 132l2-20M104 104l-14 6M104 104l6-14'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.7'%3E%3Cpath d='M90 134l-12 8M90 134l-4-14M134 90l8-12M134 90l-14-4M120 146l-16 4M146 120l4-16M70 150l-10-4M150 70l-4-10'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .7), rgba(235, 246, 255, .35) 30%, transparent 62%);
}
.xm-frost::after { right: 0; bottom: 0; }
.xm-frost::before { left: 0; top: 0; transform: rotate(180deg); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .xm-bulb, html[data-season] .hero h1 em { animation: none; }
  .xm-hat { transition: none; }
}
@media print {
  .xm-snow, .xm-lights, .xm-hat, .xm-cap, .xm-drift, .xm-frost { display: none !important; }
}