/**
 * ====================================================================
 * BASE & GLOBAL DESIGN SYSTEM (base.css)
 * Saraswati Shishu Play & Public School
 *
 * Includes:
 * 1. Semantic Light & Dark Mode Tokens
 * 2. Typography & Heading Hierarchy
 * 3. Background Pattern Utilities (.bg-pattern-dots, .bg-pattern-grid, etc.)
 * 4. Ambient Micro-Animations (.animate-float, .animate-aura, .animate-ticker)
 * ====================================================================
 */

/* ====================================================
   1. CSS CUSTOM PROPERTIES / DESIGN TOKENS
   ==================================================== */
:root {
    /* Palette Design Tokens from Spec */
    --var-primary: #0F2854;       /* 🔵 Classic Deep Navy Blue */
    --var-secondary: #1D4ED8;     /* 🟦 Royal Blue */
    --var-accent: #E5A93C;        /* 🟡 Warm Golden Yellow / Amber */
    --var-accent-hover: #D0932B;  /* Darker Gold on Hover */
    --var-bg-app: #FAFCFF;        /* ⚪ Clean Crisp Background */
    --var-bg-card: #FFFFFF;       /* 🤍 Pure White Card Surface */
    --var-text: #0E1726;          /* ⚫ High Contrast Deep Navy Heading */
    --var-text-muted: #5B6B84;    /* 🌫️ Crisp Slate Gray */
    --var-color-success: #16A34A; /* 🟢 Success Green */

    /* Default Brand Colors (Can be overridden dynamically via SiteSetting) */
    --brand-primary: var(--var-primary);
    --brand-secondary: var(--var-secondary);
    --brand-accent: var(--var-accent);
    --color-success: var(--var-color-success);

    /* Light Mode Tokens (Clean & Professional School Theme) */
    --bg-app: var(--var-bg-app);
    --bg-surface: var(--var-bg-card);
    --bg-subtle: #F1F5F9;
    --bg-header: rgba(255, 255, 255, 0.98);
    --bg-mini-header: #0B192C;     /* Deep Navy Midnight Header */
    --bg-ticker: #0F2854;          /* Deep Navy Alert Ribbon */
    --bg-footer: #0B192C;          /* Deep Navy Footer */

    --text-primary: var(--var-text);
    --text-secondary: #334155;
    --text-muted: var(--var-text-muted);

    --border-subtle: #F1F5F9;
    --border-default: #E2E8F0;
    --border-strong: #CBD5E1;

    /* ====================================================
       HERITAGE CREST COLOR PALETTE (From School Logo)
       5 Iconic Shades from the Emblem / Shield
       ==================================================== */
    --crest-crimson: #C72228;        /* 🔴 Crest Ruby Crimson (Palette / Arts) */
    --crest-crimson-rgb: 199, 34, 40;
    --crest-emerald: #0C7C59;        /* 🟢 Crest Jade Emerald (ABC / Growth) */
    --crest-emerald-rgb: 12, 124, 89;
    --crest-amber: #F6A800;          /* 🟡 Crest Saffron Amber (Diya / Sanskriti) */
    --crest-amber-rgb: 246, 168, 0;
    --crest-azure: #00A0E3;          /* 🔵 Crest Sky Azure (Open Book / Vidya) */
    --crest-azure-rgb: 0, 160, 227;
    --crest-indigo: #2E2F96;         /* 🟣 Crest Royal Indigo (Shield Cross & Border) */
    --crest-indigo-rgb: 46, 47, 150;

    --card-shadow: 0 10px 30px -5px rgba(15, 40, 84, 0.08), 0 4px 6px -2px rgba(15, 40, 84, 0.04);
}

/* Dark Mode Tokens (Complementary Midnight Theme) */
.dark {
    --bg-app: #080D1A;            /* Deep Midnight Canvas */
    --bg-surface: #0F172A;        /* Navy Slate Card */
    --bg-subtle: #1E293B;         /* Subtle Elevated Slate */
    --bg-header: rgba(15, 23, 42, 0.95);
    --bg-mini-header: #050811;    /* Obsidian Header */
    --bg-ticker: #0A1224;         /* Dark Navy Ribbon */
    --bg-footer: #050811;         /* Obsidian Footer */

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #64748B;

    --border-subtle: #1E293B;
    --border-default: #283548;
    --border-strong: #334155;

    /* Heritage Crest Colors Tuned for Dark Midnight Canvas */
    --crest-crimson: #F87171;        /* Radiant Rose/Crimson */
    --crest-crimson-rgb: 248, 113, 113;
    --crest-emerald: #34D399;        /* Luminous Mint/Emerald */
    --crest-emerald-rgb: 52, 211, 153;
    --crest-amber: #FBBF24;          /* Warm Sunlit Amber */
    --crest-amber-rgb: 251, 191, 36;
    --crest-azure: #38BDF8;          /* Vibrant Sky Azure */
    --crest-azure-rgb: 56, 189, 248;
    --crest-indigo: #818CF8;         /* Luminous Royal Indigo */
    --crest-indigo-rgb: 129, 140, 248;

    --card-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.6);
}

/* ====================================================
   2. TYPOGRAPHY & HEADING HIERARCHY
   ==================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.02em;
}

/* Dynamic Theme Utility Accents */
.bg-brand-primary { background-color: var(--brand-primary); }
.text-brand-primary { color: var(--brand-primary); }
.border-brand-primary { border-color: var(--brand-primary); }

.bg-brand-secondary { background-color: var(--brand-secondary); }
.text-brand-secondary { color: var(--brand-secondary); }
.border-brand-secondary { border-color: var(--brand-secondary); }

.bg-brand-accent { background-color: var(--brand-accent); }
.text-brand-accent { color: var(--brand-accent); }
.border-brand-accent { border-color: var(--brand-accent); }

/* Heritage Crest Color Utilities (From School Logo) */
.text-crest-crimson { color: var(--crest-crimson); }
.text-crest-emerald { color: var(--crest-emerald); }
.text-crest-amber   { color: var(--crest-amber); }
.text-crest-azure   { color: var(--crest-azure); }
.text-crest-indigo  { color: var(--crest-indigo); }

.bg-crest-crimson { background-color: var(--crest-crimson); }
.bg-crest-emerald { background-color: var(--crest-emerald); }
.bg-crest-amber   { background-color: var(--crest-amber); }
.bg-crest-azure   { background-color: var(--crest-azure); }
.bg-crest-indigo  { background-color: var(--crest-indigo); }

.bg-crest-crimson-subtle { background-color: rgba(var(--crest-crimson-rgb), 0.1); }
.bg-crest-emerald-subtle { background-color: rgba(var(--crest-emerald-rgb), 0.1); }
.bg-crest-amber-subtle   { background-color: rgba(var(--crest-amber-rgb), 0.1); }
.bg-crest-azure-subtle   { background-color: rgba(var(--crest-azure-rgb), 0.1); }
.bg-crest-indigo-subtle  { background-color: rgba(var(--crest-indigo-rgb), 0.1); }

.border-crest-crimson { border-color: var(--crest-crimson); }
.border-crest-emerald { border-color: var(--crest-emerald); }
.border-crest-amber   { border-color: var(--crest-amber); }
.border-crest-azure   { border-color: var(--crest-azure); }
.border-crest-indigo  { border-color: var(--crest-indigo); }

/* Spectrum Bar / Gradient representing the 5 logo crest colors */
.bg-crest-spectrum {
    background: linear-gradient(90deg, 
        var(--crest-crimson) 0%, 
        var(--crest-amber) 25%, 
        var(--crest-indigo) 50%, 
        var(--crest-emerald) 75%, 
        var(--crest-azure) 100%
    );
}

/* Crest Card Glows */
.crest-card-glow-crimson:hover {
    box-shadow: 0 16px 36px -8px rgba(var(--crest-crimson-rgb), 0.22);
}
.crest-card-glow-indigo:hover {
    box-shadow: 0 16px 36px -8px rgba(var(--crest-indigo-rgb), 0.22);
}
.crest-card-glow-emerald:hover {
    box-shadow: 0 16px 36px -8px rgba(var(--crest-emerald-rgb), 0.22);
}
.crest-card-glow-amber:hover {
    box-shadow: 0 16px 36px -8px rgba(var(--crest-amber-rgb), 0.22);
}
.crest-card-glow-azure:hover {
    box-shadow: 0 16px 36px -8px rgba(var(--crest-azure-rgb), 0.22);
}

/* Heritage Crest Card Shades with Distinct Gradient & Border (Replaces Plain White Background) */
.crest-card-crimson {
    background: linear-gradient(145deg, rgba(var(--crest-crimson-rgb), 0.12) 0%, rgba(var(--crest-crimson-rgb), 0.04) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-crimson-rgb), 0.3) !important;
}
.dark .crest-card-crimson {
    background: linear-gradient(145deg, rgba(var(--crest-crimson-rgb), 0.22) 0%, rgba(var(--crest-crimson-rgb), 0.08) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-crimson-rgb), 0.45) !important;
}

.crest-card-indigo {
    background: linear-gradient(145deg, rgba(var(--crest-indigo-rgb), 0.12) 0%, rgba(var(--crest-indigo-rgb), 0.04) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-indigo-rgb), 0.3) !important;
}
.dark .crest-card-indigo {
    background: linear-gradient(145deg, rgba(var(--crest-indigo-rgb), 0.22) 0%, rgba(var(--crest-indigo-rgb), 0.08) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-indigo-rgb), 0.45) !important;
}

.crest-card-emerald {
    background: linear-gradient(145deg, rgba(var(--crest-emerald-rgb), 0.12) 0%, rgba(var(--crest-emerald-rgb), 0.04) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-emerald-rgb), 0.3) !important;
}
.dark .crest-card-emerald {
    background: linear-gradient(145deg, rgba(var(--crest-emerald-rgb), 0.22) 0%, rgba(var(--crest-emerald-rgb), 0.08) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-emerald-rgb), 0.45) !important;
}

.crest-card-amber {
    background: linear-gradient(145deg, rgba(var(--crest-amber-rgb), 0.14) 0%, rgba(var(--crest-amber-rgb), 0.05) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-amber-rgb), 0.35) !important;
}
.dark .crest-card-amber {
    background: linear-gradient(145deg, rgba(var(--crest-amber-rgb), 0.24) 0%, rgba(var(--crest-amber-rgb), 0.08) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-amber-rgb), 0.45) !important;
}

.crest-card-azure {
    background: linear-gradient(145deg, rgba(var(--crest-azure-rgb), 0.12) 0%, rgba(var(--crest-azure-rgb), 0.04) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-azure-rgb), 0.3) !important;
}
.dark .crest-card-azure {
    background: linear-gradient(145deg, rgba(var(--crest-azure-rgb), 0.22) 0%, rgba(var(--crest-azure-rgb), 0.08) 55%, var(--bg-surface) 100%) !important;
    border-color: rgba(var(--crest-azure-rgb), 0.45) !important;
}

/* ====================================================
   3. REUSABLE SECTION & CARD BACKGROUND PATTERNS
   Automatic Light & Dark Mode Support
   ==================================================== */

/* 3.1 Academic Dot Matrix Grid */
.bg-pattern-dots {
    background-image: radial-gradient(rgba(15, 40, 84, 0.08) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
}
.dark .bg-pattern-dots {
    background-image: radial-gradient(rgba(147, 197, 253, 0.08) 1.2px, transparent 1.2px);
}

/* 3.2 STEM & Mathematics Graph Grid */
.bg-pattern-grid {
    background-image: 
        linear-gradient(to right, rgba(15, 40, 84, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 40, 84, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}
.dark .bg-pattern-grid {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* 3.3 Diagonal Architectural Pin-Stripes */
.bg-pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(15, 40, 84, 0.02) 0px,
        rgba(15, 40, 84, 0.02) 2px,
        transparent 2px,
        transparent 12px
    );
}
.dark .bg-pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02) 0px,
        rgba(255, 255, 255, 0.02) 2px,
        transparent 2px,
        transparent 12px
    );
}

/* 3.4 Playful & Educational Doodles (Pure Vector SVG Data URI) */
.bg-pattern-doodles {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' opacity='0.04'%3E%3Cpath fill='%230F2854' d='M25 15l4 8-8-4zm40 10a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm-45 60h12v3H20zm70-15l6 6-6 6-6-6zm-40 25a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm65-40l-8-8 3-3 8 8zm-85-20l3 3-6 6-3-3z'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}
.dark .bg-pattern-doodles {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' opacity='0.05'%3E%3Cpath fill='%2393C5FD' d='M25 15l4 8-8-4zm40 10a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm-45 60h12v3H20zm70-15l6 6-6 6-6-6zm-40 25a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm65-40l-8-8 3-3 8 8zm-85-20l3 3-6 6-3-3z'/%3E%3C/svg%3E");
}

/* 3.5 School Ruled Copybook / Exercise Notebook (Horizontal Rules - Clean & Mobile-Optimized) */
.bg-pattern-copybook {
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, rgba(15, 40, 84, 0.06) 27px, rgba(15, 40, 84, 0.06) 28px);
    background-size: 100% 28px;
}
.dark .bg-pattern-copybook {
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, rgba(148, 163, 184, 0.08) 27px, rgba(148, 163, 184, 0.08) 28px);
    background-size: 100% 28px;
}

/* 3.6 Squared Mathematics Copybook Grid */
.bg-pattern-math-copybook {
    background-image:
        linear-gradient(to right, rgba(15, 40, 84, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 40, 84, 0.06) 1px, transparent 1px);
    background-size: 16px 16px;
}
.dark .bg-pattern-math-copybook {
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* 3.7 English 4-Line Handwriting Copybook (Foundational / Primary) */
.bg-pattern-fourline {
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(37, 99, 235, 0.12) 0px,
        rgba(37, 99, 235, 0.12) 1px,
        transparent 1px,
        transparent 8px,
        rgba(225, 29, 72, 0.10) 8px,
        rgba(225, 29, 72, 0.10) 9px,
        transparent 9px,
        transparent 16px,
        rgba(225, 29, 72, 0.10) 16px,
        rgba(225, 29, 72, 0.10) 17px,
        transparent 17px,
        transparent 24px,
        rgba(37, 99, 235, 0.12) 24px,
        rgba(37, 99, 235, 0.12) 25px,
        transparent 25px,
        transparent 40px
    );
    background-size: 100% 40px;
}
.dark .bg-pattern-fourline {
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(96, 165, 250, 0.15) 0px,
        rgba(96, 165, 250, 0.15) 1px,
        transparent 1px,
        transparent 8px,
        rgba(251, 113, 133, 0.15) 8px,
        rgba(251, 113, 133, 0.15) 9px,
        transparent 9px,
        transparent 16px,
        rgba(251, 113, 133, 0.15) 16px,
        rgba(251, 113, 133, 0.15) 17px,
        transparent 17px,
        transparent 24px,
        rgba(96, 165, 250, 0.15) 24px,
        rgba(96, 165, 250, 0.15) 25px,
        transparent 25px,
        transparent 40px
    );
    background-size: 100% 40px;
}

/* 3.8 Topographic Map & Contour Route Lines */
.bg-pattern-map,
.bg-pattern-topography {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%230F2854' stroke-width='1' opacity='0.05'%3E%3Cpath d='M0 40 C60 10, 120 70, 240 30 M0 90 C80 50, 140 120, 240 80 M0 140 C50 170, 160 110, 240 150 M0 190 C70 230, 170 160, 240 210'/%3E%3Ccircle cx='60' cy='110' r='25'/%3E%3Ccircle cx='60' cy='110' r='14'/%3E%3Ccircle cx='180' cy='170' r='30'/%3E%3Ccircle cx='180' cy='170' r='16'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}
.dark .bg-pattern-map,
.dark .bg-pattern-topography {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%2393C5FD' stroke-width='1' opacity='0.07'%3E%3Cpath d='M0 40 C60 10, 120 70, 240 30 M0 90 C80 50, 140 120, 240 80 M0 140 C50 170, 160 110, 240 150 M0 190 C70 230, 170 160, 240 210'/%3E%3Ccircle cx='60' cy='110' r='25'/%3E%3Ccircle cx='60' cy='110' r='14'/%3E%3Ccircle cx='180' cy='170' r='30'/%3E%3Ccircle cx='180' cy='170' r='16'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

/* 3.9 Geographic Atlas & Navigation Waypoints */
.bg-pattern-atlas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%230F2854' stroke-width='0.8' opacity='0.05'%3E%3Ccircle cx='80' cy='80' r='60' stroke-dasharray='3 3'/%3E%3Cpath d='M80 0 v160 M0 80 h160'/%3E%3Ccircle cx='80' cy='80' r='4' fill='%230F2854'/%3E%3Cpath d='M70 70 l20 20 M70 90 l20 -20' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}
.dark .bg-pattern-atlas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%2393C5FD' stroke-width='0.8' opacity='0.07'%3E%3Ccircle cx='80' cy='80' r='60' stroke-dasharray='3 3'/%3E%3Cpath d='M80 0 v160 M0 80 h160'/%3E%3Ccircle cx='80' cy='80' r='4' fill='%2393C5FD'/%3E%3Cpath d='M70 70 l20 20 M70 90 l20 -20' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* 3.10 Science & STEM Honeycomb Hexagon Grid */
.bg-pattern-hex-science {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='84' viewBox='0 0 48 84' fill='none' stroke='%230F2854' stroke-width='0.7' opacity='0.04'%3E%3Cpath d='M24 0 L48 14 L48 42 L24 56 L0 42 L0 14 Z M24 56 L48 70 L48 98 L24 112 L0 98 L0 70 Z'/%3E%3C/svg%3E");
    background-size: 48px 84px;
}
.dark .bg-pattern-hex-science {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='84' viewBox='0 0 48 84' fill='none' stroke='%2393C5FD' stroke-width='0.7' opacity='0.06'%3E%3Cpath d='M24 0 L48 14 L48 42 L24 56 L0 42 L0 14 Z M24 56 L48 70 L48 98 L24 112 L0 98 L0 70 Z'/%3E%3C/svg%3E");
    background-size: 48px 84px;
}

/* 3.11 Constellation & Connected Knowledge Nodes */
.bg-pattern-constellation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='3' fill='%230F2854'/%3E%3Ccircle cx='110' cy='45' r='2' fill='%230F2854'/%3E%3Ccircle cx='150' cy='120' r='3' fill='%230F2854'/%3E%3Ccircle cx='60' cy='140' r='2.5' fill='%230F2854'/%3E%3Cpath d='M30 30 L110 45 L150 120 L60 140 Z M30 30 L60 140' stroke='%230F2854' stroke-width='0.6' stroke-dasharray='2 2'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.dark .bg-pattern-constellation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='3' fill='%2393C5FD'/%3E%3Ccircle cx='110' cy='45' r='2' fill='%2393C5FD'/%3E%3Ccircle cx='150' cy='120' r='3' fill='%2393C5FD'/%3E%3Ccircle cx='60' cy='140' r='2.5' fill='%2393C5FD'/%3E%3Cpath d='M30 30 L110 45 L150 120 L60 140 Z M30 30 L60 140' stroke='%2393C5FD' stroke-width='0.6' stroke-dasharray='2 2'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* 3.12 Heritage Sanskriti & Concentric Wisdom Rings (Ideal for About Us) */
.bg-pattern-heritage-rings,
.bg-pattern-mandala {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none' stroke='%230F2854' stroke-width='0.75' opacity='0.045'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3Ccircle cx='40' cy='40' r='24' stroke-dasharray='2 2'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3Cpath d='M40 0 v80 M0 40 h80 M12 12 l56 56 M12 68 l56 -56' stroke-width='0.4'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}
.dark .bg-pattern-heritage-rings,
.dark .bg-pattern-mandala {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none' stroke='%2393C5FD' stroke-width='0.75' opacity='0.07'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3Ccircle cx='40' cy='40' r='24' stroke-dasharray='2 2'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3Cpath d='M40 0 v80 M0 40 h80 M12 12 l56 56 M12 68 l56 -56' stroke-width='0.4'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* 3.13 Academic Books & Learning Pathways (Ideal for Academics) */
.bg-pattern-academic-books {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%230F2854' stroke-width='0.8' opacity='0.045'%3E%3Cpath d='M16 32 Q32 28 48 32 Q64 28 80 32 v32 Q64 28 48 32 Q32 28 16 32 Z M48 32 v32'/%3E%3Cpath d='M48 16 l12 6 l-12 6 l-12 -6 Z M48 28 v8' stroke-width='0.7'/%3E%3Ccircle cx='48' cy='78' r='2' fill='%230F2854'/%3E%3C/svg%3E");
    background-size: 96px 96px;
}
.dark .bg-pattern-academic-books {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%2393C5FD' stroke-width='0.8' opacity='0.07'%3E%3Cpath d='M16 32 Q32 28 48 32 Q64 28 80 32 v32 Q64 28 48 32 Q32 28 16 32 Z M48 32 v32'/%3E%3Cpath d='M48 16 l12 6 l-12 6 l-12 -6 Z M48 28 v8' stroke-width='0.7'/%3E%3Ccircle cx='48' cy='78' r='2' fill='%2393C5FD'/%3E%3C/svg%3E");
    background-size: 96px 96px;
}

/* 3.14 Festive Celebration & Starburst Confetti (Ideal for Events) */
.bg-pattern-festive-confetti {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='none' opacity='0.045'%3E%3Cpath d='M20 15 l4 8-8-4zm40 10 a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm25 45 l-6 6 6 6 6-6zm-60 15 a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm65-40 l-8-8 3-3 8 8z' fill='%230F2854'/%3E%3Ccircle cx='80' cy='20' r='2.5' fill='%23E5A93C'/%3E%3Ccircle cx='25' cy='70' r='2.5' fill='%2310B981'/%3E%3Cpath d='M50 35 Q55 30 60 35 T70 35' stroke='%230F2854' stroke-width='0.8'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}
.dark .bg-pattern-festive-confetti {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='none' opacity='0.07'%3E%3Cpath d='M20 15 l4 8-8-4zm40 10 a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm25 45 l-6 6 6 6 6-6zm-60 15 a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm65-40 l-8-8 3-3 8 8z' fill='%2393C5FD'/%3E%3Ccircle cx='80' cy='20' r='2.5' fill='%23FBBF24'/%3E%3Ccircle cx='25' cy='70' r='2.5' fill='%2334D399'/%3E%3Cpath d='M50 35 Q55 30 60 35 T70 35' stroke='%2393C5FD' stroke-width='0.8'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

/* 3.15 Camera Aperture & Lens Viewfinder (Ideal for Media Gallery) */
.bg-pattern-camera-shutter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%230F2854' stroke-width='0.75' opacity='0.045'%3E%3Crect x='20' y='20' width='80' height='80' rx='16' stroke-dasharray='4 4'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Cpath d='M60 20 v12 M60 88 v12 M20 60 h12 M88 60 h12 M35 35 l8 8 M77 77 l8 8 M85 35 l-8 8 M35 85 l8 -8' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}
.dark .bg-pattern-camera-shutter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%2393C5FD' stroke-width='0.75' opacity='0.07'%3E%3Crect x='20' y='20' width='80' height='80' rx='16' stroke-dasharray='4 4'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Cpath d='M60 20 v12 M60 88 v12 M20 60 h12 M88 60 h12 M35 35 l8 8 M77 77 l8 8 M85 35 l-8 8 M35 85 l8 -8' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}

/* ====================================================
   3.B ANIMATED BACKGROUND PATTERN UTILITIES
   Can be combined with any static pattern class
   e.g. class="bg-pattern-grid bg-pattern-animated-drift"
   ==================================================== */

/* Smooth infinite diagonal drift */
@keyframes pattern-drift {
    0% { background-position: 0 0; }
    100% { background-position: 240px 240px; }
}
.bg-pattern-animated-grid {
    animation: pattern-drift 40s linear infinite;
}
.bg-pattern-animated-dots {
    animation: pattern-drift 48s linear infinite;
}

/* Smooth horizontal panning (Ideal for Map, Topography, Atlas) */
@keyframes pattern-pan-x {
    0% { background-position-x: 0; }
    100% { background-position-x: 240px; }
}
.bg-pattern-animated-map,
.bg-pattern-animated-topography {
    animation: pattern-pan-x 50s linear infinite;
}

/* Smooth vertical panning (Ideal for Copybook & Notebook paper) */
@keyframes pattern-pan-y {
    0% { background-position-y: 0; }
    100% { background-position-y: 280px; }
}
.bg-pattern-animated-copybook {
    animation: pattern-pan-y 60s linear infinite;
}

/* Shimmer sweep effect across card borders or hero headers */
@keyframes shimmer-sweep {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bg-pattern-animated-grid,
    .bg-pattern-animated-dots,
    .bg-pattern-animated-map,
    .bg-pattern-animated-topography,
    .bg-pattern-animated-copybook,
    .animate-shimmer {
        animation: none !important;
    }
}

/* ====================================================
   4. SMOOTH AMBIENT MICRO-ANIMATIONS
   ==================================================== */

/* Gentle floating bob for badge icons */
@keyframes gentle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.animate-float {
    animation: gentle-float 4s ease-in-out infinite;
}
.animate-float-delayed {
    animation: gentle-float 4s ease-in-out infinite 2s;
}

/* Subtle breathing aura glow for cards */
@keyframes aura-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}
.animate-aura {
    animation: aura-pulse 5s ease-in-out infinite;
}

/* Marquee ticker animation */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.animate-ticker,
.animate-marquee {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker 25s linear infinite;
}
.animate-ticker:hover,
.animate-marquee:hover {
    animation-play-state: paused;
}

/* Twinkling constellation animations */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 0.9; transform: scale(1.2); }
}
.star-twinkle-1 { animation: twinkle 3.5s ease-in-out infinite; }
.star-twinkle-2 { animation: twinkle 4.8s ease-in-out infinite 1.2s; }
.star-twinkle-3 { animation: twinkle 5.5s ease-in-out infinite 2.4s; }

/* 5. Ultra-Glossy Transparent Floating Banner Announcement Bar */
.glass-banner-announcement {
    background: rgba(10, 18, 36, 0.55);
    backdrop-filter: blur(20px) saturate(190%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 
        0 12px 36px -4px rgba(0, 0, 0, 0.4),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.glass-banner-announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.ticker-mask-fade {
    mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

/* ====================================================
   6. VIBRANT & GLOSSY NAVIGATION HEADER
   ==================================================== */
.main-nav-header {
    background: var(--bg-header);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-default);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
    position: relative;
}

/* Vibrant iridescent animated top accent line */
.main-nav-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, 
        #1D4ED8 0%, 
        #3B82F6 22%, 
        #E5A93C 50%, 
        #38BDF8 78%, 
        #1D4ED8 100%
    );
    background-size: 200% 100%;
    animation: header-shimmer 7s linear infinite;
    z-index: 50;
}

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

/* Glossy Glassmorphic state applied dynamically on scroll */
.main-nav-header.is-scrolled {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(22px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(190%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 14px 34px -4px rgba(15, 40, 84, 0.12),
        0 4px 12px -2px rgba(15, 40, 84, 0.05),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 0 rgba(226, 232, 240, 0.6) !important;
}

.dark .main-nav-header.is-scrolled {
    background: rgba(8, 13, 26, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 
        0 18px 40px -4px rgba(0, 0, 0, 0.7),
        0 4px 16px -2px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.5) !important;
}

/* Specular reflection line underneath shimmer bar when scrolled */
.main-nav-header.is-scrolled::after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 25%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.7) 75%, transparent);
    pointer-events: none;
}
.dark .main-nav-header.is-scrolled::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.1) 75%, transparent);
}

/* Vibrant nav link pills */
.nav-link-vibrant {
    position: relative;
    padding: 0.4rem 0.65rem;
    border-radius: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link-vibrant:hover {
    color: #1D4ED8;
    background: rgba(37, 99, 235, 0.08);
}
.dark .nav-link-vibrant:hover {
    color: #60A5FA;
    background: rgba(59, 130, 246, 0.14);
}

/* Premium Apply Now CTA Button (Heritage Crimson) */
.btn-apply-vibrant {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--crest-crimson, #C72228) 0%, #A8181D 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px -1px rgba(199, 34, 40, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-apply-vibrant:hover {
    background: linear-gradient(135deg, #DC2626 0%, var(--crest-crimson, #C72228) 100%);
    box-shadow: 0 4px 14px 0 rgba(199, 34, 40, 0.45);
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.btn-apply-vibrant:active {
    transform: translateY(0.5px);
    box-shadow: 0 1px 4px 0 rgba(199, 34, 40, 0.25);
}

.dark .btn-apply-vibrant {
    background: linear-gradient(135deg, #C72228 0%, #991B1B 100%);
    border-color: rgba(248, 113, 113, 0.25);
    box-shadow: 0 2px 10px 0 rgba(199, 34, 40, 0.4);
}

.dark .btn-apply-vibrant:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    box-shadow: 0 4px 16px 0 rgba(220, 38, 38, 0.5);
}

/* ======================================================== */
/* FrontRoot Shiny Animated Badge with Border Animation     */
/* ======================================================== */
.badge-frontroot-shiny {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    text-decoration: none;
    overflow: hidden;
    background: #090e1f;
    box-shadow: 0 2px 14px 0 rgba(99, 102, 241, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Continuously rotating border gradient */
.badge-frontroot-shiny::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #3b82f6 0deg,
        #8b5cf6 72deg,
        #ec4899 144deg,
        #f59e0b 216deg,
        #10b981 288deg,
        #3b82f6 360deg
    );
    animation: rotate-frontroot-border 4s linear infinite;
    z-index: 0;
}

/* Inner dark mask to leave a crisp 1.5px glowing animated border */
.badge-frontroot-shiny::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    border-radius: 9999px;
    background: #080d1e;
    z-index: 1;
    transition: background 0.3s ease;
}

.badge-frontroot-shiny > * {
    position: relative;
    z-index: 2;
}

/* Sweeping shiny light glare across the badge */
.badge-frontroot-shiny .shine-overlay {
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    pointer-events: none;
    animation: frontroot-shine-sweep 3.5s infinite ease-in-out;
    z-index: 3;
}

@keyframes rotate-frontroot-border {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes frontroot-shine-sweep {
    0% {
        left: -150%;
    }
    25% {
        left: 170%;
    }
    100% {
        left: 170%;
    }
}

.badge-frontroot-shiny:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 22px 2px rgba(139, 92, 246, 0.5);
}

.badge-frontroot-shiny:hover::after {
    background: #0f172a;
}

.badge-frontroot-shiny:active {
    transform: translateY(0) scale(0.98);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}