/* NMSA Shared Styles - Used across all page templates */

/* ========================================
   GLASS MORPHISM EFFECTS
   ======================================== */
.glass {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Prevent horizontal scrolling on all devices */
body {
    overflow-x: hidden !important;
}

/* Page fallback background and iOS/Android polish */
html, body {
    background-color: #f2f1eb; /* matches gradient start to avoid white peeks, light blue */
    overscroll-behavior-y: contain; /* reduce iOS rubber-band showing underlay */
}

#main-background {
    will-change: opacity, transform; /* hint compositing for smoother updates */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    contain: paint;
}

/* Removed global container width overrides to respect Tailwind max-w utilities */

/* Disable backdrop-filter on mobile to prevent background issues */
@media (max-width: 768px) {
    .glass,
    .glass-strong,
    .glass-card,
    .milestone-card,
    .leadership-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.8) !important;
    }
}

/* ========================================
   HOVER EFFECTS & TRANSITIONS
   ======================================== */
.floating-element {
    transition: all 0.3s ease;
}

.floating-element:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3);
}

.photo-hover {
    transition: all 0.3s ease;
}

.photo-hover:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ========================================
   GRADIENT TEXT
   ======================================== */
.gradient-text {
    background: linear-gradient(135deg, var(--nmsa-blue-700), var(--nmsa-blue-900));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   NMSA COLOR PALETTE
   ======================================== */
:root {
    --nmsa-blue-50: #f2f8fd;
    --nmsa-blue-100: #e3f0fb;
    --nmsa-blue-200: #bfe0f6;
    --nmsa-blue-300: #8ac8ef;
    --nmsa-blue-400: #4bade5;
    --nmsa-blue-500: #2493d3;
    --nmsa-blue-600: #1675b3;
    --nmsa-blue-700: #135d91;
    --nmsa-blue-800: #144f78;
    --nmsa-blue-900: #164364;
    --nmsa-blue-950: #0f2b42;
}

/* ========================================
   NMSA COLOR UTILITY CLASSES
   ======================================== */
.text-nmsa-50 { color: var(--nmsa-blue-50); }
.text-nmsa-100 { color: var(--nmsa-blue-100); }
.text-nmsa-200 { color: var(--nmsa-blue-200); }
.text-nmsa-300 { color: var(--nmsa-blue-300); }
.text-nmsa-400 { color: var(--nmsa-blue-400); }
.text-nmsa-500 { color: var(--nmsa-blue-500); }
.text-nmsa-600 { color: var(--nmsa-blue-600); }
.text-nmsa-700 { color: var(--nmsa-blue-700); }
.text-nmsa-800 { color: var(--nmsa-blue-800); }
.text-nmsa-900 { color: var(--nmsa-blue-900); }
.text-nmsa-950 { color: var(--nmsa-blue-950); }

.bg-nmsa-50 { background-color: var(--nmsa-blue-50); }
.bg-nmsa-100 { background-color: var(--nmsa-blue-100); }
.bg-nmsa-200 { background-color: var(--nmsa-blue-200); }
.bg-nmsa-300 { background-color: var(--nmsa-blue-300); }
.bg-nmsa-400 { background-color: var(--nmsa-blue-400); }
.bg-nmsa-500 { background-color: var(--nmsa-blue-500); }
.bg-nmsa-600 { background-color: var(--nmsa-blue-600); }
.bg-nmsa-700 { background-color: var(--nmsa-blue-700); }
.bg-nmsa-800 { background-color: var(--nmsa-blue-800); }
.bg-nmsa-900 { background-color: var(--nmsa-blue-900); }
.bg-nmsa-950 { background-color: var(--nmsa-blue-950); }

.border-nmsa-50 { border-color: var(--nmsa-blue-50); }
.border-nmsa-100 { border-color: var(--nmsa-blue-100); }
.border-nmsa-200 { border-color: var(--nmsa-blue-200); }
.border-nmsa-300 { border-color: var(--nmsa-blue-300); }
.border-nmsa-400 { border-color: var(--nmsa-blue-400); }
.border-nmsa-500 { border-color: var(--nmsa-blue-500); }
.border-nmsa-600 { border-color: var(--nmsa-blue-600); }
.border-nmsa-700 { border-color: var(--nmsa-blue-700); }
.border-nmsa-800 { border-color: var(--nmsa-blue-800); }
.border-nmsa-900 { border-color: var(--nmsa-blue-900); }
.border-nmsa-950 { border-color: var(--nmsa-blue-950); }

.hover\:text-nmsa-950:hover { color: var(--nmsa-blue-950); }
.hover\:text-nmsa-900:hover { color: var(--nmsa-blue-900); }
.hover\:bg-nmsa-700:hover { background-color: var(--nmsa-blue-700); }

/* Tailwind-like gradient stop utilities for NMSA palette */
.from-nmsa-800 {
    --tw-gradient-from: #144f78 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(20 79 120 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-nmsa-900 {
    --tw-gradient-to: #164364 var(--tw-gradient-to-position);
}

/* Alpha background utilities for NMSA palette (to match usage) */
.bg-nmsa-50\/10 { background-color: rgba(242, 248, 253, 0.1); }
.bg-nmsa-50\/20 { background-color: rgba(242, 248, 253, 0.2); }
.bg-nmsa-500\/20 { background-color: rgba(36, 147, 211, 0.2); }
.bg-nmsa-500\/30 { background-color: rgba(36, 147, 211, 0.3); }
.hover\:bg-nmsa-500\/30:hover { background-color: rgba(36, 147, 211, 0.3); }

/* ========================================
   BACKGROUND GRADIENTS
   ======================================== */
.hero-bg-gradient {
    background: linear-gradient(180deg, #f2f1eb 0%, #f0f4f7 50%, #e8f1f5 70%, #d4e8f0 85%, #bfe0f6 100%);
}

/* Ensure background gradient is always visible on mobile */
@media (max-width: 768px) {
    #main-background {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        display: block !important;
        position: fixed !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    
    /* Additional protection against scroll animations */
    body.mobile #main-background,
    html.mobile #main-background {
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Prevent any animate-out classes from affecting the background */
    #main-background.animate-out,
    #main-background.animate-in {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}

/* ========================================
   SCROLL-BASED ANIMATIONS
   ======================================== */
.scroll-navbar {
    transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.scroll-navbar.navbar-out {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.scroll-hero {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-hero.hero-out {
    opacity: 0;
    transform: translateY(-60px) scale(0.9);
    pointer-events: none;
}

/* Home hero text: title and subtitle fade up on small scroll */
.hero-title,
.hero-subtitle {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-title.hero-out,
.hero-subtitle.hero-out {
    opacity: 0;
    transform: translateY(-30px) scale(0.98);
    pointer-events: none;
}

.scroll-section {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(60px);
    opacity: 0;
}

.scroll-section.animate-in {
    transform: translateY(0);
    opacity: 1;
}

.scroll-section.animate-out {
    transform: translateY(-60px) scale(0.95);
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   V-PATTERN ANIMATIONS
   ======================================== */
.v-column {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-column-left.slide-left {
    opacity: 0;
    transform: translateX(-120px) translateY(-40px) scale(0.8);
    pointer-events: none;
}

.v-column-center.slide-center {
    opacity: 0;
    transform: translateY(-80px) scale(0.7);
    pointer-events: none;
}

.v-column-right.slide-right {
    opacity: 0;
    transform: translateX(120px) translateY(-40px) scale(0.8);
    pointer-events: none;
}

/* ========================================
   IMAGE ROTATION ANIMATIONS
   ======================================== */
.rotating-image {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotating-image.fade-out {
    opacity: 0;
    transform: scale(0.9) rotateY(90deg);
}

.rotating-image.fade-in {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
}

/* ========================================
   CARD ANIMATIONS
   ======================================== */
.sport-card, .event-card, .blog-card, .milestone-card, .leadership-card {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(40px);
    opacity: 0;
}

.sport-card:hover, .event-card:hover, .blog-card:hover, .milestone-card:hover, .leadership-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.card-animate-in {
    transform: translateY(0);
    opacity: 1;
}

.card-animate-out {
    transform: translateY(-40px) scale(0.9);
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   SPECIALIZED CARD STYLES
   ======================================== */
.milestone-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.leadership-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Disable backdrop-filter on mobile for milestone and leadership cards */
@media (max-width: 768px) {
    .milestone-card,
    .leadership-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.8) !important;
    }
}

/* ========================================
   STATISTICS & NUMBERS
   ======================================== */
.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--nmsa-blue-700);
}

/* ========================================
   HEADING DESCENDER VISIBILITY FIX
   Ensures characters like g, j, y are not clipped at the bottom
   ======================================== */
h1 {
    line-height: 1.12; /* slightly looser to preserve descenders */
    padding-bottom: 0.08em; /* tiny extra breathing room below */
    overflow: visible; /* guard against ancestor overflow clipping */
}

/* Safari/WebKit gradient text sometimes clips descenders; this avoids it */
h1.gradient-text,
.gradient-text h1 {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* ========================================
   LINE CLAMP UTILITIES
   ======================================== */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   FACILITY CAROUSEL ANIMATIONS
   ======================================== */
.facility-carousel {
    position: relative;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.opacity-0 {
    opacity: 0;
}

.carousel-slide.opacity-100 {
    opacity: 1;
}

/* ========================================
   RESPONSIVE GRID FIXES
   ======================================== */
@media (min-width: 1024px) {
    .sports-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .sports-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ========================================
   HERO SECTION DEFAULTS
   ======================================== */
.hero-section {
    opacity: 1;
    transform: translateY(0);
}

/* Federation V-pattern row full-bleed and centered */
#v-images {
    width: 100%;
}

@media (min-width: 1024px) {
    #v-images {
        width: 100vw; /* full viewport width */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 0;
        padding-right: 0;
    }
}

/* ========================================
   CTA BADGES (Round buttons with right arrow)
   ======================================== */
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 9999px;
    background-color: var(--nmsa-blue-600);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease;
}

.cta-badge svg {
    width: 18px;
    height: 18px;
}

.cta-badge:hover {
    background-color: var(--nmsa-blue-700);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.35);
}

.cta-badge.cta-secondary {
    background-color: var(--nmsa-blue-500);
}

/* ========================================
   HISTORY SECTION ANIMATIONS
   ======================================== */
.scroll-section[data-section="history"].animate-out .grid.md\\:grid-cols-2 > div:first-child {
    transform: translateX(-100px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="history"].animate-out .grid.md\\:grid-cols-2 > div:last-child {
    transform: translateX(100px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(1),
.scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(2) {
    transform: translateX(-100px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(3),
.scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(4) {
    transform: translateX(100px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Disable horizontal animations on mobile to prevent horizontal scrolling */
@media (max-width: 768px) {
    .scroll-section[data-section="history"].animate-out .grid.md\\:grid-cols-2 > div:first-child,
    .scroll-section[data-section="history"].animate-out .grid.md\\:grid-cols-2 > div:last-child,
    .scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(1),
    .scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(2),
    .scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(3),
    .scroll-section[data-section="history"].animate-out .grid.grid-cols-4 > div:nth-child(4) {
        transform: translateY(-60px) scale(0.95) !important;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

.scroll-section[data-section="history"].animate-in .grid.md\\:grid-cols-2 > div:first-child {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="history"].animate-in .grid.md\\:grid-cols-2 > div:last-child {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="history"].animate-in .grid.grid-cols-4 > div:nth-child(1),
.scroll-section[data-section="history"].animate-in .grid.grid-cols-4 > div:nth-child(2) {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="history"].animate-in .grid.grid-cols-4 > div:nth-child(3),
.scroll-section[data-section="history"].animate-in .grid.grid-cols-4 > div:nth-child(4) {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   MISSION SECTION ANIMATIONS
   ======================================== */
.scroll-section[data-section="mission"].animate-out .grid.md\\:grid-cols-2 > div:first-child {
    transform: translateX(-100px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="mission"].animate-out .grid.md\\:grid-cols-2 > div:last-child {
    transform: translateX(100px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Disable horizontal animations on mobile for mission section */
@media (max-width: 768px) {
    .scroll-section[data-section="mission"].animate-out .grid.md\\:grid-cols-2 > div:first-child,
    .scroll-section[data-section="mission"].animate-out .grid.md\\:grid-cols-2 > div:last-child {
        transform: translateY(-60px) scale(0.95) !important;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

.scroll-section[data-section="mission"].animate-in .grid.md\\:grid-cols-2 > div:first-child {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-section[data-section="mission"].animate-in .grid.md\\:grid-cols-2 > div:last-child {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}