/* ══════════════════════════════════════════
   Motion & seasonal themes
   Vše respektuje prefers-reduced-motion (viz konec souboru).
   ══════════════════════════════════════════ */

/* ── page transitions (same-origin navigation) ── */
@view-transition { navigation: auto; }
#nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

:root { interpolate-size: allow-keywords; }

/* icons follow the accent (Halloween swaps it) */
.feature-icon, .signup-icon { color: var(--accent); }

/* ── hero intro ── */
.hero-title .title-line { display: block; overflow: hidden; white-space: nowrap; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-title .ch { display: inline-block; animation: chRise .9s cubic-bezier(.2,.75,.15,1) both; animation-delay: calc(120ms + var(--i) * 38ms); }
@keyframes chRise { from { transform: translateY(108%) rotate(5deg); } to { transform: none; } }

.hero .hero-eyebrow, .hero .hero-sub, .hero .hero-desc, .hero .hero-ctas { animation: fadeUp .8s cubic-bezier(.2,.75,.15,1) both; }
.hero .hero-sub   { animation-delay: .55s; }
.hero .hero-desc  { animation-delay: .65s; }
.hero .hero-ctas  { animation-delay: .75s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-visual { position: relative; min-width: 0; }
.hero .hero-media { animation: unveil 1.2s cubic-bezier(.65,0,.2,1) .15s both; }
.hero .hero-team-photo { animation: settle 1.8s cubic-bezier(.2,.75,.15,1) .15s both; }
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round 4px); } to { clip-path: inset(0 0 0 0 round 4px); } }
@keyframes settle { from { transform: scale(1.14); } to { transform: none; } }

/* ── next tournament banner ── */
.event-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 28px;
  padding: 18px 64px; background: var(--surface2); border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--accent); color: var(--text);
}
.event-banner-label { color: var(--accent); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.event-banner-title { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.event-banner-meta { color: var(--dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.event-banner-count { padding: 6px 10px; background: var(--accent); color: #15102F; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; animation: pulse 2.4s ease-in-out infinite; }
.event-banner-cta { color: var(--accent); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; transition: transform .2s; }
.event-banner:hover { background: #2F2563; }
.event-banner:hover .event-banner-cta { transform: translateX(4px); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* ── scroll reveal (main.js adds .reveal-ready, .is-visible, .revealed) ── */
.reveal-ready [data-reveal]:not(.revealed),
.reveal-ready .display-h2:not(.revealed) {
  transition: opacity .75s cubic-bezier(.2,.75,.15,1), transform .75s cubic-bezier(.2,.75,.15,1);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(28px); }
.reveal-ready .display-h2:not(.is-visible) { opacity: 0; transform: translateY(.35em); }

/* ── league: points bar + smooth expand ── */
.standing-row { position: relative; }
.standing-bar { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--lineDim); overflow: hidden; }
.standing-bar i { display: block; height: 100%; background: var(--accent); opacity: .75; transform-origin: left; transform: scaleX(var(--pct)); transition: transform 1.2s cubic-bezier(.2,.75,.15,1) .25s; }
.reveal-ready li:not(.is-visible) .standing-bar i { transform: scaleX(0); }

.standing::details-content,
.event-results::details-content { block-size: 0; overflow: clip; transition: block-size .4s cubic-bezier(.2,.75,.15,1), content-visibility .4s allow-discrete; }
.standing[open]::details-content,
.event-results[open]::details-content { block-size: auto; }

/* ══════════════════════════════════════════
   Halloween theme (data/site.php → themes)
   ══════════════════════════════════════════ */
.theme-halloween.home-page,
.theme-halloween.league-page { --accent: #FF8A2B; }
.theme-halloween .btn-primary:hover { background: #FFA45C; }
.theme-halloween .standing:hover, .theme-halloween .standing[open],
.theme-halloween.home-page .stat-item:hover,
.theme-halloween.home-page .feature-card:hover { border-color: rgba(255,138,43,.4) !important; }
.theme-halloween.home-page .tl-dot-hi { box-shadow: 0 0 14px rgba(255,138,43,.45); }
.theme-halloween.home-page .hero,
.theme-halloween .league-hero {
  position: relative;
  background:
    radial-gradient(55% 60% at 85% 10%, rgba(255,138,43,.16), transparent 70%),
    radial-gradient(40% 50% at 5% 95%, rgba(140,60,200,.18), transparent 70%),
    linear-gradient(165deg, #140D2A 0%, #1A1036 52%, #2C1240 100%);
}
.theme-halloween .league-hero > :not(.bats) { position: relative; z-index: 1; }

.bats { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--accent); opacity: .7; }
.bat { position: absolute; left: var(--x); top: var(--y); width: calc(96px * var(--s)); animation: batFly 16s ease-in-out var(--delay) infinite; }
.bat path { transform-box: fill-box; transform-origin: center; animation: flap .32s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
@keyframes batFly {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  25% { transform: translate(60px, -30px) rotate(6deg); }
  50% { transform: translate(120px, 12px) rotate(-3deg); }
  75% { transform: translate(40px, 34px) rotate(5deg); }
}

/* ── responsive ── */
@media (max-width: 1100px) {
  .event-banner { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 900px) {
  .event-banner { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .event-banner-label, .event-banner-title, .event-banner-meta { grid-column: 1 / -1; }
  .event-banner-count { justify-self: start; }
}
@media (max-width: 768px) {
  .bats { bottom: auto; height: 56px; }
  .bat { width: calc(60px * var(--s)); }
  .event-banner { padding: 18px 16px; }
  .event-banner-title { font-size: 20px; }
}
@media (max-width: 640px) {
  .standing-bar { left: 12px; right: 12px; }
}

/* ── reduced motion: everything static and visible ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal-ready [data-reveal], .reveal-ready .display-h2 { opacity: 1 !important; transform: none !important; }
  .bats { display: none; }
  @view-transition { navigation: none; }
}