/* Sezónní vzhled se zapíná podle data v časovém pásmu Europe/Bratislava. */
html[data-sezona="halloween"] {
  --bg: #100c14;
  --panel: #1b1420;
  --blue: #f69345;
  --line: rgba(255, 181, 103, .2);
  --muted: #beaebc;
  --hud-border: rgba(246, 147, 69, .22);
}
html[data-sezona="zima"] {
  --bg: #081725;
  --panel: #102238;
  --blue: #72d8ff;
  --line: rgba(154, 218, 255, .2);
  --muted: #afc5d7;
  --hud-border: rgba(114, 216, 255, .24);
}
html[data-sezona="halloween"] body,
html[data-sezona="zima"] body { background: var(--bg); }

html[data-sezona="halloween"] .hero {
  background-image: linear-gradient(105deg, rgba(15, 7, 20, .48), rgba(59, 24, 24, .12)), url('assets/hero-fivepd-home.jpg');
}
html[data-sezona="halloween"] .hero__shade {
  background: radial-gradient(circle at 79% 30%, rgba(255, 125, 39, .27), transparent 22%),
    linear-gradient(180deg, rgba(12, 6, 16, .54), rgba(27, 10, 19, .15) 43%, #100c14 100%);
}
html[data-sezona="zima"] .hero {
  background-image: linear-gradient(105deg, rgba(5, 29, 52, .28), rgba(17, 47, 70, .12)), url('assets/hero-fivepd-home.jpg');
}
html[data-sezona="zima"] .hero__shade {
  background: radial-gradient(circle at 78% 15%, rgba(134, 219, 255, .24), transparent 26%),
    linear-gradient(180deg, rgba(6, 22, 40, .46), rgba(9, 36, 59, .14) 45%, #081725 100%);
}
html[data-sezona="halloween"] .hero::after,
html[data-sezona="zima"] .hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
html[data-sezona="halloween"] .hero::after {
  background: radial-gradient(circle, rgba(255, 159, 66, .8) 1px, transparent 2px) 0 0/117px 109px,
    radial-gradient(circle, rgba(255, 100, 47, .48) 1px, transparent 2px) 32px 47px/177px 149px;
  opacity: .38;
  animation: sezona-jiskry 22s linear infinite;
}
html[data-sezona="halloween"] body[data-page="home"] .hero::after {
  opacity: .12;
  animation: none;
}
html[data-sezona="zima"] .hero::after {
  background: radial-gradient(circle, rgba(225, 247, 255, .78) 1px, transparent 2px) 0 0/152px 173px,
    radial-gradient(circle, rgba(208, 240, 255, .65) 1.3px, transparent 3px) 39px 24px/234px 217px;
  opacity: .5;
  animation: sezona-snih 38s linear infinite;
}
@keyframes sezona-jiskry { to { background-position: 75px -230px, -80px -310px; } }
@keyframes sezona-snih { to { background-position: 30px 420px, -48px 390px; } }

html[data-sezona="halloween"] .hero__content,
html[data-sezona="zima"] .hero__content { margin-top: -28px; }
html[data-sezona="halloween"] .hero__logo,
html[data-sezona="zima"] .hero__logo { width: min(550px, 82vw); }

.sezona-dekor { display: none; }
html[data-sezona="halloween"] .sezona-dekor,
html[data-sezona="zima"] .sezona-dekor {
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sezona-dekor::before,
.sezona-dekor::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-sezona="halloween"] .sezona-dekor {
  background:
    url('assets/tema-tekvica.svg') left 12px bottom -3px / clamp(125px, 15vw, 190px) no-repeat,
    url('assets/tema-tekvica.svg') right 12px bottom -3px / clamp(120px, 14vw, 175px) no-repeat,
    radial-gradient(circle at 5% 100%, rgba(255, 116, 31, .22), transparent 22%),
    radial-gradient(circle at 94% 100%, rgba(255, 116, 31, .16), transparent 19%);
}
html[data-sezona="halloween"] .sezona-dekor::before,
html[data-sezona="halloween"] .sezona-dekor::after {
  top: 65px;
  width: clamp(170px, 25vw, 330px);
  aspect-ratio: 1;
  background-image: url('assets/tema-pavucina.svg');
  opacity: .5;
}
html[data-sezona="halloween"] .sezona-dekor::before { left: 0; }
html[data-sezona="halloween"] .sezona-dekor::after { right: 0; transform: scaleX(-1); }
html[data-sezona="halloween"] body[data-page="home"] .sezona-dekor {
  background-size: clamp(85px, 9vw, 115px), clamp(85px, 9vw, 115px), auto, auto;
}
html[data-sezona="halloween"] body[data-page="home"] .sezona-dekor::before,
html[data-sezona="halloween"] body[data-page="home"] .sezona-dekor::after {
  top: 80px;
  width: clamp(120px, 14vw, 200px);
  opacity: .22;
}
html[data-sezona="halloween"] .page-hero .sezona-dekor {
  background:
    url('assets/tema-tekvica.svg') right 2% bottom -4px / clamp(105px, 12vw, 165px) no-repeat,
    radial-gradient(circle at 96% 100%, rgba(255, 116, 31, .15), transparent 20%);
}

html[data-sezona="zima"] .sezona-dekor {
  background:
    radial-gradient(circle, rgba(238, 250, 255, .55) 1px, transparent 2px) 8px 24px / 153px 179px,
    radial-gradient(circle, rgba(210, 239, 255, .35) 1.3px, transparent 3px) 43px 68px / 247px 253px;
  animation: sezona-snih 52s linear infinite;
}
html[data-sezona="zima"] .sezona-dekor::before,
html[data-sezona="zima"] .sezona-dekor::after {
  top: clamp(115px, 17vh, 185px);
  width: clamp(85px, 11vw, 150px);
  aspect-ratio: 1;
  background-image: url('assets/tema-vlocka.svg');
  opacity: .34;
  filter: drop-shadow(0 0 18px rgba(168, 229, 255, .28));
}
html[data-sezona="zima"] .sezona-dekor::before { left: clamp(24px, 6vw, 100px); }
html[data-sezona="zima"] .sezona-dekor::after { right: clamp(24px, 6vw, 100px); transform: rotate(25deg) scale(.78); }
html[data-sezona="halloween"] .page-hero .sezona-dekor::before,
html[data-sezona="zima"] .page-hero .sezona-dekor::before { display: none; }
html[data-sezona="halloween"] .page-hero .sezona-dekor,
html[data-sezona="zima"] .page-hero .sezona-dekor { opacity: .7; }
html[data-sezona="zima"] .page-hero .sezona-dekor::after { width: clamp(85px, 11vw, 140px); }

html[data-sezona="halloween"] .page-hero,
html[data-sezona="halloween"] .join-redesign__hero,
html[data-sezona="halloween"] .about-redesign__hero,
html[data-sezona="halloween"] .team-modern__hero {
  background: linear-gradient(100deg, rgba(16, 8, 20, .97), rgba(35, 13, 28, .7)), url('assets/hero-fivepd.png') center 40%/cover;
}
html[data-sezona="zima"] .page-hero,
html[data-sezona="zima"] .join-redesign__hero,
html[data-sezona="zima"] .about-redesign__hero,
html[data-sezona="zima"] .team-modern__hero {
  background: linear-gradient(100deg, rgba(6, 20, 37, .96), rgba(13, 52, 75, .7)), url('assets/hero-fivepd.png') center 40%/cover;
}
html[data-sezona="halloween"] .page-hero::after,
html[data-sezona="zima"] .page-hero::after {
  border-color: var(--line);
  box-shadow: 0 0 0 80px color-mix(in srgb, var(--blue) 4%, transparent);
}
html[data-sezona="halloween"] .page-hero::before,
html[data-sezona="zima"] .page-hero::before { content: none !important; display: none !important; }

html[data-sezona="halloween"] .topbar,
html[data-sezona="halloween"] .site-footer { background-color: #150e1b; }
html[data-sezona="zima"] .topbar,
html[data-sezona="zima"] .site-footer { background-color: #0a1a2b; }
html[data-sezona="halloween"] .site-footer { background-image: radial-gradient(circle at 12% 5%, rgba(242, 105, 42, .13), transparent 34%), linear-gradient(145deg, #211423, #110d18 75%); }
html[data-sezona="zima"] .site-footer { background-image: radial-gradient(circle at 12% 5%, rgba(107, 212, 255, .13), transparent 34%), linear-gradient(145deg, #12283b, #081725 75%); }
html[data-sezona="halloween"] .page-content,
html[data-sezona="halloween"] .home-izs,
html[data-sezona="halloween"] .about-values { background-color: #100c14; }
html[data-sezona="zima"] .page-content,
html[data-sezona="zima"] .home-izs,
html[data-sezona="zima"] .about-values { background-color: #081725; }
html[data-sezona="halloween"] .izs-card,
html[data-sezona="halloween"] .member-card,
html[data-sezona="halloween"] .about-services__card { border-color: rgba(255, 164, 93, .19); }
html[data-sezona="zima"] .izs-card,
html[data-sezona="zima"] .member-card,
html[data-sezona="zima"] .about-services__card { border-color: rgba(161, 222, 255, .2); }

@media (prefers-reduced-motion: reduce) {
  html[data-sezona] .hero::after,
  html[data-sezona] .sezona-dekor { animation: none; }
}
@media (max-width: 600px) {
  html[data-sezona="halloween"] .sezona-dekor,
  html[data-sezona="zima"] .sezona-dekor { opacity: .68; }
  html[data-sezona="halloween"] .sezona-dekor::before,
  html[data-sezona="halloween"] .sezona-dekor::after,
  html[data-sezona="zima"] .sezona-dekor::before,
  html[data-sezona="zima"] .sezona-dekor::after { top: 72px; width: 38vw; }
  html[data-sezona="zima"] .sezona-dekor::before,
  html[data-sezona="zima"] .sezona-dekor::after { top: 130px; width: 88px; }
  html[data-sezona="halloween"] .hero .sezona-dekor { background-size: 130px, 115px, auto, auto; }
}