/* 

 * DIGITÁLNÍ PITVA - index.css

 * Samostatný CSS soubor

 * Rychlý, čistý, bez sekání

 * VĚTŠÍ A VÝRAZNĚJŠÍ KARTY

 */



/* ========================================

   Reset a základní nastavení

   ======================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* CSS proměnné */

:root {

    --black-primary: #000000;

    --black-secondary: #0a0a0a;

    --gold-primary: #D4AF37;

    --gold-secondary: #FFD700;

    --gold-light: #F4E4C1;

    --white: #FFFFFF;

    --gray-light: rgba(255, 255, 255, 0.1);

    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

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

    --shadow-gold: 0 0 40px rgba(212, 175, 55, 0.3);

    --shadow-hover: 0 20px 60px rgba(212, 175, 55, 0.4);

}



/* Základní styly */

html, body {

    height: 100%;

    overflow: hidden;

}



body {

    font-family: var(--font-primary);

    color: var(--white);

    background: var(--black-primary);

    position: relative;

}



/* ========================================

   HEADER - JAKO NA HLAVNÍM WEBU!

   ======================================== */

.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

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

    backdrop-filter: blur(20px) saturate(180%);

    -webkit-backdrop-filter: blur(20px) saturate(180%);

    padding: 12px 0;

    z-index: 1000;

    transition: var(--transition);

    border-bottom: 1px solid rgba(212, 175, 55, 0.15);

}



/* Zlatý glow efekt */

.header-glow {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, 

        transparent,

        rgba(212, 175, 55, 0.5),

        rgba(255, 215, 0, 0.5),

        rgba(212, 175, 55, 0.5),

        transparent

    );

    animation: glowMove 8s linear infinite;

    opacity: 0;

    transition: opacity 0.3s;

}



.header:hover .header-glow {

    opacity: 1;

}



@keyframes glowMove {

    0% { transform: translateX(-100%); }

    100% { transform: translateX(100%); }

}



.header-container {

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 32px;

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Logo - NAKŘIVENÉ JAKO NA HLAVNÍM WEBU! */

.logo {

    font-size: 1.5rem;

    font-weight: 500;

    font-style: italic;

    color: var(--black-primary);

    letter-spacing: -1px;

    transform: rotate(-2deg);

    display: inline-block;

    position: relative;

    transition: transform 0.3s;

    padding: 4px 8px;

    text-decoration: none;

}



.logo::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 8px;

    right: 8px;

    height: 2px;

    background: var(--gold-primary);

    transform: scaleX(0);

    transition: transform 0.3s;

    transform-origin: left;

}



.logo:hover {

    transform: rotate(-2deg) scale(1.05);

}



.logo:hover::after {

    transform: scaleX(1);

}



/* ========================================

   VIDEO POZADÍ

   ======================================== */

.video-background {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    overflow: hidden;

}



.video-background video {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    transform: translate(-50%, -50%);

    object-fit: cover;

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(

        135deg,

        rgba(0, 0, 0, 0.7) 0%,

        rgba(0, 0, 0, 0.6) 50%,

        rgba(10, 10, 10, 0.7) 100%

    );

    z-index: 2;

}



.video-overlay::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(

        circle at 30% 50%,

        rgba(212, 175, 55, 0.05) 0%,

        transparent 40%

    );

    animation: floatGradient 20s ease-in-out infinite;

}



@keyframes floatGradient {

    0%, 100% { transform: translate(0, 0) rotate(0deg); }

    33% { transform: translate(30px, -30px) rotate(120deg); }

    66% { transform: translate(-20px, 20px) rotate(240deg); }

}



/* ========================================

   HLAVNÍ OBSAH - VĚTŠÍ KARTY!

   ======================================== */

.main-content {

    position: relative;

    z-index: 10;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



/* CTA Kontejner */

.cta-container {

    display: flex;

    gap: 40px;

    animation: ctaReveal 1.2s ease-out 0.3s both;

}



@keyframes ctaReveal {

    from {

        opacity: 0;

        transform: translateY(60px) scale(0.9);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



/* ========================================

   CTA BOXY - VĚTŠÍ A VÝRAZNĚJŠÍ!

   ======================================== */

.cta-box {

    position: relative;

    min-width: 360px;

    min-height: 200px;

    background: linear-gradient(135deg, 

        rgba(0, 0, 0, 0.9) 0%,

        rgba(10, 10, 10, 0.85) 100%

    );

    backdrop-filter: blur(20px) saturate(150%);

    -webkit-backdrop-filter: blur(20px) saturate(150%);

    border: 2px solid rgba(212, 175, 55, 0.4);

    border-radius: 20px;

    transition: var(--transition);

    overflow: visible;

    cursor: pointer;

    text-decoration: none;

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Inner container */

.cta-inner {

    padding: 45px 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    position: relative;

    z-index: 2;

}



/* AKTIVNÍ KARTA */

.cta-box.active {

    transform: scale(1.02);

    animation: cardPulse 3s ease-in-out infinite;

}



@keyframes cardPulse {

    0%, 100% { 

        transform: scale(1.02);

    }

    50% { 

        transform: scale(1.05);

    }

}



.cta-box.active:hover {

    transform: translateY(-15px) scale(1.08) !important;

    background: linear-gradient(135deg, 

        rgba(0, 0, 0, 0.95) 0%,

        rgba(20, 20, 20, 0.9) 100%

    );

    border-color: var(--gold-primary);

    box-shadow: 

        0 30px 80px rgba(212, 175, 55, 0.5),

        0 0 120px rgba(212, 175, 55, 0.2),

        inset 0 0 60px rgba(212, 175, 55, 0.05);

}



/* Glow efekt pro aktivní kartu */

.cta-glow {

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(

        circle at center,

        rgba(212, 175, 55, 0.3) 0%,

        transparent 50%

    );

    opacity: 0;

    transition: opacity 0.5s ease;

    pointer-events: none;

}



.cta-box.active::before {

    content: '';

    position: absolute;

    top: -3px;

    left: -3px;

    right: -3px;

    bottom: -3px;

    background: linear-gradient(

        45deg,

        var(--gold-primary),

        var(--gold-secondary),

        var(--gold-primary),

        var(--gold-secondary)

    );

    border-radius: 20px;

    opacity: 0;

    z-index: -1;

    transition: opacity 0.3s ease;

    background-size: 400% 400%;

    animation: gradientRotate 4s linear infinite;

}



@keyframes gradientRotate {

    0% { background-position: 0% 50%; }

    100% { background-position: 100% 50%; }

}



.cta-box.active:hover::before {

    opacity: 0.8;

}



/* DISABLED KARTA */

.cta-box.disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: scale(0.98);

    background: linear-gradient(135deg, 

        rgba(0, 0, 0, 0.7) 0%,

        rgba(10, 10, 10, 0.65) 100%

    );

    border-color: rgba(212, 175, 55, 0.2);

}



.cta-box.disabled:hover {

    transform: scale(1);

    opacity: 0.6;

    border-color: rgba(212, 175, 55, 0.3);

    animation: shake 0.5s;

}



@keyframes shake {

    0%, 100% { transform: translateX(0) scale(1); }

    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px) scale(1); }

    20%, 40%, 60%, 80% { transform: translateX(8px) scale(1); }

}



/* ========================================

   IKONY A TEXT

   ======================================== */



/* SVG Ikona - VĚTŠÍ! */

.cta-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));

    border-radius: 50%;

    position: relative;

    transition: var(--transition);

    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);

}



.cta-box.active:hover .cta-icon {

    transform: rotate(360deg) scale(1.2);

    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);

}



.cta-box.disabled:hover .cta-icon {

    transform: scale(1.05);

}



.cta-icon svg {

    width: 32px;

    height: 32px;

    stroke: var(--black-primary);

    stroke-width: 2.5;

    fill: none;

}



/* CTA Text - VĚTŠÍ A VÝRAZNĚJŠÍ! */

.cta-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    text-align: center;

}



.cta-title {

    font-size: 1.5rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    background: linear-gradient(135deg, var(--white), var(--gold-light));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.cta-subtitle {

    font-size: 1.1rem;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.8);

    letter-spacing: 0.5px;

}



/* Šipka pro aktivní kartu */

.cta-arrow {

    position: absolute;

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

    width: 30px;

    height: 30px;

    opacity: 0.7;

    transition: var(--transition);

}



.cta-arrow svg {

    width: 100%;

    height: 100%;

    stroke: var(--gold-primary);

    stroke-width: 2;

    fill: none;

}



.cta-box.active:hover .cta-arrow {

    transform: translateY(-50%) translateX(10px);

    opacity: 1;

}



/* Zámek pro disabled kartu */

.cta-lock {

    position: absolute;

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

    width: 25px;

    height: 25px;

    opacity: 0.5;

}



.cta-lock svg {

    width: 100%;

    height: 100%;

    stroke: rgba(255, 255, 255, 0.5);

    stroke-width: 2;

    fill: none;

}



/* Badge - VÝRAZNĚJŠÍ! */

.badge {

    position: absolute;

    top: -20px;

    right: 30px;

    background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));

    color: var(--black-primary);

    padding: 10px 30px;

    border-radius: 40px;

    font-size: 0.95rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 2.5px;

    transform: rotate(3deg);

    box-shadow: 

        0 10px 30px rgba(212, 175, 55, 0.6),

        0 0 60px rgba(212, 175, 55, 0.3);

    animation: badgePulse 2s ease-in-out infinite;

    white-space: nowrap;

    z-index: 100;

}



@keyframes badgePulse {

    0%, 100% { 

        transform: rotate(3deg) scale(1);

        box-shadow: 

            0 10px 30px rgba(212, 175, 55, 0.6),

            0 0 60px rgba(212, 175, 55, 0.3);

    }

    50% { 

        transform: rotate(3deg) scale(1.1);

        box-shadow: 

            0 15px 40px rgba(212, 175, 55, 0.8),

            0 0 80px rgba(212, 175, 55, 0.4);

    }

}



/* ========================================

   ČÁSTICE - VÍCE A VÝRAZNĚJŠÍ!

   ======================================== */

.particles {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 3;

    pointer-events: none;

    overflow: hidden;

}



.particle {

    position: absolute;

    width: 3px;

    height: 3px;

    background: var(--gold-primary);

    border-radius: 50%;

    opacity: 0;

    animation: floatParticle 12s linear infinite;

    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);

}



@keyframes floatParticle {

    0% {

        opacity: 0;

        transform: translateY(100vh) translateX(0);

    }

    10% {

        opacity: 0.8;

    }

    90% {

        opacity: 0.8;

    }

    100% {

        opacity: 0;

        transform: translateY(-100vh) translateX(100px);

    }

}



/* ========================================

   LOADING - COOL!

   ======================================== */

.loading {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--black-primary), var(--black-secondary));

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: opacity 0.5s ease;

}



.loading.hidden {

    opacity: 0;

    pointer-events: none;

}



.loading-spinner {

    width: 60px;

    height: 60px;

    border: 4px solid rgba(212, 175, 55, 0.1);

    border-top-color: var(--gold-primary);

    border-right-color: var(--gold-secondary);

    border-radius: 50%;

    animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;

    box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



/* ========================================

   RESPONZIVNÍ DESIGN - SUPER NA MOBILU!

   ======================================== */

@media (max-width: 768px) {

    .header {

        padding: 10px 0;

    }

    

    .header-container {

        padding: 0 20px;

    }

    

    .logo {

        font-size: 1.3rem;

    }

    

    .main-content {

        padding: 20px;

        padding-top: 80px; /* Více místa od hlavičky */

    }

    

    .cta-container {

        flex-direction: column;

        width: 100%;

        max-width: 400px;

        gap: 50px; /* ZVĚTŠENÁ MEZERA MEZI KARTAMI! */

    }



    .cta-box {

        min-width: unset;

        width: 100%;

        min-height: 180px;

        margin: 0; /* Reset margin */

    }

    

    /* Přidáme mezeru pro badge */

    .cta-box.disabled {

        margin-top: 25px; /* Prostor pro badge nahoře */

    }

    

    .cta-inner {

        padding: 35px 40px;

    }



    .cta-icon {

        width: 60px;

        height: 60px;

    }



    .cta-icon svg {

        width: 28px;

        height: 28px;

    }



    .cta-title {

        font-size: 1.3rem;

    }



    .cta-subtitle {

        font-size: 1rem;

    }



    .cta-arrow,

    .cta-lock {

        display: none;

    }



    .badge {

        top: -20px; /* Více prostoru */

        right: 20px;

        padding: 8px 20px;

        font-size: 0.85rem;

        letter-spacing: 1.5px;

    }

    

    .video-overlay {

        background: linear-gradient(

            135deg,

            rgba(0, 0, 0, 0.8) 0%,

            rgba(0, 0, 0, 0.7) 50%,

            rgba(10, 10, 10, 0.8) 100%

        );

    }

    

    /* Větší hover efekt na mobilu */

    .cta-box.active:active {

        transform: scale(0.98);

    }

}



@media (max-width: 480px) {

    .header {

        padding: 8px 0;

    }

    

    .logo {

        font-size: 1.2rem;

    }

    

    .main-content {

        padding: 15px;

        padding-top: 70px; /* Prostor od hlavičky */

    }

    

    .cta-container {

        max-width: 100%;

        gap: 40px; /* POŘÁD VELKÁ MEZERA! */

    }

    

    .cta-box {

        min-height: 160px;

        border-radius: 18px;

    }

    

    /* Extra prostor pro disabled kartu s badge */

    .cta-box.disabled {

        margin-top: 20px;

    }

    

    .cta-inner {

        padding: 30px 30px;

        gap: 15px;

    }



    .cta-icon {

        width: 55px;

        height: 55px;

    }



    .cta-icon svg {

        width: 26px;

        height: 26px;

    }

    

    .cta-title {

        font-size: 1.2rem;

    }



    .cta-subtitle {

        font-size: 0.95rem;

    }

    

    .badge {

        top: -18px;

        font-size: 0.75rem;

        padding: 6px 15px;

        letter-spacing: 1px;

    }

    

    /* Méně částic na malých telefonech */

    .particle {

        width: 2px;

        height: 2px;

    }

}



/* Pro velmi malé telefony */

@media (max-width: 380px) {

    .main-content {

        padding: 12px;

        padding-top: 65px;

    }

    

    .cta-container {

        gap: 35px; /* STÁLE DOSTATEČNÁ MEZERA! */

    }

    

    .cta-box {

        min-height: 150px;

    }

    

    .cta-box.disabled {

        margin-top: 18px;

    }

    

    .cta-inner {

        padding: 25px 25px;

    }

    

    .cta-title {

        font-size: 1.1rem;

    }

    

    .cta-subtitle {

        font-size: 0.9rem;

    }

    

    .badge {

        top: -15px;

    }

}



/* ========================================

   ACCESSIBILITY

   ======================================== */

*:focus {

    outline: 3px solid var(--gold-primary);

    outline-offset: 4px;

}



@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

    

    .video-background video {

        display: none;

    }

}



/* ========================================

   PERFORMANCE OPTIMIZATIONS

   ======================================== */

@media (hover: hover) {

    .cta-box {

        will-change: transform;

    }

}



/* GPU akcelerace pro smooth animace */

.cta-box,

.cta-icon,

.particle,

.loading-spinner {

    transform: translateZ(0);

    backface-visibility: hidden;

}



/* Optimalizace pro retina displeje */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .cta-box {

        border-width: 1.5px;

    }

    

    .cta-icon svg {

        stroke-width: 2;

    }

}