/* =============================================
   SHARED.CSS – společné styly pro všechny modely
   ============================================= */

:root {
    --gold: #C9A84C;
    --navbar-mobile-h: 60px;
}

body, html {
    margin: 0;
    padding: 0;
    background: #000;
    color: white;
    font-family: 'Cinzel Decorative', serif;
    cursor: none;
    overflow: hidden;
    height: 100%;
    touch-action: none;
    overflow-x: hidden;
}

@font-face {
    font-family: 'Cinzel Decorative';
    src: url(../fonts/CinzelDecorative-Regular.ttf) format('truetype');
}

/* Záře na pozadí */
.background-glow {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at center, #604621 0%, #3b2b18 40%, #000000 100%);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

/* =============================================
   NAVBAR – levý svislý pruh (desktop)
   ============================================= */
.navbar {
    z-index: 1000 !important;
    position: fixed !important;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url('../images/navbar-novy.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    width: 200px;
    height: 40rem;
    padding: 40px 0;
    opacity: 0;
    gap: 1.5rem;
}

.navbar-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: auto;
}

.navbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.navbar a:hover { transform: scale(1.2); }

.navbar a:hover svg path {
    stroke: #C9A84C;
    filter: drop-shadow(0 0 5px rgba(201, 168, 76, 0.6));
}

/* =============================================
   INTRO TEXT
   ============================================= */
#intro-text {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    opacity: 0;
    color: white;
    text-align: center;
    letter-spacing: 12px;
    z-index: 10;
    text-shadow: 0 0 30px rgba(255,255,255,0.8), 0 0 60px rgba(255,255,255,0.4);
    pointer-events: none;
    width: 90%;
    box-sizing: border-box;
}

/* =============================================
   PLATNO / 3D KONTEJNERY
   ============================================= */
#scene {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none !important;
    opacity: 0;
}

#final-model-container {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    opacity: 0;
    z-index: 15;
    pointer-events: none;
    border-radius: 20px;
}

#final-model-container.active {
    opacity: 1;
    pointer-events: auto;
    cursor: grab !important;
}

#final-model-container.active canvas { cursor: grab; }

#final-model-container canvas {
    width: 100%; height: 100%;
    border-radius: 20px;
}

#final-bg-image {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 80%;
    max-width: 600px;
    height: auto;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    display: block;
}

/* =============================================
   POPISKY SCEN
   ============================================= */
.label {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    letter-spacing: 8px;
    z-index: 20;
    width: 100%;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}

#labels, .label { pointer-events: none; }

/* Delsi popis – jen na desktopu */
.label-desc {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    letter-spacing: 3px;
    z-index: 20;
    width: 90%;
    font-weight: 300;
    color: #e0a442;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
    line-height: 1.4;
    max-width: 600px;
}

/* =============================================
   SCROLL HINT
   ============================================= */
.scroll-hint {
    position: fixed;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    margin-top: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    flex-direction: column;
    z-index: 20;
    color: #aaa;
}

.scroll-hint svg {
    opacity: 1;
    animation: bounce 2s infinite;
}

#hint {
    opacity: 0;
    pointer-events: none;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(4px); }
}

/* =============================================
   POPISKY U DEKORACNICH MECU
   ============================================= */
.sword-text-box {
    position: absolute;
    color: #ffffff;
    font-family: 'Cinzel Decorative', serif;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    z-index: 0;
    pointer-events: none;
    max-width: 300px;
}

.sword-text-box h2 {
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    font-weight: 400;
    opacity: 0;
}

.bottom-left { bottom: 13%; left: 20%; }
.top-right   { top: 14%;  right: 20%; }

/* =============================================
   VLASTNI KURZOR
   ============================================= */
.custom-cursor {
    width: 40px; height: 40px;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-5px, -5px) rotate(90deg);
    transform-origin: 15% 95%;
    transition: transform 0.1s ease-out;
    left: -100px; top: -100px;
}

/* =============================================
   CAROUSEL
   ============================================= */
#carousel-container {
    position: fixed;
    bottom: -100vh; left: 0;
    width: 100%; height: 100vh;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 30%);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#carousel-container.active { pointer-events: auto; }

.carousel-section {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.carousel-section h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold);
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 4px;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 20px rgba(201,168,76,0.4);
    flex-shrink: 0;
}

.carousel-section button { cursor: none; }

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 320px;
    max-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-wrapper::before,
.carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 17%; height: 100%;
    z-index: 4;
    pointer-events: none;
}
.carousel-wrapper::before { left: 0; }
.carousel-wrapper::after  { right: 0; }

.static-border-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5;
    pointer-events: none;
}

.carousel-inner {
    width: 100%; height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    clip-path: inset(0 8% 0 8%);
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.card {
    min-width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-content {
    display: flex;
    width: 100%; height: 100%;
    align-items: center;
    padding: 0 60px;
    box-sizing: border-box;
    gap: 20px;
}

.card-image-side {
    flex: 0 0 40%; height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image-side img {
    position: absolute;
    max-height: 70%;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(201,168,76,0.25));
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    pointer-events: none;
}

.card-image-side.small-image img { max-height: 45%; }

.card-text-side {
    flex: 0.7;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-text-side h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: white;
    letter-spacing: 3px;
    font-weight: 400;
    margin-bottom: 0;
}

.card-text-side p {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #ccc;
    max-width: 400px;
    font-weight: 300;
}

.card-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    transition: 0.3s;
}

.card-btn:hover { background: var(--gold); color: black; }

.divider1 { width: 100%; text-align: center; margin: 25px 0; }
.divider1 img { width: 70%; height: auto; }
.divider2 { width: 100%; text-align: center; margin: 25px 0; rotate: 180deg; }
.divider2 img { width: 70%; height: auto; }

.carousel-nav-btn {
    background: none;
    border: none;
    z-index: 10;
    transition: 0.3s;
    padding: 20px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.carousel-nav-btn img { width: 40px; }
.carousel-nav-btn:hover { filter: brightness(4); }
.carousel-nav-btn:active img {
    transform: scale(0.85);
    filter: brightness(1.5) drop-shadow(0 0 15px var(--gold));
    transition: transform 0.1s;
}

#dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

.dot {
    width: 4px; height: 4px;
    background: #9b7e47;
    border: 1px solid #e1b82e;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: none;
}

.dot:hover { background: #444; transform: scale(1.1); }
.dot.active {
    background: #d4af37;
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(212,175,55,0.6);
}

* { -webkit-tap-highlight-color: transparent; }

/* =============================================
   MEDIA QUERIES
   ============================================= */

/* ══════════════════════════════════════════════
   Tablet na sirku (<= 1024px)
   ══════════════════════════════════════════════ */
@media (max-width: 1650px) {
    .bottom-left { bottom: 13%; left: 15%; }
    .top-right   { top: 14%;  right: 15%; }
}


@media (max-width: 1460px) {

    /* ── Intro text ── */
    #intro-text {
        font-size: 4.5rem;
        letter-spacing: 8px;
        width: 90%;
        padding: 0 16px;
    }

    /* ── 3D model ── */
    #final-model-container { width: 100%; height: 100%; transform: translateX(50%), translateY(50%); }

    /* ── STATIC SWORDS: zmizi pri <=1024px ──
       .desktop-only  = HTML sword-text-box elementy v DOM
       3D skupiny jsou skryte pres sword1Group.visible = false v JS */
    .desktop-only   { display: none !important; }
    .sword-text-box { display: none !important; }

    /* ── Label descriptions: skryte ── */
    .label-desc { display: none !important; }

    /* ── LABELY: reset model-specific transformu ──
       Model-specific CSS (mec.css, stit.css...) pouziva pevne px offsety
       jako translateX(-450px) nebo translateX(500px).
       Na tabletu jdou labely mimo obrazovku – resetujeme zpet na stred.
       !important prebije model-specific pravidla. */
    #text1, #text2, #text3 {
        font-size: 2.5rem !important;
        letter-spacing: 5px !important;
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        width: 80% !important;
        max-width: 700px !important;
    }

    /* Finalni text ANTOLOGIE */
    #final-text {
        font-size: 4.5rem !important;
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
        bottom: auto !important;
    }

    /* ── Navbar: horizontalni pruh nahore ── */
    .navbar {
        position: fixed !important;
        top: 4% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        height: 80px !important;
        flex-direction: row !important;
        background-image: none !important;
        background-color: transparent !important;
        gap: 15px !important;
        padding: 0 12px !important;
    }

    /* Rotovany SVG dekor za ikonami */
    .navbar::before {
        content: "";
        position: absolute;
        top: -150%; left: -150%;
        width: 400%; height: 400%;
        z-index: -1;
        background-image: url('../images/navbar-novy.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: rotate(90deg) scale(1.8);
        pointer-events: none;
    }

    .navbar-content {
        display: flex;
        flex-direction: row !important;
        gap: 30px !important;
        pointer-events: auto;
    }

    .navbar a svg { width: 40px !important; height: 40px !important; }

    /* ── Carousel ── */
    .carousel-wrapper { height: 55vh; }

    .card-content {
        flex-direction: row;
        padding: 20px 30px;
        gap: 16px;
    }

    .card-image-side {
        flex: 0 0 40% !important;
        height: 100%;
    }

    .card-image-side img               { max-height: 250px; }
    .card-image-side.small-image img   { max-height: 160px; }

    .card-text-side {
        flex: 0 0 50% !important;
        justify-content: center;
    }

    .card-text-side h3 { font-size: 1.4rem; }
    .card-text-side p  { font-size: 0.85rem; line-height: 1.6; }

    .divider1, .divider2 { margin: 2rem 0; }
}

/* ══════════════════════════════════════════════
   Tablet na vysku + velke telefony (<= 767px)
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Navbar: top bar s blur ── */
    .navbar {
        top: 0 !important;
        left: 0 !important;
        right: 0;
        transform: none !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        height: var(--navbar-mobile-h) !important;
        padding: 0 8px !important;
        gap: 0 !important;
        background-image: none !important;
        background-color: rgba(0, 0, 0, 0.88) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(201, 168, 76, 0.22);
        box-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
        box-sizing: border-box !important;
    }

    /* Zrusi pseudo-element z 1024px pravidla */
    .navbar::before { display: none !important; }

    .navbar a {
        padding: 8px 6px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar a svg { width: 35px !important; height: 35px !important; }
    .navbar a:hover  { transform: none; }
    .navbar a:active { transform: scale(0.9); }
    .navbar a:active svg path {
        stroke: #C9A84C;
        filter: drop-shadow(0 0 5px rgba(201, 168, 76, 0.6));
    }

    /* ── Intro text ── */
    #intro-text {
        font-size: 3rem;
        letter-spacing: 6px;
        width: 90%;
        margin-top: var(--navbar-mobile-h);
    }

    /* ── 3D model ── */
    #final-model-container { display: none !important; }

    /* ── Labely: presuneme dolu ── */
    .label {
        position: fixed;
        bottom: 20%; left: 50%;
        transform: translateX(-50%) !important;
        top: auto !important;
        font-size: 1.8rem;
        width: 90%;
        text-align: center;
        letter-spacing: 4px;
    }

    #text1, #text2, #text3 {
        transform: translateX(-50%) !important;
        font-size: 1.8rem !important;
        letter-spacing: 4px !important;
        bottom: 25% !important;
        top: auto !important;
        left: 50% !important;
        width: 90% !important;
        max-width: none !important;
    }

    #text2 { bottom: 35% !important; }
    #text3 { bottom: 45% !important; }

    #final-text {
        bottom: 30% !important;
        font-size: 3rem !important;
        top: auto !important;
        transform: translateX(-50%) !important;
    }

    #final-bg-image {
        width: 90%;
        max-width: 350px;
        transform: translate(-50%, -50%) scale(0.9) !important;
    }

    body { touch-action: pan-y; }

    /* ── Carousel ── */
    .carousel-section {
        padding-top: calc(var(--navbar-mobile-h) + 8px);
        padding-bottom: 8px;
        justify-content: flex-start;
    }

    .carousel-section h2 {
        font-size: 1.2rem;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-bottom: 8px;
    }

    .carousel-inner { clip-path: none; }
    .carousel-wrapper::before,
    .carousel-wrapper::after { display: none; }
    .static-border-svg { display: none; }
    .carousel-nav-btn  { display: none; }

    .carousel-wrapper {
        flex: 1;
        min-height: 0;
        max-height: none;
        height: auto;
        width: 100%;
    }

    .card-content {
        flex-direction: column;
        padding: 8px 10px 0;
        gap: 6px;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
    }

    .card-image-side {
        flex: 0 0 auto;
        width: 100%;
        height: 150px;
    }

    .card-image-side img {
        max-height: 180px;
        margin-top: -5rem;
    }

    .card-image-side.small-image img { max-height: 180px; }

    .card-text-side {
        flex: 1;
        justify-content: flex-start;
    }

    .card-text-side h3 {
        font-size: 3rem;
        letter-spacing: 2px;
        margin-top: -3rem;
        z-index: 1;
    }

    .card-text-side p {
        font-size: 1.3rem;
        line-height: 1.5;
        margin: 6px 0;
    }

    .divider1 { margin-bottom: 2rem; }
    .divider2 { margin-top: 2rem; }
    .divider1 img, .divider2 img { width: 60%; }

    .card-btn { padding: 7px 20px; font-size: 0.78rem; }

    #dots-container { margin-top: 8px; gap: 10px; }
}

/* ══════════════════════════════════════════════
   Male telefony (<= 480px)
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {
    #intro-text { font-size: 2.2rem; letter-spacing: 4px; }

    .label { font-size: 1.4rem; bottom: 15% !important; }
    #text1, #text2, #text3 { font-size: 1.4rem !important; }
    #final-text { font-size: 2.2rem !important; bottom: 25% !important; }

    .navbar a svg { width: 34px !important; height: 34px !important; }
    .navbar a { padding: 6px 4px; min-width: 38px; }

    .card-image-side { height: 130px; }
    .card-image-side img { max-height: 170px; }
    .card-image-side.small-image img { max-height: 170px; }

    .card-text-side h3 { font-size: 2rem; }
    .card-text-side p { font-size: 1rem; }
    .card{ width: 40%; }
    .divider1{ margin-bottom: 1.25rem; }
    .divider2{ margin-top: 1.25rem; margin-bottom: 2rem;}
}


/* ══════════════════════════════════════════════
   Velmi male telefony (<= 360px)
   ══════════════════════════════════════════════ */
@media (max-width: 360px) {
    :root { --navbar-mobile-h: 52px; }

    .navbar a { padding: 4px 2px; min-width: 34px; }
    .navbar a svg { width: 30px !important; height: 30px !important; }

    #intro-text { font-size: 1.8rem; letter-spacing: 3px; }

    .card-image-side               { height: 110px; }
    .card-image-side img           { max-height: 200px; }
    .card-text-side h3 { font-size: 1.5rem; }
    .card-text-side p  { font-size: 1rem; }
    .carousel-section h2 { margin-top: 4rem; margin-bottom: 1rem; }
}