/* =========================================================

   ANIMACE WEBU VITTU

========================================================= */





/* =========================================================

   ZÁKLADNÍ KEYFRAMES

========================================================= */



@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(35px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-35px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(45px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(-45px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(0.92);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes heroBackgroundZoom {

    from {

        transform: scale(1.05);

    }



    to {

        transform: scale(1.12);

    }

}



@keyframes heroGlow {

    0%,

    100% {

        opacity: 0.25;

        transform: translate(-50%, -50%) scale(1);

    }



    50% {

        opacity: 0.42;

        transform: translate(-50%, -50%) scale(1.12);

    }

}



@keyframes floating {

    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-8px);

    }

}



@keyframes goldPulse {

    0%,

    100% {

        box-shadow:

            0 0 0 rgba(212, 175, 55, 0),

            0 15px 40px rgba(212, 175, 55, 0.2);

    }



    50% {

        box-shadow:

            0 0 30px rgba(212, 175, 55, 0.18),

            0 18px 50px rgba(212, 175, 55, 0.28);

    }

}



@keyframes scrollArrowMove {

    0%,

    100% {

        opacity: 0.5;

        transform: translateY(0);

    }



    50% {

        opacity: 1;

        transform: translateY(8px);

    }

}



@keyframes loaderLogoPulse {

    0%,

    100% {

        opacity: 0.7;

        transform: scale(0.96);

    }



    50% {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes lineShine {

    from {

        transform: translateX(-110%);

    }



    to {

        transform: translateX(110%);

    }

}





/* =========================================================

   NAČÍTACÍ OBRAZOVKA

========================================================= */



.page-loader__logo {

    animation: loaderLogoPulse 1.4s ease-in-out infinite;

}



.page-loader__line::after {

    animation: loaderLine 1.3s ease-in-out infinite;

}





/* =========================================================

   HERO ANIMACE

========================================================= */



.hero__background {

    animation: heroBackgroundZoom 16s ease-in-out infinite alternate;

}



.hero::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: 52%;

    left: 50%;

    width: min(700px, 70vw);

    height: min(700px, 70vw);

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            rgba(29, 104, 172, 0.18) 0%,

            rgba(29, 104, 172, 0.08) 35%,

            transparent 70%

        );

    filter: blur(20px);

    pointer-events: none;

    animation: heroGlow 6s ease-in-out infinite;

}



.hero__eyebrow {

    animation: fadeDown 0.8s ease 0.25s both;

}



.hero__title {

    animation: fadeUp 1s ease 0.42s both;

}



.hero__subtitle {

    animation: fadeUp 0.9s ease 0.62s both;

}



.hero__buttons {

    animation: fadeUp 0.9s ease 0.82s both;

}



.hero__scroll {

    animation: fadeIn 1s ease 1.15s both;

}



.hero__scroll-arrow {

    animation: scrollArrowMove 1.8s ease-in-out infinite;

}



.hero .button--primary {

    animation: goldPulse 3.2s ease-in-out infinite;

}





/* =========================================================

   NAVIGACE

========================================================= */



.navbar__logo {

    animation: fadeDown 0.8s ease 0.15s both;

}



.navbar__menu {

    animation: fadeDown 0.8s ease 0.25s both;

}



.menu-toggle {

    animation: fadeDown 0.8s ease 0.25s both;

}





/* =========================================================

   REVEAL ANIMACE PŘI SCROLLOVÁNÍ

========================================================= */



.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;

    will-change: opacity, transform;

}



.reveal[data-reveal="fade-down"] {

    transform: translateY(-35px);

}



.reveal[data-reveal="fade-right"] {

    transform: translateX(-45px);

}



.reveal[data-reveal="fade-left"] {

    transform: translateX(45px);

}



.reveal[data-reveal="scale"] {

    transform: scale(0.94);

}



.reveal.is-visible {

    opacity: 1;

    transform: translate(0, 0) scale(1);

}





/* =========================================================

   NADPISY SEKCI

========================================================= */



.section-heading__line {

    position: relative;

    overflow: hidden;

}



.section-heading__line::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255, 255, 255, 0.85),

            transparent

        );

    transform: translateX(-110%);

}



.section-heading.is-visible .section-heading__line::after,

.reveal.is-visible .section-heading__line::after {

    animation: lineShine 1.2s ease 0.4s;

}





/* =========================================================

   O KAPELE

========================================================= */



.about__image-wrapper.is-visible .about__image {

    animation: scaleIn 0.9s ease both;

}



.about__badge {

    animation: floating 4s ease-in-out infinite;

}



.about__image {

    transition:

        transform 0.8s ease,

        filter 0.8s ease;

}



.about__image-wrapper:hover .about__image {

    transform: scale(1.025);

    filter: brightness(1.03);

}





/* =========================================================

   KONCERTNÍ KARTY

========================================================= */



.concert-card {

    transition:

        transform 0.35s ease,

        border-color 0.35s ease,

        background-color 0.35s ease,

        box-shadow 0.35s ease;

}



.concert-card:hover {

    transform: translateY(-6px) scale(1.006);

}



.concert-card__date strong {

    transition:

        transform 0.35s ease,

        text-shadow 0.35s ease;

}



.concert-card:hover .concert-card__date strong {

    transform: scale(1.08);

    text-shadow: 0 0 22px rgba(212, 175, 55, 0.25);

}



.concert-card__title {

    transition: color 0.3s ease;

}



.concert-card:hover .concert-card__title {

    color: var(--color-primary-light);

}





/* =========================================================

   KARTY AKCÍ

========================================================= */



.event-card__icon {

    animation: floating 4.8s ease-in-out infinite;

}



.event-card:nth-child(2) .event-card__icon {

    animation-delay: 0.4s;

}



.event-card:nth-child(3) .event-card__icon {

    animation-delay: 0.8s;

}



.event-card:nth-child(4) .event-card__icon {

    animation-delay: 1.2s;

}



.event-card:nth-child(5) .event-card__icon {

    animation-delay: 1.6s;

}



.event-card {

    transition:

        transform 0.35s ease,

        border-color 0.35s ease,

        box-shadow 0.35s ease,

        background-color 0.35s ease;

}



.event-card:hover {

    background:

        linear-gradient(

            145deg,

            rgba(212, 175, 55, 0.07),

            rgba(255, 255, 255, 0.025)

        ),

        var(--color-surface);

}





/* =========================================================

   GALERIE

========================================================= */



.gallery__item {

    transform: translateZ(0);

}



.gallery__item img {

    backface-visibility: hidden;

}



.gallery__item:hover {

    box-shadow:

        0 18px 45px rgba(0, 0, 0, 0.35),

        0 0 0 1px rgba(212, 175, 55, 0.22);

}



.gallery__icon {

    transition:

        transform 0.35s ease,

        background-color 0.35s ease,

        color 0.35s ease;

}



.gallery__item:hover .gallery__icon {

    color: #000000;

    background: var(--color-primary);

    border-color: var(--color-primary);

    transform: translateY(0) rotate(90deg);

}





/* =========================================================

   REZERVACE

========================================================= */



.reservation {

    transition:

        transform 0.45s ease,

        border-color 0.45s ease,

        box-shadow 0.45s ease;

}



.reservation:hover {

    border-color: rgba(212, 175, 55, 0.28);

    box-shadow:

        0 30px 80px rgba(0, 0, 0, 0.52),

        0 0 55px rgba(212, 175, 55, 0.08);

    transform: translateY(-4px);

}



.contact-item__icon {

    transition:

        transform 0.35s ease,

        background-color 0.35s ease;

}



.contact-item:hover .contact-item__icon {

    background: rgba(212, 175, 55, 0.22);

    transform: scale(1.08) rotate(-5deg);

}





/* =========================================================

   KONTAKT

========================================================= */



.contact__image {

    transition:

        transform 1s ease,

        filter 1s ease;

}



.contact__image-wrapper:hover .contact__image {

    transform: scale(1.045);

    filter: brightness(1.04);

}



.contact__image-content {

    transition: transform 0.5s ease;

}



.contact__image-wrapper:hover .contact__image-content {

    transform: translateY(-6px);

}



.social-link {

    transition:

        color 0.35s ease,

        background-color 0.35s ease,

        border-color 0.35s ease,

        transform 0.35s ease,

        box-shadow 0.35s ease;

}



.social-link:hover {

    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.2);

}





/* =========================================================

   FOOTER

========================================================= */



.footer__logo img {

    transition:

        transform 0.35s ease,

        filter 0.35s ease;

}



.footer__logo:hover img {

    transform: scale(1.06);

    filter: brightness(1.18);

}





/* =========================================================

   LIGHTBOX

========================================================= */



.lightbox.is-active .lightbox__content {

    animation: scaleIn 0.35s ease both;

}



.lightbox__image {

    transition:

        transform 0.35s ease,

        opacity 0.35s ease;

}





/* =========================================================

   TLAČÍTKO NAHORU

========================================================= */



.scroll-top.is-visible {

    animation: fadeUp 0.45s ease both;

}





/* =========================================================

   DELAY PRO KARTY

========================================================= */



.concert-card:nth-child(1),

.event-card:nth-child(1),

.gallery__item:nth-child(1) {

    transition-delay: 0.03s;

}



.concert-card:nth-child(2),

.event-card:nth-child(2),

.gallery__item:nth-child(2) {

    transition-delay: 0.08s;

}



.concert-card:nth-child(3),

.event-card:nth-child(3),

.gallery__item:nth-child(3) {

    transition-delay: 0.13s;

}



.event-card:nth-child(4),

.gallery__item:nth-child(4) {

    transition-delay: 0.18s;

}



.event-card:nth-child(5),

.gallery__item:nth-child(5) {

    transition-delay: 0.23s;

}



.gallery__item:nth-child(6) {

    transition-delay: 0.28s;

}





/* =========================================================

   OMEZENÍ ANIMACÍ PRO MOBILY

========================================================= */



@media (max-width: 700px) {

    .hero__background {

        animation-duration: 20s;

    }



    .about__badge,

    .event-card__icon {

        animation: none;

    }



    .reservation:hover {

        transform: none;

    }



    .concert-card:hover {

        transform: translateY(-3px);

    }

}





/* =========================================================

   UŽIVATEL PREFERUJE MÉNĚ POHYBU

========================================================= */



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation: none !important;

        transition-duration: 0.01ms !important;

        transition-delay: 0ms !important;

    }



    .reveal {

        opacity: 1;

        transform: none;

    }

}