/* ── Seasonal ice keys (user 2026-11-03: 做一些各时节的这种主题按钮…其余的也都上线吧) ──
   On a date in one of ice-season.js's windows the sign-in page's keys
   (.ice-key.submit-btn) are dressed for it: the same key, its press and
   tilt from ice-key.js, a material and a few things that move. Any other
   day they are the clear ice of ice-key.css. ice-season.js sets .fest and
   data-fest and puts the pieces in; this file only paints them. Loaded
   after ice-key.css, so equal selectors here win. */
.ice-key.fest{--fx-label:oklch(100% 0 0)}
.ice-key.fest .key-cap{
  background:var(--cap-bg);
  box-shadow:
    inset 0 var(--ice-hairline) 0 var(--cap-hi),
    inset 0 -1px 0 var(--cap-lo,oklch(100% 0 0 / .2)),
    inset 0 0 0 1px var(--cap-rim),
    inset 0 -7px 12px -7px var(--cap-deep),
    0 7px 12px -7px var(--ice-shadow);
}
.ice-key.fest .key-cap::before{backdrop-filter:none;-webkit-backdrop-filter:none}
.ice-key.fest .key-base{background:var(--base-bg);box-shadow:inset 0 1px 0 var(--base-hi,oklch(100% 0 0 / .35)),inset 0 -1px 1px oklch(0% 0 0 / .3),0 5px 10px -6px var(--ice-shadow)}
.ice-key.fest .key-base::before{background:none}
.ice-key.fest .key-caustic{display:none}
html[data-mode] .ice-key.fest .label{color:var(--fx-label)}
.ice-key.fest .fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}
.ice-key.fest .fx svg{position:absolute;display:block}
.ice-key.fest .gloss{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 30% -8%,oklch(100% 0 0 / .42),transparent 62%),linear-gradient(180deg,oklch(100% 0 0 / .16),transparent 34%)}
.ice-key.fest .fx-span{position:absolute;inset:0}
/* What moves around the key. No sideways overhang: on a phone the form
   column is the screen's width, and a canvas reaching past it would let
   the page scroll sideways (the frost canvas is pinned the same way). */
.ice-key .fx-canvas{position:absolute;left:0;right:0;top:-70px;bottom:-56px;z-index:4;pointer-events:none}
.ice-key .fx-canvas canvas{width:100%;height:100%;display:block}
.ice-key.fest[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ice-key.fest *{animation:none!important}}

/* 🎃 Halloween — a carved pumpkin with a candle in it. */
.ice-key.fest[data-fest='halloween']{
  --cap-bg:
    radial-gradient(60% 130% at 50% 118%,oklch(92% .16 88 / .6),transparent 62%),
    linear-gradient(180deg,oklch(76% .17 58),oklch(64% .19 47) 52%,oklch(50% .17 38));
  --cap-hi:oklch(96% .08 78 / .8);--cap-rim:oklch(44% .14 38 / .8);--cap-deep:oklch(34% .12 34 / .8);
  --base-bg:linear-gradient(180deg,oklch(46% .15 40),oklch(34% .12 35));
  --ice-shadow:oklch(30% .12 40 / .45);
  --fx-label:oklch(97% .13 92);
}
.ice-key.fest[data-fest='halloween'] .label{text-shadow:0 0 6px oklch(88% .18 75 / .95),0 0 16px oklch(78% .2 55 / .8)}
.ice-key.fest[data-fest='halloween'] .ribs{inset:0;width:100%;height:100%}
.ice-key.fest[data-fest='halloween'] .candle{background:radial-gradient(42% 90% at 50% 70%,oklch(94% .15 90 / .55),transparent 70%);animation:hw-flick 2.6s infinite}
.ice-key.fest[data-fest='halloween']:hover .candle{animation-duration:.9s}
@keyframes hw-flick{0%,100%{opacity:.75}12%{opacity:.55}20%{opacity:.9}33%{opacity:.62}47%{opacity:1}58%{opacity:.7}71%{opacity:.88}84%{opacity:.6}}
.ice-key.fest[data-fest='halloween'] .web{left:-2px;top:-2px;width:46px;height:40px;opacity:.55}
.ice-key.fest[data-fest='halloween'] .bats{right:16px;top:4px;width:56px;height:30px;transition:transform .9s cubic-bezier(.3,.6,.2,1),opacity .9s}
.ice-key.fest[data-fest='halloween']:hover .bats{transform:translate(70px,-26px) scale(.7);opacity:0}

/* 🎄 Christmas — red lacquer under fresh snow, a string of lights. */
.ice-key.fest[data-fest='christmas']{
  --cap-bg:linear-gradient(180deg,oklch(58% .2 27),oklch(46% .19 25) 58%,oklch(36% .15 22));
  --cap-hi:oklch(100% 0 0 / .5);--cap-rim:oklch(32% .12 22 / .8);--cap-deep:oklch(26% .1 20 / .8);
  --base-bg:linear-gradient(180deg,oklch(42% .1 152),oklch(30% .08 155));
  --ice-shadow:oklch(26% .08 20 / .45);
}
.ice-key.fest[data-fest='christmas'] .snow{left:0;top:-1px;width:100%;height:14px}
.ice-key.fest[data-fest='christmas'] .lights{top:auto;height:16px}
.ice-key.fest[data-fest='christmas'] .bulb{position:absolute;top:8px;width:5px;height:7px;border-radius:50% 50% 45% 45%;animation:xm-tw 2s infinite}
@keyframes xm-tw{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.35;filter:brightness(.7)}}

/* 🎆 New Year — champagne gold, glitter, a firework on the press. */
.ice-key.fest[data-fest='newyear']{
  --cap-bg:
    repeating-linear-gradient(90deg,oklch(100% 0 0 / .05) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,oklch(96% .06 92) 0,oklch(87% .11 85) 20%,oklch(74% .13 75) 52%,oklch(62% .12 68) 80%,oklch(82% .11 82));
  --cap-hi:oklch(100% 0 0 / .85);--cap-rim:oklch(55% .1 65 / .8);--cap-deep:oklch(45% .09 60 / .6);
  --base-bg:linear-gradient(180deg,oklch(55% .1 66),oklch(40% .08 60));
  --ice-shadow:oklch(35% .08 65 / .45);
  --fx-label:oklch(26% .05 65);
}
.ice-key.fest[data-fest='newyear'] .glitter i{position:absolute;border-radius:50%;background:oklch(100% .03 90);box-shadow:0 0 3px oklch(100% .05 90 / .9);opacity:.15;animation:ny-tw 2.4s infinite}
@keyframes ny-tw{0%,100%{opacity:.12;transform:scale(.6)}45%{opacity:1;transform:scale(1.25)}60%{opacity:.4}}

/* 🧧 Lunar New Year — lacquer red, gold auspicious clouds, a double gold line. */
.ice-key.fest[data-fest='lunar']{
  --cap-bg:radial-gradient(90% 140% at 50% 0%,oklch(60% .22 28),oklch(47% .2 26) 62%,oklch(36% .16 23));
  --cap-hi:oklch(92% .12 85 / .75);--cap-rim:oklch(80% .13 82 / .9);--cap-deep:oklch(26% .1 22 / .7);
  --base-bg:linear-gradient(180deg,oklch(40% .15 25),oklch(30% .12 23));
  --ice-shadow:oklch(26% .1 25 / .45);
  --fx-label:oklch(90% .13 86);
}
.ice-key.fest[data-fest='lunar'] .key-cap{box-shadow:inset 0 0 0 1px oklch(82% .13 84 / .9),inset 0 0 0 3.5px oklch(45% .19 26),inset 0 0 0 4.5px oklch(82% .13 84 / .55),inset 0 -7px 12px -7px var(--cap-deep),0 7px 12px -7px var(--ice-shadow)}
.ice-key.fest[data-fest='lunar'] .cloud{top:50%;width:66px;height:30px;margin-top:-15px;opacity:.9}
.ice-key.fest[data-fest='lunar'] .cloud.l{left:8px}
.ice-key.fest[data-fest='lunar'] .cloud.r{right:8px;transform:scaleX(-1)}

/* 💝 Valentine's — rose glass with hearts rising in it. */
.ice-key.fest[data-fest='valentine']{
  --cap-bg:linear-gradient(180deg,oklch(84% .1 355 / .9),oklch(70% .17 0 / .92) 58%,oklch(58% .19 6 / .95));
  --cap-hi:oklch(100% 0 0 / .7);--cap-rim:oklch(55% .17 5 / .6);--cap-deep:oklch(45% .16 8 / .6);
  --base-bg:linear-gradient(180deg,oklch(56% .17 5),oklch(44% .15 8));
  --ice-shadow:oklch(40% .15 5 / .4);
}
.ice-key.fest[data-fest='valentine'] .hearts i{position:absolute;bottom:-16px;opacity:0;animation:vl-rise 6s linear infinite}
.ice-key.fest[data-fest='valentine'] .hearts svg{position:static;width:100%;height:100%}
@keyframes vl-rise{0%{opacity:0;transform:translateY(0) rotate(-8deg)}12%{opacity:1}55%{transform:translateY(-34px) translateX(4px) rotate(6deg)}100%{opacity:0;transform:translateY(-70px) translateX(-3px) rotate(-6deg)}}

/* 🌸 Spring — blossom-pink frost with a flowering branch; petals drift past. */
.ice-key.fest[data-fest='spring']{
  --cap-bg:linear-gradient(180deg,oklch(97% .02 350),oklch(91% .05 350) 58%,oklch(85% .07 354));
  --cap-hi:oklch(100% 0 0 / .95);--cap-rim:oklch(80% .07 352 / .9);--cap-deep:oklch(72% .09 355 / .6);
  --base-bg:linear-gradient(180deg,oklch(82% .07 354),oklch(72% .09 356));
  --ice-shadow:oklch(55% .1 355 / .35);
  --fx-label:oklch(40% .1 350);
}
.ice-key.fest[data-fest='spring'] .branch{left:-4px;top:-2px;width:120px;height:52px}

/* 🌊 Summer — sea glass, light moving through water. */
.ice-key.fest[data-fest='summer']{
  --cap-bg:linear-gradient(180deg,oklch(88% .09 192 / .92),oklch(72% .12 202 / .94) 55%,oklch(57% .12 214 / .96));
  --cap-hi:oklch(100% 0 0 / .8);--cap-rim:oklch(52% .1 214 / .6);--cap-deep:oklch(42% .1 220 / .6);
  --base-bg:linear-gradient(180deg,oklch(54% .1 212),oklch(42% .09 218));
  --ice-shadow:oklch(38% .09 215 / .4);
}
.ice-key.fest[data-fest='summer'] .caustic{inset:-20%;background-image:var(--caustic);background-size:180px 90px;opacity:.5;mix-blend-mode:soft-light;animation:sm-drift 9s linear infinite}
.ice-key.fest[data-fest='summer'] .caustic.b{background-size:230px 110px;opacity:.38;animation:sm-drift2 13s linear infinite}
@keyframes sm-drift{to{background-position:180px 90px}}
@keyframes sm-drift2{to{background-position:-230px 110px}}
.ice-key.fest[data-fest='summer'] .bubbles i{position:absolute;bottom:-8px;border-radius:50%;border:1px solid oklch(100% 0 0 / .7);background:radial-gradient(circle at 35% 30%,oklch(100% 0 0 / .8) 0 18%,transparent 30%);opacity:0;animation:sm-rise 4s ease-in infinite}
@keyframes sm-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-58px) translateX(3px)}}

/* 🍁 Autumn — amber with maple leaves held in it. */
.ice-key.fest[data-fest='autumn']{
  --cap-bg:linear-gradient(180deg,oklch(86% .13 82 / .95),oklch(72% .16 62 / .96) 55%,oklch(56% .15 46));
  --cap-hi:oklch(98% .06 85 / .85);--cap-rim:oklch(48% .12 45 / .7);--cap-deep:oklch(38% .11 40 / .7);
  --base-bg:linear-gradient(180deg,oklch(48% .12 46),oklch(36% .1 40));
  --ice-shadow:oklch(32% .09 45 / .45);
}
.ice-key.fest[data-fest='autumn'] .leaves{inset:0;width:100%;height:100%}

/* The page's own motion switch stops everything (its master gate already
   cuts animations to a hundredth of a millisecond; the canvas checks it too). */
html[data-anim='off'] .ice-key.fest *{animation:none!important}