/* =============================================================================
   RANDOM TATTOO — vlastní CSS nad Tailwind CDN
   -----------------------------------------------------------------------------
   Klíčové pravidlo: výchozí stavy animací platí JEN pod html.motion-ok.
   Tu třídu přidává app.js a jen tehdy, když uživatel nemá zapnuté
   prefers-reduced-motion. Když JS spadne nebo je vypnutý, je celý obsah
   normálně vidět — žádné neviditelné sekce.
   ========================================================================== */

/* ---------- Základ ---------- */

/*
 * clip, ne hidden: overflow-x: hidden udělá z body scroll kontejner
 * a rozbije position: sticky u levého sloupce v sekci Proces.
 */
body {
    overflow-x: clip;
}

:focus-visible {
    outline: 2px solid #ff2e88;
    outline-offset: 3px;
}

::selection {
    background: #ff2e88;
    color: #09090b;
}

/* Mikropopisek — opakuje se po celém webu */
.label {
    font-size: 0.6875rem;
    line-height: 1.1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
}

.rule {
    height: 1px;
    background: currentColor;
    opacity: 0.18;
}

/* =============================================================================
   1) SCROLL-SNAP + VÝŠKA PANELŮ
   -----------------------------------------------------------------------------
   Snap je zapnutý na VŠECH šířkách včetně mobilu (hero, kroky 01–04,
   finální CTA). proximity, ne mandatory — mandatory na sekci vyšší než
   viewport uživatele uvězní.
   ========================================================================== */

html.motion-ok {
    scroll-snap-type: y proximity;
}

html.motion-ok .snap-panel {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }
}

/*
 * Výška fullscreen panelů.
 *
 * Záměrně svh (small viewport height), NE dvh ani JS --vh:
 * svh je výška při VIDITELNÉ adresní liště a během scrollování se nemění.
 * dvh i dopočítávané --vh se při skrytí/zobrazení lišty mění, což spustí
 * reflow a ScrollTrigger.refresh() → přesně ten skákající pin, kterému se
 * chceme vyhnout.
 *
 * První deklarace je fallback pro prohlížeče bez svh (Safari < 15.4):
 * ty ji použijí a novější ji přebijí.
 */
.panel-h {
    min-height: 100vh;
    min-height: 100svh;
}

.panel-h-exact {
    height: 100vh;
    height: 100svh;
}

/* =============================================================================
   2) VÝCHOZÍ STAVY PRO GSAP REVEALY
   ========================================================================== */

html.motion-ok .reveal {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
}

html.motion-ok .reveal-left {
    opacity: 0;
    transform: translate3d(-60px, 0, 0);
}

html.motion-ok .reveal-right {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
}

html.motion-ok .reveal-scale {
    opacity: 0;
    transform: scale(0.96);
}

/* Prvky, které GSAP jen posouvá (parallax) — ať neproblikne skok */
html.motion-ok .parallax {
    will-change: transform;
}

/* =============================================================================
   4) TLAČÍTKA — hover scale + glow v akcentu
   ========================================================================== */

/*
 * .btn ZÁMĚRNĚ neurčuje display ani layout — ten patří utilitám v markupu
 * (inline-flex items-center justify-center gap-3). Kdyby tu display byl,
 * přebil by utilitu .hidden, protože tailwind.css se načítá PŘED site.css.
 */
.btn {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: scale(1.03);
    box-shadow:
        0 0 0 1px rgba(255, 46, 136, 0.45),
        0 10px 34px -8px rgba(255, 46, 136, 0.6);
}

.btn:active {
    transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .btn:focus-visible {
        transform: none;
    }
}

/* =============================================================================
   5) VÝBĚR TATÉRA — crossfade fotek
   -----------------------------------------------------------------------------
   Fotky leží na sobě, přepíná se jen opacity → prolnutí, ne střih.
   ========================================================================== */

.artist-photo {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.artist-photo.is-active {
    opacity: 1;
}

.artist-name {
    transition:
        color 0.28s ease,
        opacity 0.28s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================================
   6) FAQ — plynulé rozbalení bez počítání výšky
   ========================================================================== */

/* Bez JS jsou všechny odpovědi rovnou vidět — teprve has-js je zavře. */
.acc-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html.has-js .acc-panel {
    grid-template-rows: 0fr;
}

html.has-js .acc-panel.is-open {
    grid-template-rows: 1fr;
}

.acc-panel > .acc-inner {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .acc-panel {
        transition: none;
    }
}

/* =============================================================================
   7) WORDMARK V PATIČCE — draw-on efekt
   -----------------------------------------------------------------------------
   Stroke se „píše“ přes stroke-dashoffset, výplň se pak jemně prolne.
   Bez motion-ok je rovnou vidět hotový nápis.
   ========================================================================== */

.wordmark-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}

html.motion-ok .wordmark-stroke {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}

html.motion-ok .wordmark-fill {
    opacity: 0;
}

/* =============================================================================
   8) Drobnosti
   ========================================================================== */

/* Jemné zrno, ať tmavé plochy nepůsobí ploše */
.grain::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 60;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Alpine: schovej prvky, než se knihovna načte */
[x-cloak] {
    display: none !important;
}