/* BASE: reset, переменные, контейнер, общая кнопка */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #222;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease;
}

a:not(.gallery-photo):not(.ki-video-gallery__cover):not(.ki-video-gallery__thumb):not(.button):not(.tour-button):not(.gallery-arrow):not(.review-arrow):not(.ticket-link):hover {
    opacity: .82;
    color: var(--hero-gold);

}

button:not(.ki-video-gallery__dot):not(.gallery-mobile-dot),
[role="button"]:not(.ki-video-gallery__dot):not(.gallery-mobile-dot) {
    transition: transform .18s ease, opacity .18s ease, filter .2s ease, background .2s ease, background-color .2s ease;
}

button:not(:disabled):not(.ki-video-gallery__dot):not(.gallery-mobile-dot):hover,
[role="button"]:hover {
    transform: translateY(-1px);
}

button:not(:disabled):active,
[role="button"]:active {
    transform: translateY(0) scale(.985);
}

img,
video {
    display: block;
    max-width: 100%;
}

.container {
    /*width: min(1200px, calc(100% - 40px));*/
    margin-inline: auto;
}

:root {
    --hero-background: oklch(.125 .015 260);
    --hero-text: oklch(.91 .018 245);
    --hero-white: oklch(.99 0 0);
    --hero-gold: oklch(.81 .11 91);
    --hero-link: oklch(.78 .15 91);
    --ticket-start: oklch(.40 .15 27);
    --ticket-end: oklch(.20 .055 15);
    --banner-start: oklch(.30 .09 20);
    --banner-center: oklch(.42 .15 25);
    --hero-display-font: "Anton", Impact, "Arial Narrow", sans-serif;
    --hero-condensed-font: "Oswald", "Arial Narrow", sans-serif;
    --hero-body-font: "Syne", sans-serif;
    --headings-font-size: clamp(54px, 6.5vw, 76px);
}

/* BUTTON (общая, используется в header, hero и program) */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 43px;
    margin-top: 20px;
    padding: 20px 30px;
    color: var(--hero-white);
    background: linear-gradient(110deg, var(--ticket-start), var(--ticket-end));
    border: 0;
    border-radius: 3px;
    font-family: var(--hero-body-font);

    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    font-family: "Syne", sans-serif;
    font-optical-sizing: auto;

    font-style: normal;
    font-size: 25px;
    color: #fff;
}

.button:hover { filter: brightness(1.2); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .24); }
.button:active { transform: translateY(0) scale(.985); }
.button span { font-family: Arial, sans-serif; font-size: 20px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    a, button, [role="button"], .button { transition: none !important; }
    button:hover, button:active, [role="button"]:hover, [role="button"]:active,
    .button:hover, .button:active { transform: none; }
}

.motion-reveal-ready [data-motion-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

.motion-reveal-ready [data-motion-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .motion-reveal-ready [data-motion-reveal],
    .motion-reveal-ready [data-motion-reveal].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}