/* ============================================================
   PRO STUDIO EFFECTS – design tokens, glassmorphism, wow efekty
   ============================================================ */

:root {
    /* Premium easing (studio standard) */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    /* Glow & depth */
    --glow-orange: 0 0 40px rgba(255, 122, 0, 0.4);
    --glow-orange-strong: 0 0 60px rgba(255, 122, 0, 0.5);
    --shadow-lift: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 24px -4px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   PRO HEADER – studio level (vrstvený sklo, hrana světla, sliding pill)
   ============================================================ */

/* ---- TOP BAR ---- */
.top-bar {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(0, 0, 0, 0.5) 25%,
        rgba(0, 0, 0, 0.65) 100%
    );
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 4px 24px -4px rgba(0, 0, 0, 0.4);
    transition: height 0.4s var(--ease-out-expo), padding 0.4s var(--ease-out-expo);
}

/* Tenká „hrana světla“ úplně nahoře (premium detail) */
.top-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 20%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.12) 80%,
        transparent 100%
    );
    pointer-events: none;
}

/* Logo – jemný halo, působí že „pluje“ nad sklem */
.top-bar-logo-wrap .top-bar-logo,
.top-bar-logo-wrap img.top-bar-logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 122, 0, 0.15));
}

/* Datum a countdown – tabular numbers, konzistentní číslice */
.festival-date,
.countdown {
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---- DIVIDER / NAV ---- */
.divider {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(20, 10, 0, 0.4) 100%
    );
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: none;
    box-shadow:
        0 1px 0 0 rgba(255, 122, 0, 0.25),
        0 6px 20px -4px rgba(0, 0, 0, 0.35);
    padding: 0 28px;
    overflow: visible;
}
.divider-left {
    flex-shrink: 0;
    white-space: nowrap;
}
.divider-nav {
    flex-shrink: 1;
    min-width: 0;
}

/* Oranžová akcentová čára nad nav (gradient) */
.divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 122, 0, 0.3) 15%,
        rgba(255, 122, 0, 0.7) 50%,
        rgba(255, 122, 0, 0.3) 85%,
        transparent 100%
    );
    pointer-events: none;
}

/* Navigace – odsazení a gap pro pill */
.divider-nav {
    gap: 4px;
    padding: 6px 0;
}

/* Odkazy v nav – padding pro pill */
.divider-nav a {
    position: relative;
    padding: 8px 16px;
    margin: 0 2px;
    border-radius: 999px;
    transition: color 0.3s var(--ease-out-quint), background 0.35s var(--ease-out-expo);
}

/* Pill pozadí při hover a active */
.divider-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ff9a33;
}

.divider-nav a.active {
    background: rgba(255, 122, 0, 0.2);
    color: #ffb366;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 0 0 1px rgba(255, 122, 0, 0.35);
}

.divider-nav a.active:hover {
    background: rgba(255, 122, 0, 0.28);
}

/* Podtržítko reveal (doplňuje pill na desktopu) */
.divider-nav a::after {
    display: none;
}

.divider-nav a.active::after {
    display: none;
}

/* CTA Vstupenky – skleněný styl (glass button) */
.divider-left {
    background: rgba(255, 122, 0, 0.12);
    border: 1px solid rgba(255, 122, 0, 0.5);
    border-radius: 999px;
    padding: 10px 20px;
    margin-right: 12px;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.1em;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        0 2px 12px -4px rgba(255, 122, 0, 0.3);
}

.divider-left:hover {
    background: rgba(255, 122, 0, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    color: #000;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        var(--glow-orange-strong);
}

/* Scrolled state (menší header) */
@media (min-width: 769px) {
    .top-bar.is-scrolled {
        height: 72px;
    }

    .top-bar.is-scrolled .top-bar-logo-wrap {
        height: 56px;
    }

    .top-bar.is-scrolled .top-bar-logo-wrap .top-bar-logo,
    .top-bar.is-scrolled .top-bar-logo-wrap img.top-bar-logo {
        height: 56px !important;
        min-height: 56px !important;
        transform: scale(4) translateY(8px);
    }

    .top-bar.is-scrolled .festival-date,
    .top-bar.is-scrolled .countdown {
        font-size: 20px;
    }
}

/* Tablet a notebook – menší logo při scrolli, aby nepřekrývalo Domů */
@media (min-width: 769px) and (max-width: 1199px) {
    .top-bar.is-scrolled .top-bar-logo-wrap .top-bar-logo,
    .top-bar.is-scrolled .top-bar-logo-wrap img.top-bar-logo {
        transform: scale(3) translateY(8px);
    }
}

/* Mobil – nav pill menší padding, divider kompaktní, menu hned pod headerem */
@media (max-width: 768px) {
    .divider {
        padding: 0 16px;
    }

    .divider-nav a {
        padding: 6px 12px;
    }

    .mobile-menu {
        position: absolute;
        padding-top: 0;
        padding-bottom: 20px;
    }
}

/* Mobilní menu – sklo, oranžová čára, stagger odkazů (position: fixed jen na mobilu v @media) */
.mobile-menu {
    position: relative;
    background: rgba(12, 10, 8, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 122, 0, 0.25);
    box-shadow:
        0 1px 0 0 rgba(255, 122, 0, 0.35),
        0 12px 40px -12px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    padding: 16px 12px 24px;
    gap: 6px;
}

/* Oranžová akcentová čára nahoře (jako u divideru) */
.mobile-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 122, 0, 0.4) 20%,
        rgba(255, 122, 0, 0.85) 50%,
        rgba(255, 122, 0, 0.4) 80%,
        transparent 100%
    );
    pointer-events: none;
}

.mobile-menu a {
    padding: 14px 20px;
    border-radius: 10px;
    margin: 0 8px;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        background 0.25s var(--ease-out-expo),
        color 0.2s ease,
        opacity 0.35s var(--ease-out-expo),
        transform 0.35s var(--ease-out-expo);
}

.mobile-menu.active a {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.active a:nth-child(1) { transition-delay: 0.04s; }
.mobile-menu.active a:nth-child(2) { transition-delay: 0.08s; }
.mobile-menu.active a:nth-child(3) { transition-delay: 0.12s; }
.mobile-menu.active a:nth-child(4) { transition-delay: 0.16s; }
.mobile-menu.active a:nth-child(5) { transition-delay: 0.2s; }
.mobile-menu.active a:nth-child(6) { transition-delay: 0.24s; }

.mobile-menu a:hover,
.mobile-menu a.active {
    background: rgba(255, 122, 0, 0.18);
    color: #ffb366;
}

/* Tlačítko MENU – pill + sklo, při otevření jemný oranžový glow */
.menu-button {
    border-radius: 999px;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    letter-spacing: 0.12em;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.3s ease;
}

.menu-button:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: #000;
}

.menu-button.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 122, 0, 0.6);
    color: #000;
    box-shadow: 0 0 0 1px rgba(255, 122, 0, 0.4), 0 0 20px rgba(255, 122, 0, 0.25);
}

/* ---------------------------------------------------
   GRAIN OVERLAY – filmový / premium textura
--------------------------------------------------- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* ---------------------------------------------------
   POZADÍ – WOW: stage světlo, paprsky, oranžové záření
--------------------------------------------------- */
body {
    background-color: #0a0604;
    background-image:
        /* 1) Hlavní „stage“ spotlight shora – VIDITELNÉ oranžové světlo */
        radial-gradient(ellipse 120% 90% at 50% -20%, rgba(255, 120, 40, 0.45) 0%, rgba(255, 90, 20, 0.22) 25%, rgba(255, 70, 10, 0.08) 45%, transparent 65%),
        /* 2) Sekundární glow vpravo nahoře – teplá záře */
        radial-gradient(ellipse 80% 60% at 85% 5%, rgba(255, 100, 30, 0.2) 0%, rgba(255, 80, 15, 0.06) 50%, transparent 70%),
        /* 3) Třetí světlo vlevo dole – jemná oranž */
        radial-gradient(ellipse 70% 50% at 15% 95%, rgba(255, 85, 25, 0.15) 0%, transparent 55%),
        /* 4) Světelné paprsky – diagonální „stage“ pruhy */
        linear-gradient(105deg, transparent 0%, transparent 35%, rgba(255, 100, 30, 0.06) 50%, transparent 65%),
        linear-gradient(75deg, transparent 0%, transparent 30%, rgba(255, 110, 35, 0.05) 48%, transparent 68%),
        linear-gradient(255deg, transparent 0%, transparent 40%, rgba(255, 90, 25, 0.04) 55%, transparent 70%),
        /* 5) Vignette – rohy zůstávají tmavší, střed „svítí“ */
        radial-gradient(ellipse 100% 95% at 50% 50%, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.6) 100%),
        /* 6) Základ – teplý tmavý (ne čistá čerň) */
        linear-gradient(175deg, #0d0805 0%, #0a0604 30%, #080504 55%, #0a0705 85%, #0c0806 100%);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---------------------------------------------------
   OVERLAY – jen jemné sjednocení, ne přebíjet světla
--------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* Jemné cinematic horní/dolní */
        linear-gradient(180deg, rgba(2, 1, 0, 0.5) 0%, transparent 22%, transparent 78%, rgba(2, 1, 0, 0.45) 100%),
        /* Oranž v rozích – víc vidět */
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(255, 95, 25, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(255, 80, 20, 0.1) 0%, transparent 55%),
        /* Lehká vrstva pro čitelnost */
        linear-gradient(180deg, rgba(4, 3, 2, 0.2) 0%, transparent 40%, rgba(4, 3, 2, 0.08) 100%);
}

/* ---------------------------------------------------
   HERO TITLE – gradient text + jemný glow
--------------------------------------------------- */
/* Stejný styl jako „ČíroFest 2026“ – gradient + glow na všechny hlavní nadpisy */
#page-wrapper > h1,
#page-wrapper .video-section-title,
#page-wrapper .program-main-title,
.info-title,
.info-subtitle,
.hero-title {
    background: linear-gradient(135deg, #ff7a00 0%, #ffd200 50%, #ff7a00 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 24px rgba(255, 122, 0, 0.35));
}

/* Fallback pro prohlížeče bez background-clip */
@supports not (background-clip: text) {
    #page-wrapper > h1,
    #page-wrapper .video-section-title,
    #page-wrapper .program-main-title,
    .info-title,
    .info-subtitle,
    .hero-title {
        color: #ff7a00;
        text-shadow: 0 0 32px rgba(255, 122, 0, 0.4);
    }
}

/* CTA – hover lift (doplňuje pro header styly) */
.divider-left {
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo),
                background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.divider-left:hover {
    transform: translateY(-2px) scale(1.02);
}

.divider-left:active {
    transform: translateY(0) scale(0.98);
}

/* ---------------------------------------------------
   VIDEO KARTY – lift + border glow + plynulý scale
--------------------------------------------------- */
.video-wrapper,
.video-center {
    border-radius: 12px;
    border-width: 2px;
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo),
                border-color 0.3s ease;
    box-shadow: var(--shadow-card);
}

.video-wrapper:hover,
.video-center:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--glow-orange), var(--shadow-lift);
    border-color: #ffd200;
}

/* ---------------------------------------------------
   SECTION FADE – delší, premium easing
--------------------------------------------------- */
.section-fade {
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}

.section-fade.visible {
    transform: translateY(0);
}

/* ---------------------------------------------------
   STAGGER REVEAL – děti se objeví s zpožděním
--------------------------------------------------- */
.stagger-reveal > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.stagger-reveal.visible > * {
    opacity: 1;
    transform: translateY(0);
}

.stagger-reveal.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-reveal.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-reveal.visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger-reveal.visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger-reveal.visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger-reveal.visible > *:nth-child(6) { transition-delay: 0.4s; }
.stagger-reveal.visible > *:nth-child(7) { transition-delay: 0.47s; }
.stagger-reveal.visible > *:nth-child(8) { transition-delay: 0.54s; }
.stagger-reveal.visible > *:nth-child(9) { transition-delay: 0.61s; }
.stagger-reveal.visible > *:nth-child(10) { transition-delay: 0.68s; }
.stagger-reveal.visible > *:nth-child(n+11) { transition-delay: 0.75s; }

/* ---------------------------------------------------
   PROGRAM / KAPELY – karty s lift a glow
--------------------------------------------------- */
.program-day {
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

.program-day:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 32px rgba(255, 122, 0, 0.25), var(--shadow-lift);
}

.band {
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo),
                border-color 0.3s ease;
}

.band:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 32px rgba(255, 122, 0, 0.3);
}

/* ---------------------------------------------------
   INFO BOX / MAP SECTION – premium stín
--------------------------------------------------- */
.info-box,
.map-section {
    transition: box-shadow 0.4s var(--ease-out-expo);
}

.info-box:hover,
.map-section:hover {
    box-shadow: 0 0 36px rgba(255, 120, 0, 0.2), var(--shadow-card);
}

/* ---------------------------------------------------
   MOBILE MENU – rozbalení dolů (max-height v cirofest.css)
--------------------------------------------------- */
.mobile-menu {
    transition: max-height 0.4s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo);
}

/* ---------------------------------------------------
   FOTOGALERIE – folder box hover
--------------------------------------------------- */
.folder-box {
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}

.folder-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-orange);
}

.photo-thumb {
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.3s ease;
}

.photo-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------
   NAV BUTTON – navigovat do klubu
--------------------------------------------------- */
.nav-button {
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}

.nav-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-orange);
}

/* ---------------------------------------------------
   LOGO – jemný puls při loadu (optional, lze vypnout)
--------------------------------------------------- */
@keyframes pro-logo-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.top-bar-logo-wrap {
    animation: pro-logo-in 0.8s var(--ease-out-expo) both;
}

/* Reduce motion pro přístupnost */
@media (prefers-reduced-motion: reduce) {
    .section-fade,
    .stagger-reveal > *,
    .video-wrapper, .video-center,
    .program-day, .band,
    .divider-left, .folder-box, .nav-button {
        transition-duration: 0.01ms !important;
    }
    .top-bar-logo-wrap {
        animation: none;
    }
    .mobile-menu a {
        transition-delay: 0ms !important;
    }
}