/* ============================================
   ORCHESTRA46 — Animations & Responsive (Shared)
   Переиспользуемые анимации и адаптивные стили
   ============================================ */

/* ============================================
   ANIMATIONS - Initial States
   ============================================ */

.animate-fade-in {
    opacity: 0;
    transform: translateY(20px);
}

.animate-title {
    opacity: 0;
    transform: translateY(40px);
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered delays for reveal */
.reveal[data-delay="0"] { transition-delay: 0s; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .glass-card--large {
        grid-column: 1 / -1;
    }

    /* REMOVED: performers-grid 2 columns - causes mobile layout issues */
    /* Use concert-specific CSS to control performers layout */
}

@media (max-width: 900px) {
    /* REMOVED: max-width constraint on performer cards */
    /* Causes cards to be too small on mobile */
}

@media (max-width: 768px) {
    :root {
        --section-padding: 64px;
    }

    .hero {
        min-height: 100svh;
        padding: 80px 24px 60px;
    }

    .hero-subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.2em;
    }

    .hero-info {
        font-size: 1rem;
        flex-direction: column;
        gap: 4px;
    }

    .hero-info .separator {
        display: none;
    }

    .btn-primary {
        max-width: 400px;
        padding: 16px 32px;
        width: 100%;
        justify-content: center;
    }

    .scroll-indicator {
        display: none;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .program-item {
        padding: 16px 0;
        gap: 12px;
    }

    .program-name {
        font-size: 0.875rem;
    }

    .performers-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 48px;
    }

    .performers-grid .performer-card:last-child {
        max-width: none;
    }

    .performer-info {
        padding: 24px;
    }

    .venue-content {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 60px 16px 40px;
    }

    .section-title {
        margin-bottom: 12px;
    }

    .btn-secondary {
        font-size: 0.8125rem;
        padding: 10px 20px;
    }

    .glass-card {
        padding: 24px;
    }

    .card-value {
        font-size: 1.5rem;
    }

    .performer-info {
        padding: 20px;
    }

    .performer-name {
        font-size: 1.25rem;
    }
}

/* ============================================
   LANDSCAPE MODE
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --section-padding: 48px;
    }

    .hero {
        min-height: auto;
        padding: 24px 24px 32px;
    }

    .hero-subtitle {
        font-size: 0.7rem;
        margin-bottom: 12px;
    }

    .hero-info {
        font-size: 0.9375rem;
        flex-direction: row;
        gap: 8px;
    }

    .hero-info .separator {
        display: inline;
    }

    .btn-primary {
        padding: 12px 28px;
    }

    .scroll-indicator {
        display: none;
    }

    .performers-grid {
        gap: 24px;
        margin-top: 32px;
    }

    .performer-info {
        padding: 20px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .particles {
        display: none;
    }
}

/* Focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

/* Selection */
::selection {
    background: var(--gold);
    color: var(--bg-primary);
}