/* ============ RESET & PREMENNÉ ============ */
:root{
    --gold: #d4af37;
    --gold-light: #f3dfa2;
    --white: #ffffff;
    --black: #0a0a0a;
    --dark-bg: #0d0d0d;
    --text-muted: #cfcfcf;
    --radius: 22px;
}

*{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

body.rennox-body{
    background-color: var(--black);
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }

/* ============ PRELOADER (kruhový loader z úvodnej animácie) ============ */
#loader-wrapper{
    position: fixed; inset: 0; z-index: 9999;
    background-color: #000;
    transition: opacity .3s ease-out;
}
.loader-point{ position:absolute; top:50%; width:0; height:0; animation: spin 2.5s linear infinite; }
.point-left{ left:25%; }
.point-right{ right:25%; }
.dot{
    position:absolute; background:#fff; border-radius:50%;
    transform: translate(-50%,-50%) rotate(var(--deg)) translateX(var(--radius));
    transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.d1{ --deg:0deg; --radius:35px; width:10px; height:10px; opacity:1; }
.d2{ --deg:120deg; --radius:45px; width:6px; height:6px; opacity:.6; }
.d3{ --deg:240deg; --radius:25px; width:14px; height:14px; opacity:.8; }
.merging .dot{ --radius:0px !important; }
@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

@media (max-width:768px){
    .point-right{ display:none; }
    .point-left{ left:50%; top:50%; }
}

/* ============ HERO (flash lambo/bentley) ============
   Hero je FIXNÉ pozadie na celej obrazovke, celý obsah stránky
   (header, main, footer) leží NAD ním (position:relative + z-index).
   Vďaka position:fixed hero nezaberá miesto v toku dokumentu,
   takže obsah nezačína "pod" ním, ale rovno na ňom. */
.hero-container{
    position: fixed;
    inset: 0;
    width:100vw; height:100vh; height:100dvh;
    z-index: 0;
    background-color: var(--black);
    /* Statické predvolené pozadie - VŽDY viditeľné hneď od prvého vykreslenia,
       nezávisle od toho, či sa stihli/podarilo načítať fotky áut cez JS.
       Fotky áut sa potom animujú NAD týmto ako vrstvy (.layer). */
    background-image: radial-gradient(ellipse at center, #1a1408 0%, #0a0a0a 70%);
}
.hero-container .layer{
    position:absolute; inset:0;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    background-image: var(--bg-image);
    opacity:0;
}
@media (max-width:768px){
    .hero-container .layer{ background-position: var(--mobile-pos); }
}

/* Plná intro sekvencia (flash -> led -> loop) - iba na domovskej stránke po kliknutí na logo */
.hero-container.loaded:not(.loop-only) .layer-flash{ animation: animFlash 4.5s forwards; z-index:1; }
.hero-container.loaded:not(.loop-only) .layer-led{ animation: animLed 3s ease-in-out 1.5s forwards; z-index:2; }
.hero-container.loaded:not(.loop-only) .layer-normal{ animation: animNormal 2s ease-in-out 4.5s infinite; z-index:3; }

/* Iba loop bez flash - "Služby", Cenník, Galéria, Kontakt.
   Rovnaký loop ako na hlavnej stránke po skončení flash sekvencie:
   led vrstva sa rýchlo zapne a zostáva svietiť, normal vrstva na nej pulzuje. */
.hero-container.loaded.loop-only .layer-led{ animation: animLed .8s ease-in-out forwards; z-index:2; }
.hero-container.loaded.loop-only .layer-normal{ animation: animNormal 2s ease-in-out .8s infinite; z-index:3; }

@keyframes animFlash{ 0%{opacity:0;} 11%{opacity:1;} 33%{opacity:1;} 100%{opacity:0;} }
@keyframes animLed{ 0%{opacity:0;} 100%{opacity:.9;} }
@keyframes animNormal{ 0%{opacity:0;} 50%{opacity:.65;} 100%{opacity:0;} }

/* Tmavý efekt - mäkký prechod zľava doprava.
   Namiesto ostrého rezu používame POHYBLIVÚ MASKU s mäkkým prechodovým pásmom
   (black = viditeľné, transparent = skryté), ktorá sa posúva sprava doľava
   (mask-position) a SÚČASNE narastá celková opacity - takže časť, cez ktorú
   práve prechádza hrana, sa v tú istú chvíľu aj postupne "vyfarbuje" (fade in).
   Nižšia alpha farby (.55) zároveň drží hero svetlejšie a stále kúsok priehľadné. */
.dark-overlay{
    position:fixed; inset:0; z-index:4;
    background: rgba(8,8,8,.55);
    opacity: 0;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 85%, transparent 100%);
    -webkit-mask-size: 240% 100%;
    mask-size: 240% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: opacity 3.2s ease, -webkit-mask-position 3.2s ease, mask-position 3.2s ease;
    pointer-events:none;
}
.dark-overlay.open{
    opacity: 1;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
}

/* ============ HEADER / LOGO / NAVIGÁCIA ============ */
.site-header{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 5%;
    background: rgba(8,8,8,.42);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(212,175,55,.16);
    opacity:0; transform: translateY(-16px);
    pointer-events:none;
    transition: opacity .5s ease, transform .5s ease;
}
.site-header.revealed{ opacity:1; transform:none; pointer-events:auto; }

.site-logo{ display:flex; align-items:center; gap:10px; opacity:0; transform: translateX(-20px); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.site-header.revealed .site-logo{ opacity:1; transform:none; }
.site-logo img{ height:46px; width:auto; display:block; }
.logo-fallback-text{ font-weight:800; letter-spacing:3px; color: var(--gold); font-size:1.2rem; }

/* Elegantné textové položky - bez pozadia a bez rámčeka, jemné podčiarknutie */
.nav-cards{ display:flex; gap:34px; flex-wrap:wrap; align-items:center; }
.nav-card{
    position:relative;
    padding: 4px 0;
    background:none;
    border:none;
    box-shadow:none;
    color: var(--gold-light);
    font-weight:600;
    font-size:.82rem;
    letter-spacing:2px;
    text-transform: uppercase;
    opacity:0; transform: translateY(-10px);
    transition: color .25s ease, transform .25s ease;
}
.nav-card::after{
    content:'';
    position:absolute; left:0; right:0; bottom:-6px; height:1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.nav-card:hover{ color: var(--white); }
.nav-card:hover::after{ transform: scaleX(1); }
.nav-card.active{ color: var(--white); }
.nav-card.active::after{ transform: scaleX(1); }
.site-header.revealed .nav-card{
    animation: navCardIn .5s ease forwards;
    animation-delay: calc(.15s * var(--i) + .3s);
}
@keyframes navCardIn{ to{ opacity:1; transform:none; } }

@media (max-width:640px){
    .site-header{ padding: 14px 5%; }
    .nav-cards{ gap:20px; }
    .nav-card{ font-size:.72rem; letter-spacing:1.5px; }
    .site-logo img{ height:34px; }
    /* Na mobile schovaj položku aktuálnej stránky - netreba odkaz na seba samého */
    .nav-card.active{ display:none; }
}

/* ============ SLUŽBY - HLAVNÝ CONTAINER ============ */
.services-section{
    position: relative; z-index: 10;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px 5% 80px;
    opacity:0;
    transition: opacity .6s ease;
}
.services-section.visible{ opacity:1; }

.services-section h2{
    text-align:center;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom: 46px;
}

.services-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px;
    transition: filter .5s ease, opacity .5s ease;
}
.services-grid.blurred{ filter: blur(10px); opacity:.35; pointer-events:none; }

.service-card{
    position: relative;
    background: rgba(10,10,10,.28);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border: 1px solid rgba(212,175,55,.35);
    border-radius: var(--radius);
    padding: 30px 24px 34px;
    cursor:pointer;
    opacity:0; transform: translateY(24px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.service-card:hover{
    transform: translateY(-6px);
    border-color: var(--gold);
    background: rgba(212,175,55,.14);
}
.services-grid.reveal .service-card {
    /* 1. cardIn trvá 0.7s (zobrazenie karty) */
    /* 2. glassIn trvá 1s (efekt skla) */
    /* Hodnota 'both' pri glassIn zabezpečí, že sklo bude mať hodnotu 0px už počas oneskorenia */
    animation: 
        cardIn .7s ease forwards, 
        glassIn 1s ease both;
    
    /* Na prvú animáciu aplikujeme základný delay, na druhú prirátame 0.5s */
    animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 0.5s);
}

.services-grid.reveal .service-card:nth-child(1) { --delay: .05s; }
.services-grid.reveal .service-card:nth-child(2) { --delay: .15s; }
.services-grid.reveal .service-card:nth-child(3) { --delay: .25s; }
.services-grid.reveal .service-card:nth-child(4) { --delay: .35s; }
.services-grid.reveal .service-card:nth-child(5) { --delay: .45s; }
.services-grid.reveal .service-card:nth-child(6) { --delay: .55s; }
.services-grid.reveal .service-card:nth-child(7) { --delay: .65s; }

/* Samostatná animácia pre postupný mliečny efekt */
@keyframes glassIn {
    from {
        backdrop-filter: blur(0px) saturate(100%);
        -webkit-backdrop-filter: blur(0px) saturate(100%);
    }
    to {
        backdrop-filter: blur(8px) saturate(130%);
        -webkit-backdrop-filter: blur(8px) saturate(130%);
    }
}

/* Animácia pre zjavenie kartičky */
@keyframes cardIn {
    to { 
        opacity: 1; 
        transform: none; 
    }
}

/* Backdrop-filter (efekt matného skla za priehľadnou kartou) narastá
   od 0 po finálnu hodnotu POSTUPNE, spolu s fade-in kartičky - nie naraz.
   Vlastný keyframe (nie zdieľaný "cardIn"), aby sa backdrop-filter
   neuplatnil aj na iné prvky (napr. fotky v galérii). */
@keyframes serviceCardIn{
    from{
        opacity:0; transform:translateY(24px);
        backdrop-filter: blur(0px) saturate(100%);
        -webkit-backdrop-filter: blur(0px) saturate(100%);
    }
    to{
        opacity:1; transform:none;
        backdrop-filter: blur(8px) saturate(130%);
        -webkit-backdrop-filter: blur(8px) saturate(130%);
    }
}
@keyframes cardIn{ to{ opacity:1; transform:none; } }

.service-icon{ width:44px; height:44px; margin-bottom:16px; color: var(--gold); }
.service-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3{ margin:0 0 10px; font-size:1.15rem; color: var(--white); }
.service-card p{ margin:0; color: var(--text-muted); font-size:.92rem; line-height:1.5; }

/* ============ DETAIL SLUŽBY ============ */
.service-detail{
    max-width: 900px; margin: 0 auto;
    opacity:0; transform: scale(.97);
    display:none;
}
.service-detail.visible{ display:block; animation: detailIn .45s ease forwards; }
@keyframes detailIn{ to{ opacity:1; transform:none; } }

.service-detail .back-btn{
    display:inline-flex; align-items:center; gap:8px;
    margin-bottom:24px; padding:8px 18px;
    border-radius: 12px;
    background: rgba(212,175,55,.15); color: var(--gold-light);
    border:1px solid rgba(212,175,55,.4);
    cursor:pointer; font-weight:600;
}
.service-detail h2{
    background:none; -webkit-text-fill-color:unset; color: var(--gold-light);
    text-align:left; margin-bottom:14px;
}
.service-detail .service-text{ white-space:pre-line; color: var(--text-muted); line-height:1.7; margin-bottom:26px; }
.service-detail .service-images{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px;
}
.service-detail .service-images img{
    width:100%; height:200px; object-fit:cover; border-radius:16px;
    border:1px solid rgba(212,175,55,.3);
}

/* ============ FOOTER ============ */
.site-footer{
    position:relative; z-index:10;
    background: #060606;
    border-top: 1px solid rgba(212,175,55,.25);
    padding: 50px 6% 30px;
    opacity:0; transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.site-footer.revealed{ opacity:1; transform:none; }
.footer-grid{ display:grid; grid-template-columns: 1fr 1fr 2fr; gap:32px; max-width:1200px; margin:0 auto; }
.footer-col h3{ color: var(--gold); margin:0 0 12px; font-size:1.05rem; }
.footer-col p{ margin:4px 0; color: var(--text-muted); }
.footer-social{ display:flex; gap:12px; margin-top:14px; }
.footer-social a{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px;
    border-radius:50%;
    border:1px solid rgba(212,175,55,.5);
    color: var(--gold-light);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.footer-social a:hover{ background: rgba(212,175,55,.15); border-color: var(--gold); color:#fff; }
.footer-social svg{ width:26px; height:26px; fill:currentColor; }
.footer-map iframe{ width:100%; height:200px; border:0; border-radius:14px; filter: grayscale(.2); }

.footer-bottom{
    max-width:1200px; margin: 34px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(212,175,55,.15);
    text-align:center;
}
.footer-bottom p{ margin:0; color: rgba(207,207,207,.6); font-size:.8rem; letter-spacing:.5px; }

@media (max-width:820px){
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    .footer-map{ grid-column: 1 / -1; }
}
@media (max-width:560px){
    .footer-grid{ grid-template-columns: 1fr; }
}

/* ============ SUBSTRÁNKY - všeobecný wrapper (max 1200px, vycentrované) ============ */
.page-wrap{
    position:relative; z-index:10;
    min-height:100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px 5% 60px;
}
.page-wrap h1{
    font-size: clamp(2rem, 4vw, 2.8rem);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom: 10px;
}
.page-lead{ color: var(--text-muted); margin-bottom: 40px; max-width:640px; }

/* Vycentrovaný obsah stránky (napr. Kontakt) - nadpis, text aj formulár v strede */
.page-wrap-center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.page-wrap-center .page-lead{ margin-left:auto; margin-right:auto; }
.page-wrap-center .form-alert{ width:100%; max-width:560px; }

/* ============ CENNÍK ============ */
.price-table-wrap{ width:100%; overflow-x:auto; margin-bottom:40px; -webkit-overflow-scrolling:touch; }
.price-table{ width:100%; min-width:480px; border-collapse:collapse; margin-bottom:0; background: rgba(10,10,10,.3); backdrop-filter: blur(6px); border-radius:16px; overflow:hidden; }
.price-table caption{ text-align:left; font-size:1.3rem; color:var(--gold); padding:14px 0; font-weight:700; }
.price-table th, .price-table td{ padding:12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:left; }
.price-table th{ color: var(--gold-light); font-weight:600; background: rgba(212,175,55,.08); }
.price-table td{ color: var(--text-muted); }
.price-note{ color: var(--gold-light); font-style:italic; margin: 24px 0; }

/* ============ GALÉRIA ============ */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.gallery-item{
    border-radius:16px; overflow:hidden; cursor:pointer;
    opacity:0; transform: translateY(20px) scale(.95);
    animation: cardIn .5s ease forwards;
    border:1px solid rgba(212,175,55,.25);
}
.gallery-item img{ width:100%; height:220px; object-fit:cover; display:block; transition: transform .4s ease; }
.gallery-item:hover img{ transform: scale(1.08); }

.lightbox{
    position:fixed; inset:0; background: rgba(0,0,0,.92); z-index: 200;
    display:none; align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:10px; box-shadow:0 0 60px rgba(212,175,55,.25); }
.lightbox .lb-close{
    position:absolute; top:24px; right:32px;
    width:44px; height:44px; border-radius:50%;
    background: rgba(212,175,55,.15); border:1px solid var(--gold);
    color: var(--gold-light); font-size:1.4rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}

/* ============ KONTAKT FORMULÁR ============ */
.contact-form{ max-width: 560px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:16px; text-align:left; }
.contact-form label{ font-size:.85rem; color: var(--gold-light); margin-bottom:4px; display:block; }
.contact-form input, .contact-form textarea{
    width:100%; padding:12px 14px; border-radius:10px;
    background: rgba(255,255,255,.05); border:1px solid rgba(212,175,55,.3);
    color:#fff; font-family:inherit; font-size:1rem;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form button{
    align-self:flex-start;
    padding:12px 30px; border-radius:12px; border:none;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color:#141414; font-weight:700; cursor:pointer;
    box-shadow: 0 6px 18px rgba(212,175,55,.35);
}
.form-alert{ padding:12px 16px; border-radius:10px; margin-bottom:20px; font-weight:600; }
.form-alert.success{ background: rgba(70,180,90,.15); border:1px solid #4CAF50; color:#a7e8b3; }
.form-alert.error{ background: rgba(200,60,60,.15); border:1px solid #d24545; color:#f3aaaa; }