/* --- CORE KONFIGURACE --- */

:root { 

    --neon-cyan: #00f2ff; 

    --glass-bg: rgba(255, 255, 255, 0.03);

    --glass-border: rgba(255, 255, 255, 0.1);

}



body { 

    font-family: 'Inter', sans-serif; 

    background: #020202; 

    color: #fff; 

    margin: 0; 

    scroll-behavior: smooth; 

    overflow-x: hidden; 

}



.font-digital { font-family: 'Orbitron', sans-serif; }



/* --- HERO SEKCE --- */

.hero-viewport {

    position: relative;

    width: 100%;

    display: flex;

    flex-direction: column;

    background: url('img/Flipsc.jpg') no-repeat;

    background-position: center top;

    background-size: 100% auto; 

    transition: background-size 0.5s ease;

}







.vignette-overlay {

    position: absolute; 

    inset: 0;

    background: radial-gradient(circle at center, transparent 0%, rgba(2,2,2,0.2) 40%, rgba(2,2,2,1) 95%);

    z-index: 1;

    pointer-events: none;

}



#hero-content {

    position: relative;

    z-index: 10;

    padding-top: clamp(4rem, 17vh, 18rem);

    text-align: center;

    padding-left: 5vw;

    padding-right: 5vw;

    text-shadow: 0 0 30px rgba(0,0,0,0.5); 

}



#hero-content h1 {

    font-size: clamp(2.5rem, 8vw, 8rem) !important;

    line-height: 0.95;

    margin-bottom: 0.5rem;

}



#hero-content p {

    font-size: clamp(0.7rem, 1.5vw, 1.2rem) !important;

    text-transform: uppercase;

    letter-spacing: 0.3em;

    margin-top: 1rem;

    opacity: 0.9;

}



/* --- KARTY A PANELY --- */

.spacer-card {

    position: relative;

    z-index: 20;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: clamp(20vh, 23vw, 45rem); 

    padding-bottom: 0 !important;

    margin-bottom: 0 !important;

}



.glass-panel {

    background: var(--glass-bg);

    backdrop-filter: blur(25px);

    border: 1px solid var(--glass-border);

    max-width: 550px;

    border-radius: 2rem;

}



.color-card {

    background: rgba(255, 255, 255, 0.02); 

    border: 1px solid rgba(255, 255, 255, 0.05);

    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    opacity: 0;

    transform: translateY(40px);

}



.color-card.active {

    opacity: 1;

    transform: translateY(0);

}



.color-card:hover { 

    border-color: var(--card-color); 

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 20px 40px rgba(0,0,0,0.4);

}



/* --- TLAČÍTKA --- */

.btn-neon {

    background: var(--neon-cyan);

    color: #000;

    border: none;

    font-family: 'Orbitron', sans-serif;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    cursor: pointer;

    box-shadow: 0 0 25px rgba(0, 242, 255, 0.5), 0 0 50px rgba(0, 242, 255, 0.2);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-neon:hover {

    transform: scale(1.03) translateY(-2px);

    box-shadow: 0 0 40px rgba(0, 242, 255, 0.8), 0 0 70px rgba(0, 242, 255, 0.4);

    filter: brightness(1.1);

}



/* --- ANIMACE (REVEAL) --- */

.reveal { 

    opacity: 0; 

    transform: translateY(30px); 

    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 

}



.reveal.active { 

    opacity: 1; 

    transform: translateY(0); 

}



.delay-1 { transition-delay: 0.1s; }

.delay-2 { transition-delay: 0.2s; }

.delay-3 { transition-delay: 0.3s; }



/* --- SEKCE ABOUT --- */

#about {

    position: relative;

    z-index: 30;

    background: #020202;

    margin-top: 3rem !important; 

    padding-top: 0 !important;

}



/* --- RESPONSIVITA (MOBILE & TABLET) --- */



@media (max-width: 1350px) {

   #hero-content { padding-top: 10vh; }

}





@media (max-width: 1024px) {

    #hero-content { padding-top: 10vh; }

    #about { margin-top: 1rem !important; padding-top: 1rem !important; }

}



@media (max-width: 768px) {

    .glass-panel { width: 95%; padding: 1.5rem !important; }

    #hero-content h1 { font-size: clamp(2.5rem, 10vw, 5rem) !important; }

}



@media (max-width: 790px) {

  #hero-content { padding-top: 8vh; }

}

@media (max-width: 700px) {



    .hero-viewport {

        background-size: max(100%, calc(100% + (800px - 100vw) / 1.5)) auto !important;

        background-position: center 5% !important;

    }

    .spacer-card { margin-top: 35vw !important; }

    #about { padding-top: 2rem !important; }

    #about h2 { margin-bottom: 1.5rem !important; }

}





@media (max-width: 460px) {

 #hero-content { padding-top: 11vh; }

 

}





/* --- COOKIE BANNER --- */

#cookie-banner {

    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);

    width: 90%; max-width: 420px; background: rgba(10, 10, 10, 0.95);

    backdrop-filter: blur(20px); border: 1px solid rgba(0, 242, 255, 0.2);

    padding: 1.8rem; border-radius: 2rem; z-index: 9999; display: none;

}

.cookie-text { font-size: 13px; color: #e5e7eb; line-height: 1.6; }





/* Unikátní fixace pro MakerBox karty */

.project-card-container {

    display: flex;

    flex-direction: column;

    height: 100%; /* Zajistí, že všechny karty v řádku budou stejně vysoké */

}



.project-content-wrapper {

    display: flex;

    flex-direction: column;

    flex-grow: 1; /* Vyplní zbytek karty */

}



.price-anchor {

    margin-top: auto; /* Toto magicky odtlačí cenovku dospodu */

    padding-top: 1.5rem;

}





/* --- SPECIFICKÉ ÚPRAVY PRO BRAKE DISC --- */



/* Přepis obrázku a pozice pro desktop */

.hero-viewport.hero-brake {

    background-image: url('img/brake-disc-bg.png'); /* Cesta k tvému obrázku */

    

}



.hero-brake .spacer-card { margin-top: 33vw ; }

 

 .hero-brake #hero-content { padding-top: 10vh; }



/* Responzivní ladění specificky pro stránku s diskem */

@media (max-width: 940px) {

    .hero-brake #hero-content { padding-top: 9vh; 

}

.hero-brake #hero-content h1 {

    font-size: clamp(2rem, 7vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



}





@media (max-width: 600px) {

  .hero-brake .spacer-card { margin-top: 45vw !important; }

    





.hero-brake #hero-content h1 {

    font-size: clamp(2rem, 6vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



/* Zmenšení podnadpisu (Automotive RGB LED...) */

.hero-brake #hero-content p {

    font-size: clamp(0.6rem, 1.2vw, 0.9rem) !important; /* Původně jsi měl až 1.2rem */

    letter-spacing: 0.2em; /* Mírně jsem zmenšil rozestupy, aby to ladilo s menším písmem */

}



   

}



/* Responzivní ladění specificky pro stránku s diskem */

@media (max-width: 420px) {

    .hero-brake #hero-content { padding-top: 10vh; 

    

}



   

}





/* --- DYNAMICKÝ CENOVÝ SYSTÉM A SLEVY --- */



/* 1. Základní úprava ceny a slevy v Katalogu */

.price-old {

    font-size: 0.8rem;

    font-weight: 700;

    color: rgba(0, 0, 0, 0.4); /* Pro zobrazení na azurovém pozadí */

    text-decoration: line-through;

    text-decoration-thickness: 2px;

    line-height: 1;

}



/* 2. Skákající bublina v katalogu */

.animate-bounce {

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}



/* 3. Štítek "SAVE" a "PROCENTA" */

.discount-pill, .save-badge {

    background: #ff2d55; /* Agresivní červená pro kontrast k cyan */

    color: white;

    font-weight: 900;

    text-transform: uppercase;

    box-shadow: 0 0 15px rgba(255, 45, 85, 0.4);

}



/* 4. Responzivní fix pro ceny v Hero/Master Packu */

.price-main {

    font-family: 'Inter', sans-serif;

    font-weight: 900;

    font-size: clamp(1.4rem, 5vw, 1.7rem); /* Dynamická velikost, aby nepřetekla */

    color: #000;

    letter-spacing: -0.05em;

    line-height: 1;

}



/* 5. Ribbon (stužka) pro Master Pack */

.rotate-45 {

    transform: rotate(45deg);

    transform-origin: center;

}



/* 6. Fix pro extrémně malé displeje (pod 400px) */

@media (max-width: 400px) {

    /* Zmenšíme padding v badge, aby se tam cena vešla */

    .price-badge {

        padding: 8px 16px !important;

        gap: 6px !important;

    }

    

    /* Přinutíme sekci SAVE, aby se nelepila na cenu, pokud skočí pod ni */

    .flex-wrap {

        justify-content: center;

    }

    

    .price-main {

        font-size: 1.3rem !important;

    }

}



/* 7. Animace pulzování pro slevové nápisy */

.animate-pulse {

    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



@keyframes pulse-red {

    0%, 100% { opacity: 1; filter: brightness(1); }

    50% { opacity: 0.8; filter: brightness(1.2); }

}



/* 8. Šipka pod bublinou v katalogu */

.price-anchor .absolute.-bottom-1.left-3 {

    content: '';

    position: absolute;

    width: 8px;

    height: 8px;

    background: #ff2d55;

    transform: rotate(45deg);

    bottom: -4px;

    left: 12px;

}



/* 9. Úprava Master Packu pro responsivitu */

#buy .glass-panel {

    overflow: hidden; /* Nutné pro správné zobrazení slevové stužky v rohu */

}





/* Volitelné: Plynulé zobrazení (Fade-in) */

#offerModal {

    transition: opacity 0.3s ease-in-out;

    animation: fadeIn 0.3s;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}







/* --- SPECIFICKÉ ÚPRAVY PRO SUGAR SKULL --- */



.hero-viewport.hero-skull {

  background-image: url('img/sugar-skull-bg.jpg') !important;

   

}



.hero-skull .spacer-card { margin-top: 33vw ; }

 

 .hero-skull #hero-content { padding-top: 15vh; }



/* Responzivní ladění specificky pro stránku s diskem */

@media (max-width: 1640px) {

    .hero-skull #hero-content { padding-top: 12vh; 

}

.hero-skull #hero-content h1 {

    font-size: clamp(6rem, 7vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



}





@media (max-width: 1240px) {

   

.hero-skull #hero-content h1 {

    font-size: clamp(3rem, 7vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



}



@media (max-width: 600px) {

  .hero-skull .spacer-card { margin-top: 45vw !important; }

    





.hero-skull #hero-content h1 {

    font-size: clamp(2rem, 6vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



/* Zmenšení podnadpisu (Automotive RGB LED...) */

.hero-skull #hero-content p {

    font-size: clamp(0.6rem, 1.2vw, 0.9rem) !important; /* Původně jsi měl až 1.2rem */

    letter-spacing: 0.2em; /* Mírně jsem zmenšil rozestupy, aby to ladilo s menším písmem */

}



   

}



/* Responzivní ladění specificky pro stránku s diskem */

@media (max-width: 420px) {

    .hero-skull #hero-content { padding-top: 10vh; 

    

}



   

}





/* Styl pro plynulé zobrazení po načtení */

img.loaded {

    opacity: 0.9 !important; /* Původní hodnota opacity, kterou tam máš */

}



/* Volitelné: Přidání placeholderu (šedé pulzování), než se obrázek načte */

.group.shrink-0 {

    background: linear-gradient(110deg, #121212 8%, #1a1a1a 18%, #121212 33%);

    background-size: 200% 100%;

    animation: skeleton-pulse 1.5s linear infinite;

}



@keyframes skeleton-pulse {

    to { background-position-x: -200%; }

}







/* --- SPECIFICKÉ ÚPRAVY PRO OWLA --- */

.hero-viewport.hero-owl {

    background-image: url('img/owl-bg.jpg') !important;

    

}





.hero-owl .spacer-card { margin-top: 30vw ; }

 

 .hero-owl #hero-content { padding-top: 12vh; }



/* Responzivní ladění specificky pro stránku s diskem */

@media (max-width: 1640px) {

    .hero-owl #hero-content { padding-top: 12vh; 

}

.hero-owl #hero-content h1 {

    font-size: clamp(6rem, 7vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



}





@media (max-width: 1240px) {

   

.hero-owl #hero-content h1 {

    font-size: clamp(2.3rem, 7vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



.hero-owl .spacer-card { margin-top: 25vw ; }

 

 .hero-owl #hero-content { padding-top: 8vh; 

}

}



@media (max-width: 600px) {

  .hero-owl .spacer-card { margin-top: 45vw !important; }

    





.hero-owl #hero-content h1 {

    font-size: clamp(2rem, 6vw, 5.5rem) !important; /* Původně jsi měl až 8rem */

}



/* Zmenšení podnadpisu (Automotive RGB LED...) */

.hero-owl #hero-content p {

    font-size: clamp(0.6rem, 1.2vw, 0.9rem) !important; /* Původně jsi měl až 1.2rem */

    letter-spacing: 0.2em; /* Mírně jsem zmenšil rozestupy, aby to ladilo s menším písmem */

}



   

}



/* Responzivní ladění specificky pro stránku s diskem */

@media (max-width: 420px) {

    .hero-owl #hero-content { padding-top: 10vh; 

    

}



   

}