@import 'tailwindcss';

/* ═══════════════════════════════════════════════════════════════
   BOLD & ATHLETIC — Public Academy Website Template
   Dark, diagonal, dynamic. Sports energy.
   ═══════════════════════════════════════════════════════════════ */

@theme {
    --color-website-primary: var(--site-primary, #1a1a2e);
    --color-website-secondary: var(--site-secondary, #16213e);
    --color-website-accent: var(--site-accent, #e94560);
    --color-website-text: var(--site-text, #ffffff);
    --color-website-muted: oklch(0.75 0.01 260);
    --color-website-surface: oklch(0.15 0.02 260);
    --color-website-surface-raised: oklch(0.18 0.02 260);
    --color-website-border: oklch(0.25 0.02 260);
}

@layer base {
    .website-body {
        background: linear-gradient(135deg, var(--site-primary, #1a1a2e) 0%, var(--site-secondary, #16213e) 100%);
        color: var(--site-text, #ffffff);
        font-family: var(--site-body-font, 'Cairo'), 'Noto Sans Arabic', system-ui, sans-serif;
        direction: rtl;
        min-height: 100vh;
        overflow-x: hidden;
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
    }

    .website-body * {
        scroll-margin-top: 80px;
    }
}

@layer components {
    /* ─── Navbar ─── */
    .site-nav {
        position: fixed;
        top: 0;
        inset-inline: 0;
        z-index: 100;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(0px);
    }

    .site-nav--scrolled {
        background: oklch(0.12 0.02 260 / 0.95);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 30px oklch(0 0 0 / 0.3);
    }

    .site-nav--solid {
        background: oklch(0.12 0.02 260 / 0.98);
        backdrop-filter: blur(12px);
    }

    /* ─── Hero ─── */
    .hero-section {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .hero-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to top, var(--site-primary, #1a1a2e), transparent);
        z-index: 2;
    }

    .hero-clip {
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            oklch(0.1 0.02 260 / var(--overlay-opacity, 0.7)) 0%,
            oklch(0.05 0.03 260 / calc(var(--overlay-opacity, 0.7) + 0.1)) 100%
        );
        z-index: 1;
    }

    .hero-content {
        position: relative;
        z-index: 3;
        text-align: center;
        padding: 2rem;
    }

    .hero-title {
        font-size: clamp(2.5rem, 6vw, 5rem);
        font-weight: 800;
        line-height: 1.1;
        text-shadow: 0 4px 20px oklch(0 0 0 / 0.5);
        letter-spacing: -0.02em;
    }

    .hero-accent-line {
        width: 0;
        height: 4px;
        margin: 1.5rem auto;
        background: var(--site-accent, #e94560);
        border-radius: 2px;
        animation: accent-expand 1s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes accent-expand {
        to { width: 120px; }
    }

    /* ─── Section Shared ─── */
    .site-section {
        position: relative;
        padding: 6rem 0;
        overflow: hidden;
    }

    .site-section--dark {
        background: oklch(0.1 0.015 260);
    }

    .site-section--pattern {
        background-image: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 40px,
            oklch(1 0 0 / 0.02) 40px,
            oklch(1 0 0 / 0.02) 41px
        );
    }

    .section-title {
        font-size: clamp(1.75rem, 4vw, 3rem);
        font-weight: 700;
        margin-bottom: 0.5rem;
        position: relative;
        display: inline-block;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        inset-inline-start: 0;
        width: 60px;
        height: 3px;
        background: var(--site-accent, #e94560);
        border-radius: 2px;
    }

    /* ─── Cards (Activity / Program / Branch) ─── */
    .site-card {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        background: oklch(0.15 0.02 260);
        border: 1px solid oklch(0.25 0.02 260);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .site-card:hover {
        transform: translateY(-4px);
        border-color: var(--site-accent, #e94560);
        box-shadow: 0 20px 40px oklch(0 0 0 / 0.3),
                    0 0 0 1px var(--site-accent, #e94560);
    }

    .site-card__image {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .site-card:hover .site-card__image {
        transform: scale(1.08);
    }

    .site-card__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, oklch(0.08 0.02 260 / 0.9) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.4s;
    }

    .site-card:hover .site-card__overlay {
        opacity: 1;
    }

    /* ─── Stats Counter ─── */
    .stats-band {
        position: relative;
        background: oklch(0.08 0.02 260);
        overflow: hidden;
    }

    .stats-band::before,
    .stats-band::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200%;
        background: var(--site-accent, #e94560);
        opacity: 0.05;
        transform: rotate(-15deg);
    }

    .stats-band::before { left: 10%; top: -50%; }
    .stats-band::after { right: 15%; top: -50%; }

    .stat-number {
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 800;
        color: var(--site-accent, #e94560);
        line-height: 1;
    }

    /* ─── Testimonials Carousel ─── */
    .testimonial-card {
        background: oklch(0.15 0.02 260);
        border-radius: 1.5rem;
        padding: 2.5rem;
        border: 1px solid oklch(0.25 0.02 260);
        position: relative;
    }

    .testimonial-card::before {
        content: '\201C';
        position: absolute;
        top: 1rem;
        inset-inline-start: 1.5rem;
        font-size: 5rem;
        line-height: 1;
        color: var(--site-accent, #e94560);
        opacity: 0.3;
        font-family: serif;
    }

    /* ─── FAQ Accordion ─── */
    .faq-item {
        border: 1px solid oklch(0.25 0.02 260);
        border-radius: 0.75rem;
        overflow: hidden;
        transition: border-color 0.3s;
    }

    .faq-item:hover,
    .faq-item[data-open="true"] {
        border-color: var(--site-accent, #e94560);
    }

    /* ─── CTA Section ─── */
    .cta-section {
        position: relative;
        background: linear-gradient(135deg, var(--site-accent, #e94560), oklch(0.55 0.2 350));
        overflow: hidden;
    }

    .cta-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 30px,
            oklch(1 0 0 / 0.05) 30px,
            oklch(1 0 0 / 0.05) 31px
        );
    }

    /* ─── Buttons ─── */
    .site-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem 2rem;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        text-decoration: none;
    }

    .site-btn--primary {
        background: var(--site-accent, #e94560);
        color: white;
        box-shadow: 0 4px 15px oklch(0.6 0.2 15 / 0.3);
    }

    .site-btn--primary:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px oklch(0.6 0.2 15 / 0.5);
    }

    .site-btn--outline {
        background: transparent;
        color: white;
        border: 2px solid oklch(1 0 0 / 0.3);
    }

    .site-btn--outline:hover {
        border-color: var(--site-accent, #e94560);
        color: var(--site-accent, #e94560);
    }

    /* ─── Footer ─── */
    .site-footer {
        background: oklch(0.06 0.015 260);
        border-top: 1px solid oklch(0.2 0.02 260);
    }

    /* ─── WhatsApp Float ─── */
    .whatsapp-float {
        position: fixed;
        bottom: 1.5rem;
        inset-inline-end: 1.5rem;
        z-index: 90;
        width: 56px;
        height: 56px;
        background: #25d366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px oklch(0.5 0.2 150 / 0.4);
        transition: transform 0.3s;
        animation: whatsapp-pulse 2s infinite;
    }

    .whatsapp-float:hover {
        transform: scale(1.1);
    }

    @keyframes whatsapp-pulse {
        0%, 100% { box-shadow: 0 4px 15px oklch(0.5 0.2 150 / 0.4); }
        50% { box-shadow: 0 4px 25px oklch(0.5 0.2 150 / 0.6), 0 0 0 8px oklch(0.5 0.2 150 / 0.1); }
    }

    /* ─── Animations ─── */
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .reveal--visible {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal--delay-1 { transition-delay: 0.1s; }
    .reveal--delay-2 { transition-delay: 0.2s; }
    .reveal--delay-3 { transition-delay: 0.3s; }
    .reveal--delay-4 { transition-delay: 0.4s; }

    /* ─── Map Container ─── */
    .map-container {
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid oklch(0.25 0.02 260);
        height: 350px;
    }

    /* ─── Gallery Grid ─── */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .gallery-item {
        position: relative;
        border-radius: 0.75rem;
        overflow: hidden;
        aspect-ratio: 3/2;
        cursor: pointer;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gallery-item:hover img {
        transform: scale(1.1);
    }

    .gallery-item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: oklch(0.1 0 0 / 0);
        transition: background 0.3s;
    }

    .gallery-item:hover::after {
        background: oklch(0.1 0 0 / 0.4);
    }

    /* ─── Partners Logo Bar ─── */
    .partners-track {
        display: flex;
        gap: 3rem;
        animation: scroll-logos 30s linear infinite;
    }

    @keyframes scroll-logos {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    /* ─── Contact Form ─── */
    .site-input {
        width: 100%;
        padding: 0.875rem 1rem;
        background: oklch(0.12 0.02 260);
        border: 1px solid oklch(0.25 0.02 260);
        border-radius: 0.75rem;
        color: white;
        font-size: 1rem;
        transition: border-color 0.3s;
    }

    .site-input:focus {
        outline: none;
        border-color: var(--site-accent, #e94560);
        box-shadow: 0 0 0 3px oklch(0.6 0.2 15 / 0.1);
    }

    .site-input::placeholder {
        color: oklch(0.55 0.01 260);
    }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }

    .site-section {
        padding: 3.5rem 0;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}
