/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', sans-serif;
  background: #09090b;
  color: #fff;
  overflow-x: hidden;
}

/* Grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════ VARIANT TABS ═══════════════════ */
.variant-nav {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px 16px 16px;
}
.v-tab {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: rgba(255,255,255,.55);
  cursor: default;
}
.v-tab.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ═══════════════════ HERO ═══════════════════ */
.hero {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px 56px;
  overflow: hidden;
}

.glow-purple {
  position: absolute;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(109,40,217,.45) 0%, transparent 70%);
  bottom: -80px; left: -120px;
  pointer-events: none;
  animation: orbDrift 5s ease-in-out infinite;
}
.glow-orange {
  position: absolute;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(194,65,12,.4) 0%, transparent 70%);
  bottom: -60px; right: -100px;
  pointer-events: none;
  animation: orbDrift 4s ease-in-out infinite reverse;
}
.glow-pink-top {
  position: absolute;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(232,121,249,.22) 0%, transparent 65%);
  top: -60px; right: 10%;
  pointer-events: none;
  animation: orbDrift 6s ease-in-out infinite 1.5s;
}
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(38px,-28px) scale(1.07); }
  66%      { transform: translate(-22px,18px) scale(.94); }
}

/* Comic image frame */
.comic-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
  animation: imageBob 5s ease-in-out infinite;
}
@keyframes imageBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.comic-img {
  display: block;
  width: clamp(280px, 62vw, 680px);
  height: auto;
  border-radius: 18px;
  border: 4px solid #ffffff;
  box-shadow:
    -60px 0 100px rgba(234,179,8,.85),
    -100px 0 160px rgba(234,179,8,.4),
    60px 0 100px rgba(124,58,237,.85),
    100px 0 160px rgba(124,58,237,.4),
    0 -20px 60px rgba(232,121,249,.2),
    0 10px 40px rgba(0,0,0,.65);
}
.age-badge {
  position: absolute;
  top: -14px;
  right: -18px;
  background: #facc15;
  color: #000;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 16px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
  animation: badgeWobble 2.5s ease-in-out infinite;
}
@keyframes badgeWobble {
  0%,100% { transform: rotate(13deg) scale(1);    }
  40%     { transform: rotate(18deg) scale(1.12); }
  70%     { transform: rotate(9deg)  scale(.96);  }
}

/* "NEJLEPŠÍ AKCE ROKU 2026" pill */
.event-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 2px solid #ffffff;
  border-radius: 50px;
  padding: 9px 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 12px;
  background: rgba(255,255,255,.06);
}

/* Title stack */
.title-stack {
  position: relative;
  z-index: 2;
  line-height: 1;
}
.t-vikou {
  display: block;
  font-size: clamp(58px, 12.5vw, 108px);
  font-weight: 900;
  background: linear-gradient(130deg, #e879f9 20%, #a855f7 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.t-10 {
  display: block;
  font-size: clamp(110px, 24vw, 210px);
  font-weight: 900;
  line-height: .85;
  background: linear-gradient(130deg, #a3e635 20%, #facc15 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: numberGlow 3s ease-in-out infinite;
}
@keyframes numberGlow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(163,230,53,.15)); }
  50%     { filter: drop-shadow(0 0 22px rgba(163,230,53,.45)) drop-shadow(0 0 44px rgba(250,204,21,.22)); }
}
.t-naroz {
  display: block;
  font-size: clamp(48px, 10.5vw, 92px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
}

/* Subtitle pill */
.sub-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 800;
  margin-top: 24px;
  background:
    linear-gradient(rgba(9,9,11,.92), rgba(9,9,11,.92)) padding-box,
    linear-gradient(135deg, #06b6d4, #7c3aed, #e879f9) border-box;
  border: 1.5px solid transparent;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 22px rgba(6,182,212,.2),
    0 0 44px rgba(232,121,249,.1),
    inset 0 1px 0 rgba(255,255,255,.07);
  letter-spacing: .2px;
}
.sub-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #06b6d4, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(6,182,212,.55);
}
.sub-icon svg {
  width: 18px; height: 18px;
  stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sub-zzz {
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  color: #a3e635;
  letter-spacing: 1px;
  animation: zzzFloat 2.2s ease-in-out infinite;
}
@keyframes zzzFloat {
  0%,100% { opacity: 1;   transform: translateY(0);   }
  50%     { opacity: .45; transform: translateY(-4px); }
}

/* ═══════════════════ COUNTDOWN ═══════════════════ */
.countdown {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 44px 24px 0;
}
.cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(82px, 18vw, 122px);
  height: clamp(82px, 18vw, 122px);
  border-radius: 20px;
  opacity: 0;
  animation: cdEntrance .6s forwards cubic-bezier(.34,1.56,.64,1);
  position: relative;
  overflow: hidden;
  filter: brightness(0.8);
}
/* glimmer overlay */
.cd-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%);
  pointer-events: none;
}
@keyframes cdEntrance {
  from { transform: translateY(44px) scale(.7); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}
.cd-box.pink   { background: linear-gradient(135deg,#f0abfc,#d946ef); animation-delay:.15s; }
.cd-box.cyan   { background: linear-gradient(135deg,#67e8f9,#06b6d4); animation-delay:.3s;  }
.cd-box.green  { background: linear-gradient(135deg,#86efac,#22c55e); animation-delay:.45s; }
.cd-box.orange { background: linear-gradient(135deg,#fdba74,#f97316); animation-delay:.6s;  }
.cd-num {
  font-size: clamp(38px, 8.5vw, 58px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.cd-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  margin-top: 4px;
}

/* ═══════════════════ TICKER ═══════════════════ */
.ticker {
  position: relative;
  z-index: 5;
  margin-top: 44px;
  background: #a3e635;
  height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: tickerMove 22s linear infinite;
}
.ticker-item {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000;
  padding: 0 32px;
}
@keyframes tickerMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-rev {
  background: #09090b;
  border-top: 2px solid #a3e635;
  border-bottom: 2px solid #a3e635;
}
.ticker-track-rev { animation: tickerRev 28s linear infinite; }
.ticker-item-rev  { color: #a3e635; }
@keyframes tickerRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* scroll reveal */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════ INFO + MAP ═══════════════════ */
.info-map {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 60px 40px;
  background: #09090b;
  flex-wrap: wrap;
}
.info-panel {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 380px;
  flex: 0 0 auto;
}
.info-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #e879f9;
}
.info-heading {
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.info-desc {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  max-width: 360px;
}
.info-items { display: flex; flex-direction: column; gap: 16px; }
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.info-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.info-icon.icon-date {
  background: linear-gradient(135deg, #e879f9, #a855f7);
  box-shadow: 0 0 18px rgba(232,121,249,.45);
}
.info-icon.icon-pin {
  background: linear-gradient(135deg, #06b6d4, #22c55e);
  box-shadow: 0 0 18px rgba(6,182,212,.45);
}
.info-icon svg {
  width: 22px; height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info-text strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.info-text span {
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.map-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e879f9, #f97316);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  align-self: flex-start;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 0 20px rgba(232,121,249,.35);
}
/* shimmer */
.map-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s ease-in-out infinite;
}
.map-btn:hover { transform: translateY(-3px); box-shadow: 0 0 34px rgba(232,121,249,.6); }
@keyframes shimmer { 0%{left:-75%} 100%{left:125%} }
.map-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.map-frame {
  width: 420px;
  height: 420px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.15);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 30px rgba(168,85,247,.4),
    0 8px 32px rgba(0,0,0,.6);
  overflow: hidden;
  flex-shrink: 0;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ═══════════════════ GUEST SECTION ═══════════════════ */
.guest-section {
  position: relative;
  z-index: 5;
  background: linear-gradient(135deg, #3b0764 0%, #6d28d9 38%, #7c3aed 55%, #0e7490 100%);
  padding: 80px 32px 90px;
  text-align: center;
  overflow: hidden;
}
.guest-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #facc15;
  margin-bottom: 10px;
}
.guest-heading {
  font-size: clamp(26px, 4.5vw, 42px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 56px;
  display: inline-block;
}
/* gradient underline */
.guest-heading::after {
  content: '';
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e879f9, #facc15, #06b6d4);
  animation: lineGrow .9s ease both;
}
@keyframes lineGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
/* starfield */
.star { position: absolute; background: #fff; border-radius: 50%; pointer-events: none; }
@keyframes twinkle {
  0%,100% { opacity:.15; transform:scale(1); }
  50%     { opacity:.9;  transform:scale(1.8); }
}
/* Name cloud */
.name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.name-row + .name-row { margin-top: 10px; }
.nm {
  line-height: 1;
  cursor: default;
  font-family: 'Nunito', sans-serif;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.nm:hover { animation-play-state: paused; transform: scale(1.12) rotate(-2deg) !important; }

@keyframes dance-warm {
  0%,100% { transform: scale(1);    color: #facc15; }
  30%     { transform: scale(1.14); color: #e879f9; }
  65%     { transform: scale(0.93); color: #fb923c; }
}
@keyframes dance-cool {
  0%,100% { transform: scale(1);    color: #67e8f9; }
  30%     { transform: scale(1.12); color: #a3e635; }
  65%     { transform: scale(0.95); color: #818cf8; }
}
@keyframes dance-white {
  0%,100% { transform: scale(1);    color: #ffffff; }
  30%     { transform: scale(1.1);  color: #e879f9; }
  65%     { transform: scale(0.96); color: #67e8f9; }
}
@keyframes dance-lavender {
  0%,100% { transform: scale(1);    color: #c4b5fd; }
  30%     { transform: scale(1.1);  color: #fb923c; }
  65%     { transform: scale(0.95); color: #a3e635; }
}
/* sizes */
.n-xl  { font-size: clamp(48px,  8vw, 74px); }
.n-lg  { font-size: clamp(34px,  5.5vw, 54px); }
.n-md  { font-size: clamp(22px,  3.5vw, 36px); }
.n-sm  { font-size: clamp(16px,  2.5vw, 26px); }
/* weights */
.w-black  { font-weight: 900; }
.w-bold   { font-weight: 700; }
.w-reg    { font-weight: 400; }
.italic   { font-style: italic; }
/* colors */
.c-yellow  { color: #facc15; }
.c-white   { color: #ffffff; }
.c-cyan    { color: #67e8f9; }
.c-orange  { color: #fb923c; }
.c-lavender{ color: #c4b5fd; }

/* ═══════════════════ FOOTER ═══════════════════ */
footer {
  position: relative;
  z-index: 5;
  background: #000;
  text-align: center;
  padding: 22px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 768px) {
  .info-map {
    flex-direction: column;
    padding: 40px 20px;
    gap: 32px;
  }
  .info-panel {
    max-width: 100%;
    width: 100%;
  }
  .map-panel {
    width: 100%;
  }
  .map-frame {
    width: 100%;
    height: 280px;
  }
  .info-desc {
    max-width: 100%;
  }
  .map-btn {
    align-self: stretch;
    justify-content: center;
    min-height: 48px;
  }
}
@media (max-width: 500px) {
  .hero { padding: 36px 16px 36px; }
  .event-pill { letter-spacing: 2px; font-size: 10px; padding: 7px 14px; }
  .sub-pill { font-size: 13px; padding: 8px 14px 8px 8px; }
  .t-naroz { letter-spacing: 1px; }
  .countdown { gap: 8px; padding: 32px 16px 0; }
  .cd-box { width: 74px; height: 74px; border-radius: 14px; }
  .cd-num { font-size: 34px; }
  .guest-section { padding: 60px 16px 70px; }
  .name-row { gap: 4px 10px; }
}