/* ═══════════════════════════════════════════ */
/* TRAIN WITH ADNAN — Global Stylesheet */
/* ═══════════════════════════════════════════ */

/* ─── Fallback Font Metrics (FOUT fix) ─── */
@font-face {
    font-family: 'Playfair Fallback';
    src: local('Georgia'), local('Times New Roman');
    size-adjust: 96%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* ─── Base ─── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { overflow-y: scroll; scrollbar-gutter: stable; scroll-behavior: smooth; }
body { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; }
.font-serif { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; }
h1, h2, h3, h4 { text-rendering: optimizeLegibility; }

/* ─── Keyframe Animations (all at top, valid syntax) ─── */
@keyframes gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes blob {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(20px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

@keyframes megaFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Hero Height Lock ─── */
/* ─── Hero Height Lock (single slide) ─── */
.heroSwiper {
    position: relative;
    min-height: 680px;
}
@media (max-width: 1024px) { .heroSwiper { min-height: 640px; } }
@media (max-width: 768px)  { .heroSwiper { min-height: auto; } }

.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide {
    height: 100%;
    min-height: inherit;
}
.heroSwiper .swiper-slide {
    position: relative;
    overflow: hidden;
}
.heroSwiper .swiper-slide > .hero-overlay {
    position: absolute;
    inset: 0;
    min-height: 100% !important;
    display: flex;
    align-items: center;
}
.heroSwiper,
.heroSwiper .swiper-slide,
.heroSwiper .hero-bg {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ─── Hero Visual ─── */
.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,13,24,0.9) 0%, rgba(10,25,41,0.75) 40%, rgba(5,13,24,0.95) 100%);
    z-index: 1;
}

.text-shadow { text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.text-shadow-sm { text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* ─── Line Clamps ─── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Glass Morphism ─── */
.glass {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ─── Gradient Text ─── */
.gradient-text {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 8s ease infinite;
}

/* ─── Backgrounds ─── */
.mesh-bg {
    background-color: #050D18;
    background-image:
        radial-gradient(at 20% 20%, rgba(14,165,233,0.15) 0px, transparent 50%),
        radial-gradient(at 80% 30%, rgba(56,189,248,0.1) 0px, transparent 50%),
        radial-gradient(at 50% 80%, rgba(14,165,233,0.08) 0px, transparent 50%);
}

.grid-pattern {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.noise::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 3;
}

/* ─── Transitions ─── */
.bento-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.bento-card:hover { transform: translateY(-4px); }

.course-card-img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.group:hover .course-card-img { transform: scale(1.1); }

/* ─── Marquee ─── */
.marquee-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.animate-marquee { animation: marquee 40s linear infinite; }
.animate-blob { animation: blob 8s ease-in-out infinite; }

/* ─── Shine Effect ─── */
.shine-effect {
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shine 3s linear infinite;
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── Swiper Customization ─── */
.swiper-pagination-bullet {
    background: rgba(255,255,255,0.4);
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: all 0.3s;
}
.swiper-pagination-bullet-active {
    background: #38BDF8;
    width: 24px;
    border-radius: 4px;
}

/* ─── Navbar Specific ─── */
[data-nav] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.menu-line-1,
.menu-line-2,
.menu-line-3 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: all 0.3s;
}
.menu-line-1 { top: 0; }
.menu-line-2 { top: 50%; transform: translateY(-50%); }
.menu-line-3 { bottom: 0; }

/* ─── Mobile Blur Reduction ─── */
@media (max-width: 768px) {
    .backdrop-blur-xl,
    .backdrop-blur-md {
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }
}

/* ─── FAQ Animation ─── */
.faq-answer {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    overflow: hidden;
}
.faq-item.faq-open .faq-answer { max-height: 500px; }

.faq-icon-v {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.faq-open .faq-icon-v {
    transform: rotate(90deg);
}
.faq-item.faq-open .faq-icon {
    background: #0EA5E9;
}
.faq-item.faq-open .faq-icon span {
    background: #ffffff;
}
.faq-item.faq-open {
    border-color: #7DD3FC;
    box-shadow: 0 10px 30px -10px rgba(14,165,233,0.15);
}
.faq-item.faq-open .faq-num {
    background: #E0F2FE;
    color: #0284C7;
}
.faq-item.faq-open .faq-question {
    color: #0284C7;
}

/* ─── Mega Menu Animation ─── */
.mega-menu { animation: megaFade 0.2s ease-out; }

/* ═══════════════════════════════════════════ */
/* HERO ENTRANCE ANIMATIONS (CSS-only, no JS) */
/* ═══════════════════════════════════════════ */

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSlideUp {
    from {
        transform: translateY(110%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes heroScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes heroCountIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Base: sab visible by default (fallback) */
.hero-eyebrow,
.hero-line-inner,
.hero-fade,
.hero-photo,
.hero-badge {
    opacity: 1;
    transform: none;
}

/* Animation classes (JS-free) */
.hero-eyebrow {
    animation: heroFadeUp 600ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

.hero-line-inner {
    animation: heroSlideUp 900ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}

.hero-line:nth-child(2) .hero-line-inner {
    animation-delay: 400ms;
}

.hero-fade {
    animation: heroFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger for multiple .hero-fade elements */
.hero-fade:nth-of-type(1) { animation-delay: 700ms; }
.hero-fade:nth-of-type(2) { animation-delay: 850ms; }
.hero-fade:nth-of-type(3) { animation-delay: 1000ms; }

.hero-photo {
    animation: heroScaleIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}

.hero-badge {
    animation: heroCountIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-badge:nth-child(1) { animation-delay: 900ms; }
.hero-badge:nth-child(2) { animation-delay: 1050ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .hero-line-inner,
    .hero-fade,
    .hero-photo,
    .hero-badge {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}