/* css/gate.css
 *
 * 🚪 PORTRÉTOVÁ VSTUPNÁ BRÁNA (sekcia zadania "Portrétová vstupná brána
 * pre mobil/tablet - 'SPUSTIŤ KONFIGURÁTOR' + oznámenia o otočení") -
 * appka nesmie byť aktívna na mobile/tablete v portréte, kým používateľ
 * explicitne neklikne na vstupný button. Stavový automat (js/gate.js)
 * rozhoduje, ktorá z týchto vrstiev je viditeľná:
 *
 *   'gate'              → #gate-overlay (tento súbor)
 *   'awaiting-rotation' → #rotate-warning-overlay (css/responsive.css),
 *                          bez tlačidla Ukončiť
 *   'paused-portrait'   → #rotate-warning-overlay, S tlačidlom Ukončiť
 *   'active'            → #app (žiadny overlay)
 */

/* Statický, jemne rozmazaný náhľad DEFAULTNÉHO stavu appky (zadanie, bod
   1) - REÁLNY screenshot (assets/images/gate-preview.jpg), NIE živá appka
   (appka v tomto stave nespúšťa žiadnu logiku - js/main.js inicializácia
   sa odkladá, kým sa cez tento gate neprejde, js/gate.js). */
#gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 500000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;
}

/* Tlačidlo + bar priebehu (js/nacitanie-progress.js) - stĺpec šírky tlačidla.
   Poloha tlačidla ostáva nezmenená (top 40 px, centrované). */
.gate-start-group {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#gate-overlay.gate-hidden {
    display: none;
}

/* Brána viditeľná už počas gateStav 'init' (čakanie na dáta bytov) - LEN na
   mobile/tablete. Triedu gate-touch-init dá na <html> inline skript v <head>
   (index.html) podľa (hover:none) and (pointer:coarse), čo je presne podmienka
   jeDotykoveZariadenie() (js/gate.js); PC bez dotyku triedu nedostane a
   správanie je nezmenené. Triedu odoberie prejdiNaStavGate pri odchode z
   'init' (po aplikujVizualnyStavGate), potom už stav riadi inline štýl ako
   predtým. Neinicializovaný obal #app je počas 'init' skrytý, rovnako ako
   v stave 'gate'. */
html.gate-touch-init #gate-overlay.gate-hidden {
    display: flex;
}

html.gate-touch-init #app {
    display: none;
}

/* Brána po návrate zo skrytia (js/gate.js, dôvod 'navrat-zo-skrytia'): VR vrstva z detailu na dotyku
   (#media-viewer-vr-layer, js/detail.js) je v <body> mimo #app, takže by pod bránou ďalej vykresľovala
   WebGL. visibility:hidden (NIE display:none) vrstvu len skryje a zastaví vykresľovanie; iframe sa nepresúva
   ani nenačíta znova. Triedu gate-navrat odoberie prejdiNaStavGate pri každom odchode z 'gate'. */
html.gate-navrat #media-viewer-vr-layer {
    visibility: hidden;
}

/* Presahuje cez okraj (inset zápornný) - blur() na okrajoch elementu
   inak necháva viditeľný ostrý/nerozmazaný lem. */
.gate-overlay-bg {
    position: absolute;
    inset: -24px;
    /* Obrázok aj sila rozmazania z configu (PROJECT_CONFIG.layout,
       zapisuje js/config-apply.js). Fallback za "," platí, ak by config
       chýbal - cesta je relatívna k dokumentu, nie k tomuto .css súboru. */
    background-image: var(--gate-preview-image, url('../assets/images/gate-preview.jpg'));
    background-size: cover;
    background-position: center;
    /* "Jemné" rozmazanie (zadanie "Zníženie sily blur efektu na úvodnom
       náhľade appky o 50%") - PÔVODNÝCH 7px bolo príliš silných (iba
       hrubé farebné plochy, žiadny detail) - znížené na polovicu (3.5px),
       aby ostali rozoznateľné kontúry okien/balkónov/zelene, text/čísla
       ostávajú nečitateľné. */
    filter: blur(var(--gate-blur, 3.5px));
}

/* Tmavý tón navyše nad rozmazaným obrázkom - zaručuje dostatočný kontrast
   pre button hore, nezávisle od toho, aké svetlé/tmavé miesto screenshotu
   je zrovna pod ním. */
.gate-overlay-tint {
    position: absolute;
    inset: 0;
    background: rgb(var(--surface-void-rgb) / 0.35);
}

/* "SPUSTIŤ KONFIGURÁTOR" - rovnaký Secondary štýl ako existujúce "ČO JE
   NABLÍZKU?" (#okolie-trigger, css/layout.css), zadanie bod 1 (presné
   farby). */
.gate-start-btn {
    position: relative;
    z-index: 1;
    padding: 14px 28px;
    background: var(--btn-secondary-bg);
    border: 1px solid rgb(var(--hairline-rgb) / 0.1);
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit
       6743e54). */
    border-radius: 12px;
    color: var(--btn-secondary-text);
    font-family: inherit;
    /* PEVNÝ px, NIE rem (sekcia zadania "Text gate oznámenia... je
       extrémne veľký, presahuje obrazovku") - #gate-overlay žije ZÁMERNE
       MIMO #app-scale-wrapper (vlastný, samostatne navrhnutý font-size pre
       tento kontext, js/scale.js komentár), ale rem je VŽDY relatívny
       voči koreňovému <html> font-size, nie voči najbližšiemu predkovi -
       preto by ho aj tak zachytil --ui-scale-kompenzacia (K, css/base.css),
       hoci pre gate/rotate-warning nebol nikdy zamýšľaný. V portréte je K
       obzvlášť vysoký (kontajner je v host-demo.html zámerne 16:9-tvarovaný
       aj v portréte - scale sa tak počíta z veľmi nízkeho efektívneho
       rozmeru), čo spôsobilo extrémne nadmerený text. px jednotky sú
       nezávislé od html font-size, teda od K úplne imúnne. */
    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.gate-start-btn:hover,
.gate-start-btn:focus-visible {
    background: var(--btn-secondary-bg-hover);
    border-color: rgb(var(--hairline-rgb) / 0.16);
    color: var(--btn-secondary-text-hover);
}

.gate-start-btn:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: rgb(var(--accent-strong-rgb));
}

/* Neaktívne tlačidlo, kým sa konfigurátor pripravuje (js/nacitanie-progress-uvod.js,
   aria-disabled + trieda stlmené po barDelayMs). Mení sa iba vzhľad (opacity, odtieň) - rozmery a poloha sú
   rovnaké; hover/active nesvietia. Po aktivácii sa atribút vráti na "false". */
.gate-start-btn[aria-disabled="true"].gate-start-btn-stlmene,
.gate-start-btn[aria-disabled="true"].gate-start-btn-stlmene:hover,
.gate-start-btn[aria-disabled="true"].gate-start-btn-stlmene:focus-visible,
.gate-start-btn[aria-disabled="true"].gate-start-btn-stlmene:active {
    opacity: 0.45;
    filter: grayscale(0.5);
    cursor: not-allowed;
    background: var(--btn-secondary-bg);
    border-color: rgb(var(--hairline-rgb) / 0.1);
    color: var(--btn-secondary-text);
}

/* "UKONČIŤ KONFIGURÁTOR" (Oznámenie 2, zadanie bod 4) - vnútri existujúceho
   #rotate-warning-overlay (css/responsive.css) - rovnaký Secondary štýl
   ako .gate-start-btn vyššie, konzistencia naprieč OBOMA tlačidlami tejto
   brány. */
.rotate-warning-exit-btn {
    margin-top: 18px;
    padding: 12px 24px;
    background: var(--btn-secondary-bg);
    border: 1px solid rgb(var(--hairline-rgb) / 0.1);
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit
       6743e54). */
    border-radius: 12px;
    color: var(--btn-secondary-text);
    font-family: inherit;
    /* PEVNÝ px, NIE rem - rovnaký dôvod ako .gate-start-btn vyššie (sekcia
       zadania "Text gate oznámenia... je extrémne veľký"). */
    font-size: 12.8px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.rotate-warning-exit-btn:hover,
.rotate-warning-exit-btn:focus-visible {
    background: var(--btn-secondary-bg-hover);
    border-color: rgb(var(--hairline-rgb) / 0.16);
    color: var(--btn-secondary-text-hover);
}

.rotate-warning-exit-btn:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: rgb(var(--accent-strong-rgb));
}

.rotate-warning-exit-btn.rotate-warning-exit-hidden {
    display: none;
}