/* ============================================================
 * Glowing Letters v2 — объёмные буквы, тёплый свет + RGB-cycle
 * Стили:
 *   .glow-letters           — стандартный sans-serif (Inter Black) с янтарным glow
 *   .glow-letters--serif    — серифный шрифт (Playfair Display) как у ZEGNA / премиум-брендов
 *   .glow-letters--rgb      — мерцание со сменой цветов (RGB cycle)
 *   .glow-letters--brand-warm — тёплый янтарный (default)
 *   .glow-letters--brand-cool — холодный синий неон
 * Сочетания: .glow-letters .glow-letters--serif .glow-letters--rgb
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Trajan+Pro:wght@700&display=swap');

.glow-letters {
    display: inline-block;
    font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #fff8e1;
    text-transform: uppercase;
    padding: 24px 32px;
    background: #0a0a0a;
    border-radius: 14px;
    position: relative;
    text-shadow:
        0 0 6px  #ffb347,
        0 0 14px #ff9933,
        0 0 28px #ff7a18,
        0 0 60px #ff6a00;
    animation: glow-flicker 4.5s infinite;
}

/* Serif — премиум стиль как у ZEGNA / Loewe */
.glow-letters--serif {
    font-family: 'Playfair Display', 'Trajan Pro', 'Times New Roman', serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    /* Тонкий backlight как у настоящих объёмных букв */
    color: #f8fafc !important;
    text-shadow:
        0 0 3px  rgba(255, 255, 255, 0.6),
        0 0 12px rgba(200, 220, 240, 0.7),
        0 0 28px rgba(120, 170, 220, 0.5),
        0 0 60px rgba(80, 130, 200, 0.3) !important;
}

/* Размеры */
.glow-letters--md { font-size: 44px; padding: 18px 26px; }
.glow-letters--lg { font-size: 88px; padding: 32px 44px; }
.glow-letters--xl { font-size: 128px; padding: 40px 58px; }

/* Cold neon — синий */
.glow-letters--brand-cool {
    color: #ddeeff !important;
    text-shadow:
        0 0 6px  #5cb8ff,
        0 0 14px #2196f3,
        0 0 28px #1565c0,
        0 0 60px #0d47a1 !important;
}

/* RGB-цикл — буквы плавно меняют цвет */
.glow-letters--rgb {
    animation: glow-rgb-cycle 12s infinite linear !important;
}

/* Внутренние span — каждая буква со своим ритмом */
.glow-letters > span {
    display: inline-block;
    animation: glow-flicker-soft 5.2s infinite;
}
.glow-letters > span:nth-child(2n)  { animation-duration: 3.7s; animation-delay: 0.3s; }
.glow-letters > span:nth-child(3n)  { animation-duration: 4.9s; animation-delay: 0.9s; }
.glow-letters > span:nth-child(5n)  { animation-duration: 6.1s; animation-delay: 1.6s; }
.glow-letters > span.glow-letters__broken {
    animation: glow-flicker-broken 2.3s infinite;
}

/* RGB span — каждая буква уезжает по hue в свой момент */
.glow-letters--rgb > span {
    animation: glow-rgb-letter 12s infinite linear !important;
}
.glow-letters--rgb > span:nth-child(2) { animation-delay: -1s !important; }
.glow-letters--rgb > span:nth-child(3) { animation-delay: -2s !important; }
.glow-letters--rgb > span:nth-child(4) { animation-delay: -3s !important; }
.glow-letters--rgb > span:nth-child(5) { animation-delay: -4s !important; }
.glow-letters--rgb > span:nth-child(6) { animation-delay: -5s !important; }
.glow-letters--rgb > span:nth-child(7) { animation-delay: -6s !important; }
.glow-letters--rgb > span:nth-child(8) { animation-delay: -7s !important; }

/* === Keyframes === */

@keyframes glow-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.6; }
}

@keyframes glow-flicker-soft {
    0%, 100% { opacity: 1; }
    45%      { opacity: 0.85; }
    50%      { opacity: 1; }
    72%      { opacity: 0.9; }
}

@keyframes glow-flicker-broken {
    0%, 100%   { opacity: 1; }
    8%         { opacity: 0.2; }
    10%        { opacity: 0.95; }
    24%        { opacity: 0.3; }
    26%        { opacity: 1; }
    66%        { opacity: 0.5; }
    68%        { opacity: 1; }
}

/* RGB cycle для всего слова */
@keyframes glow-rgb-cycle {
    0%   { color: #fff8e1; text-shadow: 0 0 8px #ffb347, 0 0 20px #ff7a18, 0 0 50px #ff6a00; }
    16%  { color: #ffeded; text-shadow: 0 0 8px #ff5252, 0 0 20px #d32f2f, 0 0 50px #b71c1c; }
    33%  { color: #fff0e8; text-shadow: 0 0 8px #ff9100, 0 0 20px #ef6c00, 0 0 50px #e65100; }
    50%  { color: #e8fff0; text-shadow: 0 0 8px #69f0ae, 0 0 20px #00c853, 0 0 50px #1b5e20; }
    66%  { color: #e0f7ff; text-shadow: 0 0 8px #40c4ff, 0 0 20px #0091ea, 0 0 50px #01579b; }
    83%  { color: #f0e0ff; text-shadow: 0 0 8px #b388ff, 0 0 20px #651fff, 0 0 50px #4527a0; }
    100% { color: #fff8e1; text-shadow: 0 0 8px #ffb347, 0 0 20px #ff7a18, 0 0 50px #ff6a00; }
}

/* Per-letter RGB (для разнообразия) */
@keyframes glow-rgb-letter {
    0%   { color: #ff6a6a; text-shadow: 0 0 8px #ff5252, 0 0 20px #d32f2f; }
    25%  { color: #ffce6a; text-shadow: 0 0 8px #ffab40, 0 0 20px #ef6c00; }
    50%  { color: #6aff8a; text-shadow: 0 0 8px #69f0ae, 0 0 20px #00c853; }
    75%  { color: #6acaff; text-shadow: 0 0 8px #40c4ff, 0 0 20px #0091ea; }
    100% { color: #c66aff; text-shadow: 0 0 8px #b388ff, 0 0 20px #651fff; }
}

/* Контейнер-секция */
.glow-letters-section {
    background: linear-gradient(135deg, #0d0d0f 0%, #1a1a1d 100%);
    padding: 60px 20px;
    text-align: center;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.glow-letters-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1px at 20% 30%, rgba(255, 200, 100, 0.15) 0%, transparent 50%),
        radial-gradient(circle 1px at 70% 60%, rgba(255, 180, 80, 0.12) 0%, transparent 50%),
        radial-gradient(circle 1px at 40% 80%, rgba(255, 160, 60, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

/* Адаптив */
@media (max-width: 768px) {
    .glow-letters { font-size: 38px; padding: 16px 22px; }
    .glow-letters--lg { font-size: 56px; padding: 22px 30px; }
    .glow-letters--xl { font-size: 72px; padding: 26px 36px; }
}