:root {
  --season-accent: var(--cyan);
  --season-soft: rgba(73, 184, 255, .16);
}

html[data-season="spring"] { --season-accent: #49b8ff; --season-soft: rgba(73, 184, 255, .16); }
html[data-season="summer"] { --season-accent: var(--orange); --season-soft: rgba(255, 107, 44, .17); }
html[data-season="autumn"] { --season-accent: #ff7a3f; --season-soft: rgba(255, 107, 44, .17); }
html[data-season="winter"] { --season-accent: #8ed4ff; --season-soft: rgba(142, 212, 255, .16); }

.hero { position: relative; overflow: hidden; }
.seasonal-note {
  position: relative;
  z-index: 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  width: max-content;
  max-width: 100%;
  margin: 18px 0 0 auto;
  padding: 10px 14px 10px 11px;
  border: 1px solid #38546a;
  background: rgba(8, 21, 34, .78);
  backdrop-filter: blur(8px);
}
.seasonal-note > * { position: relative; z-index: 1; }
.seasonal-note::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(110deg, transparent 24%, rgba(255, 255, 255, .12) 50%, transparent 76%); transform: translateX(-130%); }
.seasonal-note div { display: flex; flex-direction: column; }
.seasonal-note strong { font: 700 12px/1.2 Inter; letter-spacing: 1.7px; text-transform: uppercase; color: var(--season-accent); }
.seasonal-note div span { margin-top: 4px; color: #afc0cd; font-size: 12px; }
.seasonal-mark { position: relative; display: block; width: 34px; height: 34px; border: 1px solid var(--season-accent); border-radius: 50%; background: var(--season-soft); }
.seasonal-mark::before, .seasonal-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 3px; border-radius: 3px; background: var(--season-accent); transform-origin: center; }
.seasonal-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.seasonal-mark::after { transform: translate(-50%, -50%) rotate(-45deg); }

.seasonal-decor { position: absolute; z-index: 1; right: 4vw; top: 240px; width: 220px; height: 170px; pointer-events: none; opacity: .42; }
.seasonal-decor i { position: absolute; display: block; width: 18px; height: 18px; border: 2px solid var(--season-accent); background: var(--season-soft); transform: rotate(45deg); }
.seasonal-decor i:nth-child(1) { left: 7%; top: 12%; }
.seasonal-decor i:nth-child(2) { right: 10%; top: 5%; width: 10px; height: 10px; }
.seasonal-decor i:nth-child(3) { left: 48%; bottom: 5%; width: 12px; height: 12px; }
.seasonal-decor i:nth-child(4) { right: 2%; bottom: 26%; width: 24px; height: 24px; }

html[data-season="spring"] .seasonal-mark::before,
html[data-season="spring"] .seasonal-mark::after { width: 14px; height: 8px; border-radius: 14px 2px 14px 2px; }
html[data-season="spring"] .seasonal-mark::before { transform: translate(-82%, -58%) rotate(20deg); }
html[data-season="spring"] .seasonal-mark::after { transform: translate(-18%, -42%) rotate(200deg); }
html[data-season="summer"] .seasonal-mark::before { width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); }
html[data-season="summer"] .seasonal-mark::after { width: 22px; height: 2px; box-shadow: 0 -7px 0 var(--season-accent), 0 7px 0 var(--season-accent); transform: translate(-50%, -50%) rotate(45deg); }
html[data-season="autumn"] .seasonal-mark::before { width: 14px; height: 10px; border-radius: 14px 2px 14px 2px; transform: translate(-50%, -50%) rotate(35deg); }
html[data-season="autumn"] .seasonal-mark::after { width: 1px; height: 18px; transform: translate(-50%, -50%) rotate(35deg); }
html[data-season="winter"] .seasonal-mark::after { transform: translate(-50%, -50%) rotate(90deg); box-shadow: 0 0 0 0 var(--season-accent); }
html[data-season="winter"] .seasonal-decor i { border-radius: 50%; background: transparent; }
html[data-season="spring"] .seasonal-decor i { border-radius: 14px 2px 14px 2px; transform: rotate(25deg); }
html[data-season="summer"] .seasonal-decor i { border-radius: 50%; transform: none; }
html[data-season="autumn"] .seasonal-decor i { border-radius: 12px 2px 12px 2px; transform: rotate(35deg); }

@media (max-width: 900px) {
  .seasonal-note { margin: 16px 0 0 auto; }
  .seasonal-decor { top: 210px; right: -30px; opacity: .25; }
}
@media (max-width: 560px) {
  .seasonal-note { width: 100%; margin-top: 14px; }
  .seasonal-note div span { font-size: 11px; }
  .seasonal-decor { display: block; top: 205px; right: -24px; width: 126px; height: 108px; opacity: .24; }
  .seasonal-decor i:nth-child(3), .seasonal-decor i:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .seasonal-note { animation: seasonal-note-arrive .8s cubic-bezier(.2, .75, .25, 1) both; }
  .seasonal-note::after { animation: seasonal-note-sweep 4.8s ease-in-out 1.2s infinite; }
  .seasonal-mark { animation: seasonal-mark-pulse 3.8s ease-in-out .8s infinite; }
  .seasonal-decor i { animation: seasonal-float 6s ease-in-out infinite; }
  .seasonal-decor i:nth-child(2) { animation-delay: -1.5s; }
  .seasonal-decor i:nth-child(3) { animation-delay: -3s; }
  .seasonal-decor i:nth-child(4) { animation-delay: -4.5s; }
  @keyframes seasonal-note-arrive {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes seasonal-note-sweep {
    0%, 58% { transform: translateX(-130%); }
    78%, 100% { transform: translateX(130%); }
  }
  @keyframes seasonal-mark-pulse {
    0%, 72%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    82% { box-shadow: 0 0 0 7px transparent; transform: scale(1.08); }
    88% { box-shadow: 0 0 0 2px var(--season-soft); transform: scale(1); }
  }
  @keyframes seasonal-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
}