/**

 * UNEVELLO - Test Landing Page CSS

 * 

 * UMÍSTĚNÍ: /www/styles/test.css

 * POUŽITÍ: test.php (úvodní stránka testu)

 * 

 * Design:

 * - Dark mode

 * - Gradient akcenty

 * - Smooth animace

 * - Responzivní

 * 

 * @version 1.4 (+ Loading animace + větší texty + fixed footer)

 */



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

/* IMPORTS & RESET */

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



@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



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

/* CSS VARIABLES */

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



:root {

    /* Colors */

    --bg: #0a0a0a;

    --bg-secondary: #141414;

    --text-primary: #fafafa;

    --text-secondary: #a1a1a1;

    --text-tertiary: #737373;

    --border: rgba(255, 255, 255, 0.08);

    --gold-start: #f6d365;

    --gold-end: #fda085;

    

    /* Spacing - ZVĚTŠENO */

    --spacing-xs: 10px;

    --spacing-sm: 14px;

    --spacing-md: 20px;

    --spacing-lg: 28px;

    --spacing-xl: 40px;

    --spacing-2xl: 56px;

    --spacing-3xl: 72px;

    

    /* Border radius */

    --radius-sm: 10px;

    --radius-md: 14px;

    --radius-lg: 20px;

    --radius-xl: 28px;

    

    /* Transitions */

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

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

}



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

/* BASE STYLES */

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



body {

    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    background: var(--bg);

    color: var(--text-primary);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    min-height: 100vh;

}



.container {

    max-width: 950px;

    margin: 0 auto;

    padding: 0 var(--spacing-lg);

    width: 100%;

}



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

/* FOOTER OVERRIDE - FULL WIDTH JAKO INDEX */

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



.footer .container {

    max-width: 1200px;

}



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

/* INTRO SECTION */

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



.test-intro {

    padding: var(--spacing-3xl) 0;

    text-align: center;

}



.test-intro .container {

    max-width: 950px;

}



/* Icon - ZVĚTŠENO */

.intro-icon {

    width: 110px;

    height: 110px;

    margin: 0 auto var(--spacing-xl);

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    border-radius: var(--radius-xl);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 8px 32px rgba(253, 160, 133, 0.3);

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

}



.intro-icon svg {

    width: 55px;

    height: 55px;

    color: #000;

}



@keyframes pulse {

    0%, 100% {

        transform: scale(1);

        box-shadow: 0 8px 32px rgba(253, 160, 133, 0.3);

    }

    50% {

        transform: scale(1.05);

        box-shadow: 0 12px 48px rgba(253, 160, 133, 0.5);

    }

}



/* Heading - JEŠTĚ VĚTŠÍ */

.intro-heading {

    font-size: 4rem;

    font-weight: 700;

    line-height: 1.1;

    margin-bottom: var(--spacing-2xl);

    letter-spacing: -0.02em;

}



.gradient-text {

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



/* Info Items - ZVĚTŠENO */

.intro-info {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-2xl);

    text-align: left;

}



.info-item {

    display: flex;

    gap: var(--spacing-md);

    padding: var(--spacing-lg);

    background: var(--bg-secondary);

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

    border-radius: var(--radius-md);

    transition: all var(--transition-medium);

}



.info-item:hover {

    border-color: rgba(253, 160, 133, 0.3);

    transform: translateY(-2px);

}



/* Info Icon - ZVĚTŠENO */

.info-icon {

    flex-shrink: 0;

    width: 60px;

    height: 60px;

    background: rgba(253, 160, 133, 0.1);

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

}



.info-icon svg {

    width: 30px;

    height: 30px;

    color: var(--gold-end);

}



/* Info Content - JEŠTĚ VĚTŠÍ */

.info-content h3 {

    font-size: 1.4rem;

    font-weight: 600;

    margin-bottom: var(--spacing-xs);

    color: var(--text-primary);

}



.info-content p {

    font-size: 1.15rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



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

/* CTA SECTION */

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



.intro-cta {

    margin-bottom: var(--spacing-2xl);

}



.btn {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-sm);

    padding: var(--spacing-md) var(--spacing-xl);

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

    font-size: 1.15rem;

    font-weight: 600;

    text-decoration: none;

    border-radius: var(--radius-md);

    transition: all var(--transition-medium);

    cursor: pointer;

    border: none;

}



.btn-primary {

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    color: #000;

    box-shadow: 0 4px 16px rgba(253, 160, 133, 0.3);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(253, 160, 133, 0.5);

}



.btn-primary:active {

    transform: translateY(0);

}



/* Button Large - JEŠTĚ VĚTŠÍ */

.btn-large {

    padding: var(--spacing-lg) var(--spacing-2xl);

    font-size: 1.35rem;

}



.btn svg {

    width: 26px;

    height: 26px;

}



.cta-hint {

    margin-top: var(--spacing-md);

    font-size: 1.05rem;

    color: var(--text-tertiary);

}



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

/* DISCLAIMER */

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



.intro-disclaimer {

    display: flex;

    gap: var(--spacing-md);

    padding: var(--spacing-lg);

    background: rgba(239, 68, 68, 0.05);

    border: 1px solid rgba(239, 68, 68, 0.2);

    border-radius: var(--radius-md);

    text-align: left;

}



.disclaimer-icon {

    flex-shrink: 0;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: flex-start;

    padding-top: 2px;

}



.disclaimer-icon svg {

    width: 24px;

    height: 24px;

    color: #ef4444;

}



.disclaimer-content {

    font-size: 1.05rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



.disclaimer-content strong {

    color: var(--text-primary);

    font-weight: 600;

}



.disclaimer-content a {

    color: var(--gold-end);

    text-decoration: none;

    font-weight: 600;

    transition: opacity var(--transition-fast);

}



.disclaimer-content a:hover {

    opacity: 0.8;

    text-decoration: underline;

}



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

/* RESPONSIVE */

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



@media (max-width: 768px) {

    .intro-heading {

        font-size: 2.5rem;

    }

    

    .intro-icon {

        width: 80px;

        height: 80px;

    }

    

    .intro-icon svg {

        width: 40px;

        height: 40px;

    }

    

    .info-item {

        flex-direction: column;

        text-align: center;

    }

    

    .info-icon {

        margin: 0 auto;

        width: 52px;

        height: 52px;

    }

    

    .info-icon svg {

        width: 26px;

        height: 26px;

    }

    

    .info-content h3 {

        font-size: 1.2rem;

    }

    

    .info-content p {

        font-size: 1rem;

    }

    

    .intro-disclaimer {

        flex-direction: column;

        text-align: center;

    }

    

    .disclaimer-icon {

        margin: 0 auto;

    }

    

    .btn-large {

        font-size: 1.15rem;

    }

}



@media (max-width: 480px) {

    .intro-heading {

        font-size: 2rem;

    }

    

    .btn-large {

        padding: var(--spacing-md) var(--spacing-lg);

        font-size: 1.1rem;

        width: 100%;

        justify-content: center;

    }

    

    .container {

        padding: 0 var(--spacing-md);

    }

    

    .info-content h3 {

        font-size: 1.1rem;

    }

    

    .info-content p {

        font-size: 0.95rem;

    }

}



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

/* ANIMATIONS */

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



.test-intro {

    animation: fadeIn 0.6s ease-out;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Stagger animation for info items */

.info-item:nth-child(1) {

    animation: slideIn 0.6s ease-out 0.1s backwards;

}



.info-item:nth-child(2) {

    animation: slideIn 0.6s ease-out 0.2s backwards;

}



.info-item:nth-child(3) {

    animation: slideIn 0.6s ease-out 0.3s backwards;

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateX(-20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



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

/* LOADING OVERLAY - COOL APP STYLE */

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



.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--bg);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.2s ease, visibility 0.2s ease;

}



.loading-overlay.active {

    opacity: 1;

    visibility: visible;

}



.loading-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 32px;

}



/* Animované kruhy - RYCHLEJŠÍ */

.loading-rings {

    position: relative;

    width: 120px;

    height: 120px;

}



.ring {

    position: absolute;

    top: 50%;

    left: 50%;

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

    border-radius: 50%;

    border: 3px solid transparent;

}



.ring-1 {

    width: 120px;

    height: 120px;

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

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

    animation: spin 0.7s linear infinite;

}



.ring-2 {

    width: 90px;

    height: 90px;

    border-bottom-color: var(--gold-end);

    border-left-color: var(--gold-end);

    animation: spin 0.55s linear infinite reverse;

}



.ring-3 {

    width: 60px;

    height: 60px;

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

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

    animation: spin 0.4s linear infinite;

}



.ring-center {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 24px;

    height: 24px;

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    border-radius: 50%;

    animation: pulse-center 0.5s ease-in-out infinite;

}



@keyframes spin {

    0% {

        transform: translate(-50%, -50%) rotate(0deg);

    }

    100% {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}



@keyframes pulse-center {

    0%, 100% {

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

        opacity: 1;

    }

    50% {

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

        opacity: 0.7;

    }

}



/* Extra glow effect */

.loading-overlay.active .loading-rings::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 160px;

    height: 160px;

    background: radial-gradient(circle, rgba(253, 160, 133, 0.2) 0%, transparent 70%);

    border-radius: 50%;

    animation: glow 1s ease-in-out infinite;

}



@keyframes glow {

    0%, 100% {

        opacity: 0.5;

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

    }

    50% {

        opacity: 1;

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

    }

}