/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Базовые настройки */
html, body {
    width: 100%;
    min-height: 100vh;
    height: 100%;
}

body {
    /* Глубокий серый градиент от графитового к почти чёрному */
    background: radial-gradient(circle at center, #2a2a2a 0%, #1a1a1a 60%, #0f0f0f 100%);
    
    font-family: 'Courier New', Courier, 'Menlo', 'Monaco', 'Consolas', monospace;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Плавное появление фона */
    animation: bgFadeIn 1.8s ease-out forwards;
}

/* Контейнер для центрирования */
.container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Плашка в стиле "матовое стекло" */
.glass-panel {
    /* Адаптивная ширина: 90% на мобилках, но не шире 700px */
    width: 90%;
    max-width: 700px;
    
    /* Внутренние отступы */
    padding: clamp(30px, 8vw, 60px) clamp(20px, 6vw, 50px);
    
    /* Полупрозрачный белый фон (5% непрозрачности) */
    background-color: rgba(255, 255, 255, 0.05);
    
    /* Тонкая рамка 1px с прозрачностью */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Скругление углов */
    border-radius: 24px;
    
    /* Эффект размытия фона под плашкой (матовое стекло) */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Тень для глубины */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    
    /* Текст по центру */
    text-align: center;
    
    /* Отключаем выделение текста */
    user-select: none;
    -webkit-user-select: none;
    
    /* Начальное состояние для анимации появления рамки */
    opacity: 0;
    transform: scale(0.98);
    
    /* Анимация появления плашки */
    animation: panelAppear 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    
    /* Плавные переходы для интерактивности */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Лёгкий эффект при наведении (только для десктопов) */
@media (hover: hover) {
    .glass-panel:hover {
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 
                    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    }
}

/* Текст домена */
.domain-text {
    font-family: inherit;
    font-size: clamp(28px, 12vw, 72px);
    font-weight: 400;
    letter-spacing: 2px;
    
    /* Почти белый, но не ослепляющий */
    color: rgba(255, 255, 255, 0.9);
    
    /* Сглаживание шрифта */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Лёгкая тень для читаемости */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    
    /* Начальная прозрачность для анимации появления текста */
    opacity: 0;
    
    /* Анимация появления текста запускается после рамки */
    animation: textFadeIn 1.2s ease-out 0.7s forwards;
}

/* Курсор в стиле терминала */
.cursor {
    display: inline-block;
    font-family: inherit;
    font-size: clamp(28px, 12vw, 72px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 2px;
    
    /* Анимация мигания */
    animation: blink 1.2s step-end infinite;
    
    /* Начальная прозрачность */
    opacity: 0;
    
    /* Появляется вместе с текстом */
    animation: blink 1.2s step-end infinite, textFadeIn 1.2s ease-out 0.7s forwards;
}

/* Анимация появления фона */
@keyframes bgFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Анимация появления плашки */
@keyframes panelAppear {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Анимация появления текста */
@keyframes textFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Анимация мигания курсора */
@keyframes blink {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Медиа-запросы для тонкой настройки на очень маленьких экранах */
@media (max-width: 480px) {
    .glass-panel {
        width: 94%;
        padding: 35px 15px;
        border-radius: 20px;
    }
    
    .domain-text, .cursor {
        letter-spacing: 1px;
    }
}

/* Для экранов с высоким DPI (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .glass-panel {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* Для тёмной темы системы (уже и так тёмная) */
@media (prefers-color-scheme: dark) {
    /* Всё уже оптимизировано под тёмную тему */
}

/* Печать — скрываем всё лишнее */
@media print {
    body {
        background: white;
    }
    .glass-panel {
        background: none;
        border: 1px solid #ccc;
        box-shadow: none;
        backdrop-filter: none;
    }
    .domain-text {
        color: black;
    }
    .cursor {
        display: none;
    }
}