/* ПЕРИМЕТР — сезонное оформление (см. seasons.js). Работает поверх любой темы. */
.ssn-rel { position: relative; }
.ssn-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.ssn-deco i { position: absolute; display: block; font-style: normal; }
.ssn-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; }
.ssn-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.5s; }
html[data-season] .ssn-sky { opacity: 1; }

/* ═══ ЗИМА ═══ */
/* снежная шапка на букве: ложится на верх глифа, чуть свисает по краям */
.ssn-cap {
  height: calc(var(--fs) * var(--h)); margin-left: calc(var(--fs) * -.012);
  transform: translateY(-48%) skewX(var(--sk)); scale: 1.04 1;
  background: linear-gradient(#ffffff 40%, #dfeeff);
  border-radius: 48% 52% 30% 34% / 95% 90% 28% 32%;
  box-shadow: 0 calc(var(--fs) * .006) calc(var(--fs) * .01) rgba(10,30,60,.35), inset 0 calc(var(--fs) * -.006) 0 rgba(160,200,240,.7);
}
.ssn-cap::after { content: ""; position: absolute; left: 30%; bottom: calc(var(--fs) * -.018); width: 22%; height: calc(var(--fs) * .03);
  background: #f4f9ff; border-radius: 0 0 50% 50%; }
.ssn-ice { width: calc(var(--fs) * .035); height: calc(var(--fs) * var(--l)); margin-left: calc(var(--fs) * -.017);
  background: linear-gradient(rgba(235,248,255,.95), rgba(170,220,255,.15)); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; animation: ssn-drip 5s ease-in-out infinite var(--d); filter: drop-shadow(0 0 2px rgba(180,225,255,.6)); }
@keyframes ssn-drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.12); } }
html[data-season="winter"] .ssn-sky {
  background: radial-gradient(120% 60% at 50% -10%, rgba(190,225,255,.10), transparent 60%),
    radial-gradient(40% 40% at 0 100%, rgba(220,240,255,.08), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(220,240,255,.08), transparent 70%);
}
/* новогодняя гирлянда под шапкой (20.12–10.01) */
html.ssn-ny .top::before { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 16px; pointer-events: none;
  background:
    radial-gradient(circle at 20px 9px, #ff3b4e 0 4px, transparent 5px) 0 0 / 160px 16px repeat-x,
    radial-gradient(circle at 60px 11px, #ffd23f 0 4px, transparent 5px) 0 0 / 160px 16px repeat-x,
    radial-gradient(circle at 100px 9px, #3ddc84 0 4px, transparent 5px) 0 0 / 160px 16px repeat-x,
    radial-gradient(circle at 140px 11px, #4da3ff 0 4px, transparent 5px) 0 0 / 160px 16px repeat-x,
    radial-gradient(80px 8px at 40px 0, transparent 7px, rgba(220,230,210,.35) 7.5px 8.5px, transparent 9px) 0 0 / 80px 16px repeat-x;
  filter: drop-shadow(0 0 6px rgba(255,220,120,.6)); animation: ssn-blink 2.4s steps(2) infinite; }
@keyframes ssn-blink { 50% { filter: drop-shadow(0 0 2px rgba(255,220,120,.2)) brightness(.6) saturate(.7); } }

/* ═══ ВЕСНА ═══ */
.ssn-sprout { width: calc(var(--fs) * .24 * var(--s)); height: calc(var(--fs) * .29 * var(--s)); transform: translate(-50%, -94%); transform-origin: 50% 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 24 C10 18 10 14 10 10' stroke='%235aa83a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 12 C4 12 1 8 1 3 C6 3 10 6 10 12Z' fill='%237bd34a'/%3E%3Cpath d='M10 9 C15 9 19 6 19 1 C14 1 10 4 10 9Z' fill='%2394e05f'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  animation: ssn-sway 4s ease-in-out infinite var(--d); }
.ssn-bloom { width: calc(var(--fs) * .22 * var(--s)); aspect-ratio: 1; transform: translate(-50%, -62%); background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg transform='translate(10 10)'%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(72)'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(144)'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(216)'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(288)'/%3E%3C/g%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 20 20'%3E%3Cg transform='translate(10 10)'%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(72)'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(144)'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(216)'/%3E%3Cellipse rx='3.6' ry='5.2' cy='-4.6' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(80,0,40,.35)); }
.ssn-bloom::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; translate: -50% -50%; border-radius: 50%; background: #ffd23f; }
@keyframes ssn-sway { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
html[data-season="spring"] .ssn-sky { background: radial-gradient(70% 50% at 85% 0, rgba(255,190,220,.10), transparent 70%), radial-gradient(60% 40% at 0 100%, rgba(150,230,140,.07), transparent 70%); }

/* ═══ ЛЕТО ═══ */
.ssn-glint { inset: -6% -2%; background: linear-gradient(100deg, transparent 38%, rgba(255,248,215,.75) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: overlay; animation: ssn-glint 8s ease-in-out infinite var(--d); }
@keyframes ssn-glint { 0%, 55% { background-position: 160% 0; } 80%, 100% { background-position: -60% 0; } }
html[data-season="summer"]:not(.ssn-night) .ssn-sky {
  background: radial-gradient(circle at 88% 6%, rgba(255,236,170,.32), rgba(255,200,90,.10) 18%, transparent 42%),
    repeating-conic-gradient(from 0deg at 88% 6%, rgba(255,230,160,.06) 0 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle at 88% 6%, #000, transparent 60%); mask: radial-gradient(circle at 88% 6%, #000, transparent 60%); }
html[data-season="summer"].ssn-night .ssn-sky { background: radial-gradient(80% 50% at 50% 110%, rgba(170,255,120,.07), transparent 70%); }

/* ═══ ОСЕНЬ ═══ */
.ssn-leaf { width: calc(var(--fs) * .32 * var(--s)); height: calc(var(--fs) * .17 * var(--s)); background: var(--c);
  border-radius: 0 100% 0 100%; transform: translate(-25%, -72%) rotate(var(--rot)); transform-origin: 30% 80%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.35); animation: ssn-sway 5s ease-in-out infinite var(--d); }
.ssn-leaf::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: rgba(0,0,0,.28); transform: rotate(-24deg); }
html[data-season="autumn"] .ssn-sky { background: radial-gradient(90% 50% at 50% 115%, rgba(255,140,50,.10), transparent 70%); }

/* ═══ взаимодействие ═══ */
/* наведение — росток/цветок/лист раскачивается сильнее, в сторону движения руки */
.ssn-deco .ssn-poke { animation: ssn-poke .9s cubic-bezier(.3, .7, .3, 1) !important; }
@keyframes ssn-poke {
  0% { rotate: 0deg; scale: 1; } 18% { rotate: calc(var(--pd, 1) * 28deg); scale: 1.12; } 40% { rotate: calc(var(--pd, 1) * -18deg); }
  62% { rotate: calc(var(--pd, 1) * 10deg); } 82% { rotate: calc(var(--pd, 1) * -4deg); } 100% { rotate: 0deg; scale: 1; } }
/* срывание — улетает вниз, кружась (дальше его подхватывает падение частиц) */
.ssn-deco .ssn-drop { animation: ssn-drop .65s ease-in forwards !important; }
@keyframes ssn-drop { to { translate: calc(var(--pd, 1) * 26px) 70px; rotate: 160deg; opacity: 0; } }
/* счётчик пойманного */
.ssn-count { position: fixed; left: 16px; bottom: 16px; z-index: 46; pointer-events: none;
  padding: 7px 12px; border-radius: 999px; font: 700 13px var(--mono); color: var(--ink);
  background: rgb(from var(--bg) r g b / .75); border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ssn-count[hidden] { display: none; }
.ssn-count.pop { animation: ssn-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ssn-pop { 40% { scale: 1.25; } }

/* спокойные режимы: украшения остаются, но не двигаются */
html.lite .ssn-deco i, html.lite .top::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ssn-deco i, .ssn-glint { animation: none !important; } }
@media print { .ssn-deco, .ssn-fx, .ssn-sky { display: none !important; } }