/* ==========================================================================
   intro.css - animácia z /intro/ vložená priamo do stránky.

   Prehrávač vkladá includes/intro-embed.php. Beží dokola a bez zvuku
   (prehliadače autoplay so zvukom blokujú). Ovládanie stojí vedľa obrazu,
   na mobile (kde vedľa miesto nie je) v jeho dolnom rohu.
   Iframe sa načíta až vtedy, keď je sekcia naozaj vidieť.
   ========================================================================== */

.intro-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    border-radius: 14px;
    overflow: hidden;
}

.intro-embed-frame { position: absolute; inset: 0; }
.intro-embed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Kým sa animácia nenačíta, nech plocha nie je prázdna diera */
.intro-embed::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 70%);
    transition: opacity .6s;
}
.intro-embed.is-live::after { opacity: 0; }

/* --- Obraz a vedľa neho ovládanie ---
   Rovnako široký stĺpec je aj vľavo, aby obraz zostal presne v strede. */
.intro-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    align-items: center;
}
.intro-row .intro-embed { grid-column: 2; }

.intro-embed-controls {
    grid-column: 3;
    justify-self: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.intro-ctl {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: transparent;
    color: #ffffffb3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .25s, color .25s, background-color .25s, transform .2s;
}
.intro-ctl:hover { border-color: #F06A28; color: #F06A28; background: rgba(240, 106, 40, .08); transform: translateY(-1px); }
.intro-ctl svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Prepínanie ikon podľa stavu - stav drží trieda, nie JavaScript v HTML */
.intro-ctl .ico-play,
.intro-ctl.is-paused .ico-pause { display: none; }
.intro-ctl.is-paused .ico-play { display: block; }

.intro-ctl .ico-sound-on,
.intro-ctl.is-muted .ico-sound-off { display: block; }
.intro-ctl .ico-sound-off,
.intro-ctl.is-muted .ico-sound-on { display: none; }

.intro-ctl .ico-exit,
.intro-ctl.is-full .ico-full { display: none; }
.intro-ctl.is-full .ico-exit { display: block; }

/* --- Šípka "dá sa skrolovať" --- */
.intro-under { display: flex; justify-content: center; margin: 10px 0 26px; }

.intro-scroll {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff80;
    cursor: pointer;
    transition: color .25s;
    animation: intro-bounce 2.2s ease-in-out infinite;
}
.intro-scroll:hover { color: #F06A28; }
.intro-scroll svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
@keyframes intro-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .intro-scroll { animation: none; } }

/* --- Veľký prehrávač na celú šírku (sekcia "o mne" v hamburger menu) ---
   Výška je obmedzená na 76 % okna, aby bolo pod ním vidieť, že sa dá skrolovať.
   Šírka sa dopočíta z výšky, takže pomer 16:9 zostáva a nevzniknú čierne pásy. */
.intro-stage.is-hero { padding: 0 24px 4px; }
.intro-stage.is-hero .intro-embed {
    width: min(100%, calc(76vh * 16 / 9));
    max-height: 76vh;
    margin-left: auto;
    margin-right: auto;
}

/* Na podstránkach "o mne" stojí prehrávač ako samostatná sekcia pod hlavičkou */
.intro-block { padding-top: 70px; padding-bottom: 30px; }

/* Na úzkych obrazovkách a na telefóne naležato (nízke okno) niet vedľa
   obrazu miesto, tak ovládanie ide pod video - rovnako ako šípka.
   Drží sa pritom šírky videa, nie celej sekcie. */
@media (max-width: 899px), (max-height: 599px) {
    .intro-row { display: block; }
    .intro-embed-controls {
        flex-direction: row;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 10px;
    }
    .intro-stage.is-hero .intro-embed-controls {
        width: min(100%, calc(76vh * 16 / 9));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .intro-embed { border-radius: 10px; }
    .intro-stage.is-hero { padding: 0 12px; }
    .intro-ctl { width: 36px; height: 36px; }
    .intro-ctl svg { width: 14px; height: 14px; }
    .intro-under { margin: 6px 0 16px; }
}

/* --- Zvislý strih animácie na telefóne na výšku ---
   Triedu is-portrait nasadí includes/intro-embed.php, keď vyberie zvislú
   verziu. Výška je zámerne len 62 % okna: prehrávač začína pod hlavičkou
   s hamburgerom a pod ním musí ostať vidieť, že sekcia pokračuje ďalej.
   Šírka sa dopočíta z výšky, aby pomer 9:16 sedel presne. */
.intro-row.is-portrait .intro-embed {
    aspect-ratio: 9 / 16;
    width: auto;
    max-width: 100%;
    max-height: 62vh;
    height: 62vh;
    margin-left: auto;
    margin-right: auto;
}
.intro-stage.is-hero .intro-row.is-portrait .intro-embed-controls,
.intro-row.is-portrait .intro-embed-controls {
    width: min(100%, calc(62vh * 9 / 16));
    margin-left: auto;
    margin-right: auto;
}

/* --- Celá obrazovka ---
   Na celú obrazovku ide celý riadok, takže ovládanie zostáva v obraze.
   Stav drží trieda is-fs (nie :fullscreen) - starší Safari pozná len
   predponovanú podobu a jedna neznáma časť selektora zahodí celé pravidlo.
   Vrstva .intro-fs-catch chytá myš a kliknutia, ktoré by inak zhltol iframe. */
.intro-fs-catch { display: none; }

.intro-row.is-fs { display: block; position: relative; width: 100%; height: 100%; background: #000; }
.intro-row.is-fs .intro-embed {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
}
.intro-row.is-fs .intro-fs-catch { display: block; position: absolute; inset: 0; z-index: 1; }

.intro-row.is-fs .intro-embed-controls {
    position: absolute;
    right: 26px;
    bottom: 26px;
    z-index: 2;
    flex-direction: row;
    gap: 12px;
    width: auto;
    margin: 0;
    transition: opacity .4s;
}
.intro-row.is-fs .intro-ctl {
    width: 46px;
    height: 46px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.intro-row.is-fs .intro-ctl svg { width: 17px; height: 17px; }

/* Po chvíli bez pohybu myšou zmizne ovládanie aj kurzor */
.intro-row.is-fs.is-idle .intro-embed-controls { opacity: 0; }
.intro-row.is-fs.is-idle .intro-fs-catch { cursor: none; }