/**
 * MotoForma Motion
 * Reveal systém, scroll progress, ticker, sticky CTA.
 *
 * Vše je progresivní vylepšení: bez JS (chybí .js na <html>) zůstává
 * obsah plně viditelný. Uživatelé s prefers-reduced-motion dostanou
 * statickou verzi.
 * ============================================
 */

/* ============================================
   REVEAL — vstupní animace při scrollu
   ============================================ */

.js [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.75s var(--ease-out),
        transform 0.75s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Varianty */
.js [data-reveal='up'],
.js [data-reveal='']            { transform: translateY(26px); }
.js [data-reveal='fade']        { transform: none; }
.js [data-reveal='left']        { transform: translateX(-32px); }
.js [data-reveal='right']       { transform: translateX(32px); }
.js [data-reveal='scale']       { transform: scale(0.94); }

/* Nadpis se odkryva zpod hrany.
   POZOR: clip-path na sledovanem prvku vynuluje jeho prunik, takze by ho
   IntersectionObserver nikdy neuvidel a zustal by navzdy skryty. Proto se
   orezava rodic pres overflow a posouva se az vnitrni radek. */
.js [data-reveal='mask'] {
    opacity: 1;
    overflow: hidden;
    /* aby overflow neusekl diakritiku a dolni dotahy */
    padding-block: 0.14em;
    margin-block: -0.14em;
}

.js [data-reveal='mask'] .reveal-line {
    display: block;
    transform: translateY(110%);
    transition: transform 0.85s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal='mask'].is-revealed .reveal-line {
    transform: none;
}

/* Svislá linka, která "vyroste" */
.js [data-reveal='grow'] {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left;
}

.js [data-reveal='grow'].is-revealed {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-reveal] .reveal-line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================
   SCROLL PROGRESS — tenká linka pod hlavičkou
   ============================================ */

.scroll-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    background: linear-gradient(90deg, var(--brand), var(--brand-bright));
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   TICKER — běžící pás s klíčovými sděleními
   ============================================ */

.ticker {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 0.7rem 0;
    background: var(--brand);
    color: #fff;
}

.ticker__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    white-space: nowrap;
    animation: tickerScroll 42s linear infinite;
}

.ticker:hover .ticker__track {
    animation-play-state: paused;
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-display);
    font-size: var(--step--2);
    font-weight: var(--font-bold);
    font-stretch: 104%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ticker__item::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

/* ============================================
   STICKY CTA — hlavní akce vždy po ruce na mobilu
   ============================================ */

.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: none;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(8, 9, 10, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hairline);
    transform: translateY(110%);
    transition: transform var(--t);
}

.sticky-cta.is-visible {
    transform: none;
}

.sticky-cta .sticky-cta__voucher,
.sticky-cta--voucher .sticky-cta__book,
.sticky-cta--call-only .sticky-cta__book,
.sticky-cta--call-only .sticky-cta__voucher {
    display: none;
}

.sticky-cta--voucher .sticky-cta__voucher {
    display: inline-flex;
}

/* Jen telefon: malé kulaté tlačítko vpravo místo celé lišty */
.sticky-cta--call-only {
    left: auto;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)) 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 0;
}

.sticky-cta--call-only .sticky-cta__call {
    width: 3.5rem;
    min-height: 3.5rem;
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.sticky-cta .btn {
    flex: 1;
    min-height: 3rem;
    padding-inline: 0.75rem;
    font-size: var(--step--1);
}

/* .sticky-cta .btn má vyšší specificitu, bez ní se tlačítko roztáhne na půl lišty */
.sticky-cta .sticky-cta__call {
    flex: 0 0 auto;
    width: 3.25rem;
    padding: 0;
}

@media (max-width: 767px) {
    .sticky-cta {
        display: flex;
    }

    /* aby lišta nepřekrývala konec stránky */
    .site-footer {
        padding-bottom: 4.5rem;
    }

    /* Na mobilu je dole lišta s rezervací, plovoucí šipka by jen
       překrývala konce řádků textu */
    #to-top {
        display: none !important;
    }
}

/* ============================================
   HERO PARALLAX
   ============================================ */

.hero-banner::before {
    will-change: transform;
}

.js .hero-banner__body > * {
    opacity: 0;
    transform: translateY(22px);
    animation: heroIn 0.9s var(--ease-out) forwards;
}

.js .hero-banner__body > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero-banner__body > *:nth-child(2) { animation-delay: 0.15s; }
.js .hero-banner__body > *:nth-child(3) { animation-delay: 0.28s; }
.js .hero-banner__body > *:nth-child(4) { animation-delay: 0.4s; }

.js .hero-banner__meta {
    opacity: 0;
    animation: heroIn 0.9s var(--ease-out) 0.5s forwards;
}

/* Odznak najede zvětšením, jako když se rozsvítí přístrojovka */
.js .hero-badge {
    opacity: 0;
    transform: scale(0.92);
    animation: heroIn 1s var(--ease-out) 0.3s forwards;
}

@keyframes heroIn {
    to { opacity: 1; transform: none; }
}

/* Tagline si řídí vlastní animaci přes spa.js */
.js .hero-banner__body > .hero-banner__tagline {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .hero-badge {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .js .hero-banner__body > *,
    .js .hero-banner__meta {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ============================================
   HOVER — jemná odezva na ukazatel
   ============================================ */

@media (hover: hover) and (pointer: fine) {
    .btn--primary,
    .btn--ink {
        transition:
            background-color var(--t), border-color var(--t), color var(--t),
            box-shadow var(--t), transform 0.18s var(--ease);
    }
}