/* ==============================================
   AEROFIELD ACADEMY — INTRODUCTION PAGE
   First page of the Academy. Single viewport.
   CIC overview + 12 Vidyāsthāna tiles sequenced.
   ============================================== */


/* ── Theme ──────────────────────────────────────────────────────────── */
:root {
    --intro-gold:      #d4a04a;
    --intro-gold-dim:  #b8862e;
    --intro-glow:      rgba(212, 160, 74, 0.15);
    --intro-bg-tint:   rgba(212, 160, 74, 0.04);
    --intro-border:    rgba(212, 160, 74, 0.10);
    --intro-crimson:   #dc3c3c;
}


/* ── Viewport Lock ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
}


/* ── Backgrounds ────────────────────────────────────────────────────── */
.intro-bg-void {
    position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 120% 80% at 50% 50%, #0a0a0f 0%, #060608 100%);
}

.intro-bg-grid {
    position: fixed; inset: 0; z-index: 0;
    opacity: 0.018; pointer-events: none;
    background-image:
        linear-gradient(rgba(212,160,74,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,160,74,0.3) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: introGridDrift 60s linear infinite;
}

.intro-bg-glow {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 30% 40% at 15% 50%, rgba(220,60,60,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 85% 50%, rgba(212,160,74,0.03) 0%, transparent 70%);
    animation: introGlowDrift 20s ease-in-out infinite alternate;
}

canvas.intro-particles {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
}


/* ── Navbar ──────────────────────────────────────────────────────────── */
.intro-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--navbar-height);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(16px, 3vw, 48px);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--intro-border);
}

.intro-nav-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
}

.intro-logo-icon {
    width: 32px; height: 32px; border-radius: 7px;
    background: linear-gradient(135deg, var(--intro-gold) 0%, var(--intro-gold-dim) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 12px var(--intro-glow);
    padding: 6px;
}
.intro-logo-icon svg { width: 20px; height: 20px; }

.intro-logo-text {
    font-family: var(--font-display);
    font-weight: 700; font-size: 15px; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--intro-gold) 0%, var(--intro-gold-dim) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.intro-nav-center {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}

.intro-nav-title {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; letter-spacing: 3px;
    color: var(--intro-gold);
}

.intro-nav-status { display: flex; align-items: center; gap: 6px; }

.intro-status-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--intro-gold);
    box-shadow: 0 0 6px var(--intro-gold);
    animation: introDotPulse 2s ease-in-out infinite;
}

.intro-nav-sub {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: 9px; font-weight: 400;
    letter-spacing: 2px; color: var(--text-muted);
}

.intro-nav-controls { display: flex; align-items: center; gap: 8px; }

.intro-btn {
    font-family: var(--font-ui); font-size: 10px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    text-decoration: none;
    padding: 5px 12px; border-radius: 6px;
    border: 1px solid var(--intro-border);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; transition: all 0.25s ease;
}

.intro-btn:hover {
    color: var(--intro-gold);
    border-color: rgba(212,160,74,0.25);
    background: var(--intro-bg-tint);
}


/* ══════════════════════════════════════════════════════════════════════
   MAIN LAYOUT — Left (CIC) : Right (Tiles + Quote)
   ══════════════════════════════════════════════════════════════════════ */
.intro-split {
    position: relative; z-index: 1;
    display: flex;
    height: calc(100vh - var(--navbar-height));
    margin-top: var(--navbar-height);
}


/* ── LEFT PANEL — CIC Identity ───────────────────────────────────────── */
.intro-left {
    flex: 0 0 28%;
    max-width: 28%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: clamp(12px, 1.5vh, 24px) clamp(12px, 1.5vw, 24px);
    border-right: 1px solid var(--intro-border);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Crimson vertical accent */
.intro-left::after {
    content: '';
    position: absolute; top: 12%; bottom: 12%; right: -1px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--intro-crimson), transparent);
    animation: introAccentPulse 6s ease-in-out infinite;
}


/* ── Avatar ──────────────────────────────────────────────────────────── */
.intro-avatar-wrap {
    position: relative;
    width: clamp(80px, 8vw, 120px);
    aspect-ratio: 1;
    margin-bottom: clamp(8px, 1vh, 14px);
}

.intro-avatar-ring {
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(220,60,60,0.18);
    animation: introRingPulse 4s ease-in-out infinite, introRingSine 6s ease-in-out infinite;
}

.intro-avatar-ring--outer {
    inset: -14px;
    border-color: rgba(220,60,60,0.07);
    animation-delay: -2s;
}

.intro-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(220,60,60,0.25);
    box-shadow: 0 0 20px rgba(220,60,60,0.1);
    filter: grayscale(0.1) contrast(1.05);
    animation: introSineGlow 4s ease-in-out infinite;
}

.intro-avatar-badge {
    position: absolute; bottom: -2px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-ui);
    font-size: 7px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: #0a0a0f;
    background: var(--intro-crimson);
    padding: 2px 8px;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(220,60,60,0.2);
    animation: introBadgeBlink 4s ease-in-out infinite;
}


/* ── CIC Identity ────────────────────────────────────────────────────── */
.intro-cic-name {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.5vw, 22px);
    font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.intro-cic-title {
    font-family: var(--font-ui);
    font-size: clamp(7px, 0.6vw, 10px);
    font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--intro-crimson);
    margin-bottom: clamp(6px, 1vh, 12px);
}

.intro-cic-clearance {
    font-family: var(--font-ui);
    font-size: clamp(6px, 0.5vw, 8px);
    font-weight: 500; letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 3px 12px;
    border: 1px solid rgba(220,60,60,0.1);
    border-radius: var(--radius-pill);
    margin-bottom: clamp(8px, 1.2vh, 14px);
}


/* ── Motive Block ────────────────────────────────────────────────────── */
.intro-motive {
    max-width: 90%;
    border-left: 2px solid rgba(220,60,60,0.25);
    padding: clamp(6px, 0.7vh, 10px) clamp(8px, 0.8vw, 12px);
    background: rgba(220,60,60,0.03);
    border-radius: 0 8px 8px 0;
    text-align: left;
    margin-bottom: clamp(8px, 1vh, 14px);
}

.intro-motive p {
    font-family: var(--font-body);
    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 300; line-height: 1.6;
    color: var(--text-secondary);
}

.intro-motive strong {
    font-weight: 600;
    color: var(--intro-crimson);
}


/* ── Oath ─────────────────────────────────────────────────────────────── */
.intro-oath {
    max-width: 90%;
    margin-top: auto;
    padding-top: clamp(6px, 0.8vh, 10px);
    border-top: 1px solid var(--intro-border);
}

.intro-oath-sanskrit {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(9px, 0.8vw, 13px);
    font-weight: 400;
    color: var(--intro-crimson);
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-shadow: 0 0 16px rgba(220,60,60,0.12);
    margin-bottom: 3px;
    animation: introOathGlow 5s ease-in-out infinite;
}

.intro-oath-en {
    font-family: var(--font-body);
    font-size: clamp(7px, 0.52vw, 9px);
    font-weight: 300;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 3px;
}

.intro-oath-src {
    font-family: var(--font-ui);
    font-size: 6px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(220,60,60,0.3);
}


/* ── Cadet Entry ─────────────────────────────────────────────────────── */
.intro-cadet {
    max-width: 90%;
    width: 90%;
    margin-top: clamp(6px, 1vh, 12px);
    padding: clamp(8px, 1vh, 14px) clamp(10px, 1vw, 16px);
    border: 1px solid rgba(212,160,74,0.12);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(212,160,74,0.04) 0%, rgba(220,60,60,0.02) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s;
}

.intro-cadet:hover {
    border-color: rgba(212,160,74,0.30);
    box-shadow: 0 4px 24px rgba(212,160,74,0.08);
}

/* Top accent line */
.intro-cadet::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--intro-gold), transparent);
    animation: introCadetLinePulse 4s ease-in-out infinite;
}

/* Bottom accent line */
.intro-cadet::after {
    content: '';
    position: absolute; bottom: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,160,74,0.2), transparent);
    animation: introCadetLinePulse 4s ease-in-out infinite;
    animation-delay: 2s;
}

.intro-cadet-sanskrit {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(10px, 0.9vw, 15px);
    font-weight: 500;
    color: var(--intro-gold);
    text-shadow: 0 0 14px var(--intro-glow);
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 2px;
    animation: introCadetSanskritGlow 5s ease-in-out infinite;
}

.intro-cadet-label {
    font-family: var(--font-display);
    font-size: clamp(8px, 0.7vw, 12px);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: clamp(4px, 0.6vh, 8px);
}

.intro-cadet-sub {
    font-family: var(--font-body);
    font-size: clamp(6px, 0.48vw, 8px);
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: clamp(6px, 0.8vh, 10px);
}

.intro-cadet-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--intro-gold);
    padding: clamp(4px, 0.5vh, 7px) clamp(10px, 1vw, 18px);
    border: 1px solid rgba(212,160,74,0.20);
    border-radius: 6px;
    background: rgba(212,160,74,0.04);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: introCadetBtnPulse 3s ease-in-out infinite;
}

.intro-cadet-btn:hover {
    background: rgba(212,160,74,0.10);
    border-color: rgba(212,160,74,0.40);
    box-shadow: 0 0 16px rgba(212,160,74,0.10);
    color: var(--text-primary);
    animation-play-state: paused;
}

.intro-cadet-verse {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(7px, 0.55vw, 9px);
    font-weight: 400;
    color: rgba(212,160,74,0.35);
    margin-top: clamp(4px, 0.6vh, 8px);
    letter-spacing: 0.5px;
    line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════════════════
   RIGHT PANEL — Header + Vedic Strip + 12 Tiles + Footer
   ══════════════════════════════════════════════════════════════════════ */
.intro-right {
    flex: 1;
    overflow: hidden;
    padding: clamp(10px, 1.5vh, 20px) clamp(14px, 2vw, 32px);
    display: flex; flex-direction: column;
    gap: clamp(6px, 0.8vh, 12px);
}


/* ── Header ──────────────────────────────────────────────────────────── */
.intro-header {
    display: flex;
    align-items: baseline;
    gap: clamp(8px, 1vw, 16px);
}

.intro-heading {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.4vw, 22px);
    font-weight: 700; letter-spacing: 2px;
    color: var(--text-primary);
    white-space: nowrap;
}

.intro-heading-sub {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(10px, 0.9vw, 14px);
    font-weight: 400;
    color: var(--intro-gold);
    letter-spacing: 1px;
}

.intro-heading-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--intro-border), transparent);
    position: relative;
    overflow: hidden;
}

.intro-heading-line::after {
    content: '';
    position: absolute; top: 0; left: -40px;
    width: 40px; height: 100%;
    background: linear-gradient(90deg, transparent, var(--intro-gold), transparent);
    animation: introHeadScan 4s ease-in-out infinite;
}


/* ── Epigraph ────────────────────────────────────────────────────────── */
.intro-epigraph {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 14px);
    padding: clamp(5px, 0.6vh, 8px) clamp(8px, 0.8vw, 14px);
    background: var(--intro-bg-tint);
    border: 1px solid var(--intro-border);
    border-radius: 8px;
}

.intro-epigraph-bija {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(16px, 1.6vw, 26px);
    font-weight: 500;
    color: var(--intro-gold);
    text-shadow: 0 0 16px var(--intro-glow);
    line-height: 1;
    flex-shrink: 0;
    animation: introOmPulse 5s ease-in-out infinite;
}

.intro-epigraph-body { flex: 1; min-width: 0; }

.intro-epigraph-text {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(9px, 0.75vw, 12px);
    font-weight: 400;
    color: var(--intro-gold);
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 2px;
}

.intro-epigraph-src {
    font-family: var(--font-ui);
    font-size: 7px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Section Label ───────────────────────────────────────────────────── */
.intro-section-label {
    font-family: var(--font-ui);
    font-size: clamp(7px, 0.5vw, 9px);
    font-weight: 600; letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--intro-gold-dim);
    background: linear-gradient(90deg, var(--intro-gold-dim) 40%, var(--intro-gold) 50%, var(--intro-gold-dim) 60%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: introTextShimmer 6s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════════════════
   TILE GRID — 12 Vidyāsthāna in optimistic sequence
   ══════════════════════════════════════════════════════════════════════ */
.intro-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(4px, 0.5vw, 8px);
    flex: 1;
    min-height: 0;
}

.intro-tile {
    border: 1px solid var(--intro-border);
    border-radius: 8px;
    background: rgba(16,16,24,0.5);
    padding: clamp(5px, 0.6vh, 8px) clamp(5px, 0.5vw, 8px);
    display: flex; flex-direction: column;
    gap: 3px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.intro-tile:hover {
    transform: translateY(-1px);
    border-color: var(--intro-gold-dim);
    box-shadow: 0 4px 20px rgba(212,160,74,0.08);
}

/* Tile head — icon + name row */
.intro-tile-head {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.4vw, 7px);
}

.intro-tile-identity {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Tile number badge */
.intro-tile-num {
    font-family: var(--font-ui);
    font-size: clamp(5px, 0.38vw, 7px);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-muted);
    opacity: 0.45;
    flex-shrink: 0;
}

.intro-tile-icon {
    font-size: clamp(11px, 0.85vw, 15px);
    color: var(--intro-gold);
    filter: drop-shadow(0 0 4px var(--intro-glow));
    line-height: 1;
    flex-shrink: 0;
    animation: introIconBreathe 4s ease-in-out infinite;
}

.intro-tile-sanskrit {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(8px, 0.65vw, 11px);
    font-weight: 500;
    color: var(--intro-gold);
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.intro-tile-name {
    font-family: var(--font-display);
    font-size: clamp(6px, 0.5vw, 9px);
    font-weight: 600; letter-spacing: 1px;
    color: var(--text-primary);
    line-height: 1.1;
}

/* Subject tag list */
.intro-tile-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: auto;
}

.intro-tile-subjects span {
    font-family: var(--font-ui);
    font-size: clamp(5px, 0.38vw, 7px);
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    background: rgba(212,160,74,0.04);
    border: 1px solid rgba(212,160,74,0.08);
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.intro-tile:hover .intro-tile-subjects span {
    border-color: rgba(212,160,74,0.18);
    background: rgba(212,160,74,0.07);
    color: rgba(232,228,220,0.85);
}

/* Tile glow on hover — subtle colored edge */
.intro-tile::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--intro-gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.intro-tile:hover::before { opacity: 1; }


/* ── Bottom Vedic Strip ──────────────────────────────────────────────── */
.intro-bottom-vedic {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 14px);
    padding: clamp(4px, 0.5vh, 7px) clamp(8px, 0.8vw, 14px);
    background: rgba(212,160,74,0.02);
    border: 1px solid rgba(212,160,74,0.06);
    border-radius: 6px;
}

.intro-bottom-vedic-char {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(14px, 1.4vw, 22px);
    font-weight: 500;
    color: var(--intro-gold);
    text-shadow: 0 0 12px var(--intro-glow);
    line-height: 1;
    flex-shrink: 0;
    animation: introVedicCharPulse 6s ease-in-out infinite;
}

.intro-bottom-vedic-body { flex: 1; }

.intro-bottom-vedic-text {
    font-family: 'Noto Sans Devanagari', serif;
    font-size: clamp(8px, 0.65vw, 11px);
    font-weight: 400;
    color: var(--intro-gold);
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 1px;
}

.intro-bottom-vedic-src {
    font-family: var(--font-ui);
    font-size: 6px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted);
}


/* ── Footer Strip ────────────────────────────────────────────────────── */
.intro-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: clamp(3px, 0.4vh, 6px);
    border-top: 1px solid var(--intro-border);
}

.intro-footer-text {
    font-family: var(--font-ui);
    font-size: 8px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted);
}

.intro-footer-text a {
    color: var(--intro-gold-dim);
    text-decoration: none;
    transition: color 0.3s;
}

.intro-footer-text a:hover { color: var(--intro-gold); }

.intro-footer-label {
    font-family: var(--font-ui);
    font-size: 7px; font-weight: 700;
    letter-spacing: 3px;
    color: var(--intro-gold-dim);
    opacity: 0.4;
}


/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes introDotPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--intro-gold); }
    50%      { opacity: 0.4; box-shadow: 0 0 2px var(--intro-gold); }
}

@keyframes introRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.04); opacity: 0.2; }
}

@keyframes introSineGlow {
    0%   { box-shadow: 0 0 12px rgba(220,60,60,0.10), 0 0 24px rgba(220,60,60,0.04); }
    25%  { box-shadow: 0 0 22px rgba(220,60,60,0.30), 0 0 44px rgba(220,60,60,0.12), 0 0 6px rgba(212,160,74,0.06); }
    50%  { box-shadow: 0 0 32px rgba(220,60,60,0.45), 0 0 60px rgba(220,60,60,0.18), 0 0 10px rgba(212,160,74,0.10); }
    75%  { box-shadow: 0 0 22px rgba(220,60,60,0.30), 0 0 44px rgba(220,60,60,0.12), 0 0 6px rgba(212,160,74,0.06); }
    100% { box-shadow: 0 0 12px rgba(220,60,60,0.10), 0 0 24px rgba(220,60,60,0.04); }
}

@keyframes introRingSine {
    0%   { border-color: rgba(220,60,60,0.10); transform: scale(1) rotate(0deg); }
    25%  { border-color: rgba(220,60,60,0.28); transform: scale(1.02) rotate(4deg); }
    50%  { border-color: rgba(220,60,60,0.40); transform: scale(1.05) rotate(0deg); }
    75%  { border-color: rgba(220,60,60,0.28); transform: scale(1.02) rotate(-4deg); }
    100% { border-color: rgba(220,60,60,0.10); transform: scale(1) rotate(0deg); }
}

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

.intro-fade { animation: introFadeUp 0.5s ease-out both; }
.intro-fd1 { animation-delay: 0.04s; }
.intro-fd2 { animation-delay: 0.08s; }
.intro-fd3 { animation-delay: 0.12s; }
.intro-fd4 { animation-delay: 0.16s; }
.intro-fd5 { animation-delay: 0.20s; }
.intro-fd6 { animation-delay: 0.24s; }
.intro-fd7 { animation-delay: 0.28s; }
.intro-fd8 { animation-delay: 0.32s; }
.intro-fd9 { animation-delay: 0.36s; }
.intro-fd10 { animation-delay: 0.40s; }
.intro-fd11 { animation-delay: 0.44s; }
.intro-fd12 { animation-delay: 0.48s; }
.intro-fd13 { animation-delay: 0.52s; }
.intro-fd14 { animation-delay: 0.56s; }
.intro-fd15 { animation-delay: 0.60s; }
.intro-fd16 { animation-delay: 0.64s; }

/* Tile stagger — separate from global fade for the grid */
.intro-tiles .intro-tile:nth-child(1)  { animation-delay: 0.18s; }
.intro-tiles .intro-tile:nth-child(2)  { animation-delay: 0.22s; }
.intro-tiles .intro-tile:nth-child(3)  { animation-delay: 0.26s; }
.intro-tiles .intro-tile:nth-child(4)  { animation-delay: 0.30s; }
.intro-tiles .intro-tile:nth-child(5)  { animation-delay: 0.34s; }
.intro-tiles .intro-tile:nth-child(6)  { animation-delay: 0.38s; }
.intro-tiles .intro-tile:nth-child(7)  { animation-delay: 0.42s; }
.intro-tiles .intro-tile:nth-child(8)  { animation-delay: 0.46s; }
.intro-tiles .intro-tile:nth-child(9)  { animation-delay: 0.50s; }
.intro-tiles .intro-tile:nth-child(10) { animation-delay: 0.54s; }
.intro-tiles .intro-tile:nth-child(11) { animation-delay: 0.58s; }
.intro-tiles .intro-tile:nth-child(12) { animation-delay: 0.62s; }


/* ══════════════════════════════════════════════════════════════════════
   ADVANCED LIVE ANIMATIONS — @keyframes
   ══════════════════════════════════════════════════════════════════════ */

/* Grid — slow diagonal drift */
@keyframes introGridDrift {
    from { background-position: 0 0; }
    to   { background-position: 80px 80px; }
}

/* Background glow — slow parallax shift */
@keyframes introGlowDrift {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(1.5%, -1%); }
}

/* Tile icon — gentle breathe */
@keyframes introIconBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}

/* Om / Bija symbol — radiant pulse */
@keyframes introOmPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 16px var(--intro-glow); }
    50%      { transform: scale(1.1); text-shadow: 0 0 32px var(--intro-glow), 0 0 64px rgba(212,160,74,0.12); }
}

/* Heading line — scanner sweep */
@keyframes introHeadScan {
    0%   { left: -40px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Left crimson accent — breathing opacity */
@keyframes introAccentPulse {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.6; }
}

/* Avatar badge — subtle status blink */
@keyframes introBadgeBlink {
    0%, 85%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(220,60,60,0.2); }
    92%           { opacity: 0.35; box-shadow: 0 0 2px rgba(220,60,60,0.1); }
}

/* Oath text — crimson glow breathe */
@keyframes introOathGlow {
    0%, 100% { text-shadow: 0 0 16px rgba(220,60,60,0.12); }
    50%      { text-shadow: 0 0 26px rgba(220,60,60,0.28), 0 0 44px rgba(220,60,60,0.08); }
}

/* Cadet sanskrit — gold glow breathe */
@keyframes introCadetSanskritGlow {
    0%, 100% { text-shadow: 0 0 14px var(--intro-glow); }
    50%      { text-shadow: 0 0 24px var(--intro-glow), 0 0 40px rgba(212,160,74,0.10); }
}

/* Cadet accent lines — width + opacity pulse */
@keyframes introCadetLinePulse {
    0%, 100% { opacity: 0.3; left: 25%; right: 25%; }
    50%      { opacity: 0.85; left: 10%; right: 10%; }
}

/* Cadet button — ring pulse */
@keyframes introCadetBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,74,0); }
    50%      { box-shadow: 0 0 0 4px rgba(212,160,74,0.06); }
}

/* Bottom vedic char — scale + glow */
@keyframes introVedicCharPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 12px var(--intro-glow); }
    50%      { transform: scale(1.06); text-shadow: 0 0 24px var(--intro-glow), 0 0 40px rgba(212,160,74,0.08); }
}

/* Section label — gold shimmer across text */
@keyframes introTextShimmer {
    0%   { background-position: 200% 0; }
    50%  { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Tile shimmer — diagonal light ribbon sweep */
@keyframes introTileShimmer {
    0%        { left: -50%; opacity: 0; }
    5%        { opacity: 1; }
    35%       { opacity: 1; }
    40%, 100% { left: 150%; opacity: 0; }
}

/* Tile hover border orbit — top edge glow chase */
@keyframes introTileBorderChase {
    0%   { left: -30%; }
    100% { left: 130%; }
}


/* ══════════════════════════════════════════════════════════════════════
   TILE SHIMMER + HOVER EFFECTS
   ══════════════════════════════════════════════════════════════════════ */

/* Continuous diagonal shimmer ribbon on each tile */
.intro-tile::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 35%; left: -50%;
    background: linear-gradient(105deg,
        transparent 20%,
        rgba(212,160,74,0.03) 40%,
        rgba(212,160,74,0.07) 50%,
        rgba(212,160,74,0.03) 60%,
        transparent 80%);
    transform: skewX(-12deg);
    animation: introTileShimmer 12s ease-in-out infinite;
    pointer-events: none;
}

/* Shimmer stagger — each tile sweeps at a different time */
.intro-tiles .intro-tile:nth-child(1)::after  { animation-delay: 0s; }
.intro-tiles .intro-tile:nth-child(2)::after  { animation-delay: 0.9s; }
.intro-tiles .intro-tile:nth-child(3)::after  { animation-delay: 1.8s; }
.intro-tiles .intro-tile:nth-child(4)::after  { animation-delay: 2.7s; }
.intro-tiles .intro-tile:nth-child(5)::after  { animation-delay: 3.6s; }
.intro-tiles .intro-tile:nth-child(6)::after  { animation-delay: 4.5s; }
.intro-tiles .intro-tile:nth-child(7)::after  { animation-delay: 5.4s; }
.intro-tiles .intro-tile:nth-child(8)::after  { animation-delay: 6.3s; }
.intro-tiles .intro-tile:nth-child(9)::after  { animation-delay: 7.2s; }
.intro-tiles .intro-tile:nth-child(10)::after { animation-delay: 8.1s; }
.intro-tiles .intro-tile:nth-child(11)::after { animation-delay: 9.0s; }
.intro-tiles .intro-tile:nth-child(12)::after { animation-delay: 9.9s; }

/* Icon breathe stagger — offset odds vs evens */
.intro-tiles .intro-tile:nth-child(odd)  .intro-tile-icon { animation-delay: 0s; }
.intro-tiles .intro-tile:nth-child(even) .intro-tile-icon { animation-delay: 2s; }

/* Hover — intensify icon */
.intro-tile:hover .intro-tile-icon {
    filter: drop-shadow(0 0 10px var(--intro-glow)) brightness(1.25);
    animation-duration: 1.5s;
}

/* Hover — tile number lights up */
.intro-tile:hover .intro-tile-num {
    color: var(--intro-gold);
    opacity: 0.8;
    transition: all 0.3s;
}

/* Hover — sanskrit text glows */
.intro-tile:hover .intro-tile-sanskrit {
    text-shadow: 0 0 12px var(--intro-glow);
    transition: text-shadow 0.3s;
}

/* Hover — shimmer accelerates */
.intro-tile:hover::after {
    animation-duration: 2s;
}

/* Hover — top gold edge (existing ::before) brightens */
.intro-tile:hover::before { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════
   EPIGRAPH BORDER GLOW
   ══════════════════════════════════════════════════════════════════════ */
.intro-epigraph {
    animation: introEpigraphGlow 8s ease-in-out infinite;
}

@keyframes introEpigraphGlow {
    0%, 100% { border-color: var(--intro-border); box-shadow: none; }
    50%      { border-color: rgba(212,160,74,0.18); box-shadow: 0 0 20px rgba(212,160,74,0.04); }
}


/* ══════════════════════════════════════════════════════════════════════
   BOTTOM VEDIC STRIP GLOW
   ══════════════════════════════════════════════════════════════════════ */
.intro-bottom-vedic {
    animation: introBottomVedicGlow 10s ease-in-out infinite;
}

@keyframes introBottomVedicGlow {
    0%, 100% { border-color: rgba(212,160,74,0.06); }
    50%      { border-color: rgba(212,160,74,0.16); box-shadow: 0 0 16px rgba(212,160,74,0.03); }
}


/* ══════════════════════════════════════════════════════════════════════
   CADET ENTRY CORNER SPARKLES — rotating dots
   ══════════════════════════════════════════════════════════════════════ */
.intro-cadet-btn .ci {
    animation: introCadetIconSpin 6s linear infinite;
}

@keyframes introCadetIconSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════════
   THEMED TILE ANIMATIONS — Per Vidyāsthāna inner elements
   (Follows Academy Mahabhuta card pattern: unique CSS physics per tile)
   ══════════════════════════════════════════════════════════════════════ */

/* Base animation container — sits behind tile content */
.intro-tile-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Content layers rendered above animations */
.intro-tile-head,
.intro-tile-subjects { position: relative; z-index: 1; }


/* ─── 01 KĀYA (Body · Crimson) — Heartbeat pulse ────────────────── */
.intro-tile--kaya { border-color: rgba(220,60,60,0.12); }
.intro-tile--kaya:hover { border-color: rgba(220,60,60,0.30); box-shadow: 0 4px 24px rgba(220,60,60,0.08); }
.intro-tile--kaya .intro-tile-icon { color: #dc3c3c; filter: drop-shadow(0 0 4px rgba(220,60,60,0.3)); }
.intro-tile--kaya .intro-tile-sanskrit { color: rgba(220,60,60,0.85); }

.kaya-core {
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle, rgba(220,60,60,0.20) 0%, transparent 70%);
    position: absolute;
    animation: kayaPulse 1.8s ease-in-out infinite;
}

.kaya-ring {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(220,60,60,0.12);
    position: absolute;
    animation: kayaExpand 2.4s ease-out infinite;
}

.kaya-ring--2 { animation-delay: -1.2s; }

@keyframes kayaPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.3); opacity: 1; }
}

@keyframes kayaExpand {
    0%   { transform: scale(0.5); opacity: 0.5; }
    100% { transform: scale(2.8); opacity: 0; }
}


/* ─── 02 ŚABDA (Sound · Blue) — Concentric sound waves ──────────── */
.intro-tile--shabda { border-color: rgba(80,140,255,0.12); }
.intro-tile--shabda:hover { border-color: rgba(80,140,255,0.30); box-shadow: 0 4px 24px rgba(80,140,255,0.08); }
.intro-tile--shabda .intro-tile-icon { color: #508cff; filter: drop-shadow(0 0 4px rgba(80,140,255,0.3)); }
.intro-tile--shabda .intro-tile-sanskrit { color: rgba(80,140,255,0.85); }

.shabda-wave {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(80,140,255,0.12);
    position: absolute;
    animation: shabdaExpand 3s ease-out infinite;
}

.shabda-wave--2 { animation-delay: -1s; }
.shabda-wave--3 { animation-delay: -2s; }

@keyframes shabdaExpand {
    0%   { transform: scale(0.3); opacity: 0.5; border-width: 1.5px; }
    100% { transform: scale(3.5); opacity: 0; border-width: 0.3px; }
}


/* ─── 03 HETU (Reasoning · Teal) — Neural network nodes ─────────── */
.intro-tile--hetu { border-color: rgba(45,212,168,0.12); }
.intro-tile--hetu:hover { border-color: rgba(45,212,168,0.30); box-shadow: 0 4px 24px rgba(45,212,168,0.08); }
.intro-tile--hetu .intro-tile-icon { color: #2dd4a8; filter: drop-shadow(0 0 4px rgba(45,212,168,0.3)); }
.intro-tile--hetu .intro-tile-sanskrit { color: rgba(45,212,168,0.85); }

.hetu-node {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(45,212,168,0.50);
    position: absolute;
    box-shadow: 0 0 6px rgba(45,212,168,0.25);
    animation: hetuFloat 5s ease-in-out infinite;
}

.hetu-node:nth-child(1) { top: 30%; left: 25%; }
.hetu-node--2 { top: 55%; left: 70%; animation-delay: -1.8s; }
.hetu-node--3 { top: 40%; left: 48%; animation-delay: -3.5s; animation-duration: 4s; }

.hetu-link {
    height: 1px; width: 30%;
    background: linear-gradient(90deg, transparent, rgba(45,212,168,0.10), transparent);
    position: absolute; top: 42%; left: 25%;
    transform: rotate(20deg);
    animation: hetuLinkPulse 4s ease-in-out infinite;
}

.hetu-link--2 { top: 48%; left: 45%; transform: rotate(-18deg); animation-delay: -2s; }

@keyframes hetuFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.4; }
    50%      { transform: translate(3px, -3px); opacity: 1; }
}

@keyframes hetuLinkPulse {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.35; }
}


/* ─── 04 BHAUTIKA (Matter · Amber) — Orbiting electrons ──────────── */
.intro-tile--bhautika { border-color: rgba(212,160,74,0.12); }
.intro-tile--bhautika:hover { border-color: rgba(212,160,74,0.35); box-shadow: 0 4px 24px rgba(212,160,74,0.10); }
.intro-tile--bhautika .intro-tile-icon { color: #d4a04a; filter: drop-shadow(0 0 4px rgba(212,160,74,0.3)); }
.intro-tile--bhautika .intro-tile-sanskrit { color: rgba(212,160,74,0.85); }

.bhauti-nucleus {
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,74,0.35) 0%, transparent 70%);
    position: absolute;
    box-shadow: 0 0 8px rgba(212,160,74,0.15);
}

.bhauti-orbit {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(212,160,74,0.08);
    position: absolute;
    animation: bhautiSpin 10s linear infinite;
}

.bhauti-orbit--2 {
    width: 52px; height: 52px;
    animation-duration: 14s;
    animation-direction: reverse;
}

.bhauti-electron {
    width: 2.5px; height: 2.5px; border-radius: 50%;
    background: #d4a04a;
    position: absolute;
    box-shadow: 0 0 4px rgba(212,160,74,0.4);
    animation: bhautiOrbit1 10s linear infinite;
}

.bhauti-electron--2 { animation: bhautiOrbit2 14s linear infinite; }

@keyframes bhautiSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes bhautiOrbit1 {
    0%   { transform: rotate(0deg) translateX(18px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(18px) rotate(-360deg); }
}

@keyframes bhautiOrbit2 {
    0%   { transform: rotate(0deg) translateX(26px) rotate(0deg); }
    100% { transform: rotate(-360deg) translateX(26px) rotate(360deg); }
}


/* ─── 05 JĪVA (Life · Green) — Morphing cell blobs ──────────────── */
.intro-tile--jiva { border-color: rgba(52,211,153,0.12); }
.intro-tile--jiva:hover { border-color: rgba(52,211,153,0.30); box-shadow: 0 4px 24px rgba(52,211,153,0.08); }
.intro-tile--jiva .intro-tile-icon { color: #34d399; filter: drop-shadow(0 0 4px rgba(52,211,153,0.3)); }
.intro-tile--jiva .intro-tile-sanskrit { color: rgba(52,211,153,0.85); }

.jiva-cell {
    width: 28px; height: 28px; border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%, rgba(52,211,153,0.10) 0%, transparent 70%);
    border: 1px solid rgba(52,211,153,0.10);
    position: absolute;
    animation: jivaBlob 7s ease-in-out infinite;
}

.jiva-cell--2 {
    width: 20px; height: 20px;
    top: 20%; right: 25%;
    animation-delay: -3s;
    animation-duration: 5.5s;
}

.jiva-bud {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(52,211,153,0.25);
    position: absolute;
    bottom: 30%; right: 32%;
    animation: jivaBud 6s ease-in-out infinite;
}

@keyframes jivaBlob {
    0%, 100% { border-radius: 50% 40% 60% 50%; transform: scale(1) rotate(0deg); }
    33%      { border-radius: 40% 60% 45% 55%; transform: scale(1.1) rotate(5deg); }
    66%      { border-radius: 55% 45% 55% 40%; transform: scale(0.95) rotate(-3deg); }
}

@keyframes jivaBud {
    0%, 100% { transform: scale(0.6); opacity: 0.2; }
    50%      { transform: scale(1.6); opacity: 0.7; }
}


/* ─── 06 PṚTHIVĪ (Earth · Brown) — Terrain sediment layers ──────── */
.intro-tile--prithi { border-color: rgba(160,132,92,0.12); }
.intro-tile--prithi:hover { border-color: rgba(160,132,92,0.30); box-shadow: 0 4px 24px rgba(160,132,92,0.08); }
.intro-tile--prithi .intro-tile-icon { color: #a0845c; filter: drop-shadow(0 0 4px rgba(160,132,92,0.3)); }
.intro-tile--prithi .intro-tile-sanskrit { color: rgba(160,132,92,0.85); }

.prithi-layer {
    width: 70%; height: 5px;
    background: linear-gradient(90deg, transparent, rgba(160,132,92,0.12), transparent);
    position: absolute; bottom: 25%;
    border-radius: 2px;
    animation: prithiDrift 6s ease-in-out infinite;
}

.prithi-layer--2 {
    bottom: 42%; width: 55%;
    background: linear-gradient(90deg, transparent, rgba(139,90,43,0.10), transparent);
    animation-delay: -2s;
}

.prithi-layer--3 {
    bottom: 58%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(120,80,35,0.08), transparent);
    animation-delay: -4s;
}

@keyframes prithiDrift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}


/* ─── 07 KĀLA (Time · Indigo) — Layered 3D temporal orbits ──────── */
.intro-tile--kala { border-color: rgba(129,140,248,0.12); }
.intro-tile--kala:hover { border-color: rgba(129,140,248,0.30); box-shadow: 0 4px 24px rgba(129,140,248,0.08); }
.intro-tile--kala .intro-tile-icon { color: #818cf8; filter: drop-shadow(0 0 4px rgba(129,140,248,0.3)); }
.intro-tile--kala .intro-tile-sanskrit { color: rgba(129,140,248,0.85); }

/* Concentric orbit rings — 3D tilt via perspective */
.kala-orbit {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid rgba(129,140,248,0.10);
    position: absolute;
    transform: rotateX(55deg);
    animation: kalaOrbitSpin 12s linear infinite;
}

.kala-orbit--2 {
    width: 36px; height: 36px;
    border-color: rgba(129,140,248,0.16);
    animation-duration: 9s;
    animation-direction: reverse;
}

.kala-orbit--3 {
    width: 22px; height: 22px;
    border-color: rgba(129,140,248,0.22);
    animation-duration: 6s;
}

/* Dual clock hands — different speeds & heights */
.kala-hand {
    width: 1px; height: 16px;
    background: linear-gradient(0deg, transparent 0%, rgba(129,140,248,0.50) 100%);
    position: absolute;
    left: calc(50% - 0.5px); bottom: 50%;
    transform-origin: bottom center;
    animation: kalaHandSpin 10s linear infinite;
}

.kala-hand--2 {
    height: 10px;
    background: linear-gradient(0deg, transparent 0%, rgba(165,180,252,0.35) 100%);
    animation-duration: 60s;
}

/* Orbiting time markers — placed on the outer orbit path */
.kala-marker {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(129,140,248,0.55);
    position: absolute;
    box-shadow: 0 0 8px rgba(129,140,248,0.30);
    top: calc(50% - 25px); left: calc(50% - 1.5px);
    transform-origin: 1.5px 25px;
    animation: kalaMarkerOrbit 12s linear infinite;
}

.kala-marker--2 {
    background: rgba(165,180,252,0.45);
    box-shadow: 0 0 6px rgba(165,180,252,0.25);
    animation-delay: -4s;
}

.kala-marker--3 {
    background: rgba(99,102,241,0.40);
    box-shadow: 0 0 6px rgba(99,102,241,0.20);
    animation-delay: -8s;
}

/* Glowing temporal core */
.kala-core {
    width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle, rgba(129,140,248,0.70), rgba(129,140,248,0.10));
    position: absolute;
    box-shadow: 0 0 12px rgba(129,140,248,0.30), 0 0 24px rgba(129,140,248,0.10);
    animation: kalaCorePulse 4s ease-in-out infinite;
}

@keyframes kalaOrbitSpin {
    from { transform: rotateX(55deg) rotateZ(0deg); }
    to   { transform: rotateX(55deg) rotateZ(360deg); }
}

@keyframes kalaHandSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes kalaMarkerOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes kalaCorePulse {
    0%, 100% { opacity: 0.5; transform: scale(1); box-shadow: 0 0 12px rgba(129,140,248,0.30), 0 0 24px rgba(129,140,248,0.10); }
    50%      { opacity: 1; transform: scale(1.5); box-shadow: 0 0 18px rgba(129,140,248,0.50), 0 0 36px rgba(129,140,248,0.20); }
}


/* ─── 08 ARTHA (Value · Gold) — Oscillating chart bars ───────────── */
.intro-tile--artha { border-color: rgba(245,158,11,0.12); }
.intro-tile--artha:hover { border-color: rgba(245,158,11,0.30); box-shadow: 0 4px 24px rgba(245,158,11,0.08); }
.intro-tile--artha .intro-tile-icon { color: #f59e0b; filter: drop-shadow(0 0 4px rgba(245,158,11,0.3)); }
.intro-tile--artha .intro-tile-sanskrit { color: rgba(245,158,11,0.85); }

.artha-bar {
    width: 3px; border-radius: 1px 1px 0 0;
    position: absolute; bottom: 28%;
    background: linear-gradient(0deg, rgba(245,158,11,0.20) 0%, rgba(245,158,11,0.04) 100%);
    animation: arthaRise 3s ease-in-out infinite;
    transform-origin: bottom center;
}

.artha-bar:nth-child(1) { left: 30%; height: 12px; }
.artha-bar--2 { left: 40%; height: 20px; animation-delay: -0.6s; }
.artha-bar--3 { left: 50%; height: 16px; animation-delay: -1.2s; }
.artha-bar--4 { left: 60%; height: 10px; animation-delay: -1.8s; }

@keyframes arthaRise {
    0%, 100% { transform: scaleY(1); opacity: 0.4; }
    50%      { transform: scaleY(1.6); opacity: 0.8; }
}


/* ─── 09 RĀJA (Governance · Slate) — Standing pillars ───────────── */
.intro-tile--raja { border-color: rgba(148,163,184,0.12); }
.intro-tile--raja:hover { border-color: rgba(148,163,184,0.30); box-shadow: 0 4px 24px rgba(148,163,184,0.08); }
.intro-tile--raja .intro-tile-icon { color: #94a3b8; filter: drop-shadow(0 0 4px rgba(148,163,184,0.3)); }
.intro-tile--raja .intro-tile-sanskrit { color: rgba(148,163,184,0.85); }

.raja-pillar {
    width: 3px; position: absolute; bottom: 22%;
    border-radius: 1px;
    background: linear-gradient(0deg, rgba(148,163,184,0.18) 0%, rgba(148,163,184,0.04) 100%);
    animation: rajaPillar 5s ease-in-out infinite;
}

.raja-pillar:nth-child(1) { left: 32%; height: 32%; }
.raja-pillar--2 { left: 50%; height: 38%; animation-delay: -1.5s; }
.raja-pillar--3 { left: 68%; height: 28%; animation-delay: -3s; }

.raja-beam {
    width: 42%; height: 1px;
    position: absolute; top: 22%; left: 29%;
    background: rgba(148,163,184,0.10);
    animation: rajaBeam 6s ease-in-out infinite;
}

@keyframes rajaPillar {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.75; }
}

@keyframes rajaBeam {
    0%, 100% { opacity: 0.10; }
    50%      { opacity: 0.30; }
}


/* ─── 10 YANTRA (Tools · Cyan) — Circuit traces ─────────────────── */
.intro-tile--yantra { border-color: rgba(6,182,212,0.12); }
.intro-tile--yantra:hover { border-color: rgba(6,182,212,0.30); box-shadow: 0 4px 24px rgba(6,182,212,0.08); }
.intro-tile--yantra .intro-tile-icon { color: #06b6d4; filter: drop-shadow(0 0 4px rgba(6,182,212,0.3)); }
.intro-tile--yantra .intro-tile-sanskrit { color: rgba(6,182,212,0.85); }

.yantra-svg {
    width: 80%; height: 55%;
    position: absolute;
}

.yantra-trace {
    fill: none;
    stroke: rgba(6,182,212,0.12);
    stroke-width: 1;
    stroke-dasharray: 6 4;
    stroke-dashoffset: 0;
    animation: yantraTrace 4s linear infinite;
}

.yantra-trace--2 {
    stroke-dasharray: 4 6;
    animation-duration: 6s;
    animation-direction: reverse;
}

.yantra-node {
    fill: rgba(6,182,212,0.35);
    animation: yantraNodePulse 3s ease-in-out infinite;
}

.yantra-node--2 { animation-delay: -1s; }
.yantra-node--3 { animation-delay: -2s; }

@keyframes yantraTrace {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -60; }
}

@keyframes yantraNodePulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.75; }
}


/* ─── 11 KALĀ (Art · Violet) — Paint morphs + sparkles ──────────── */
.intro-tile--kalaa { border-color: rgba(192,132,252,0.12); }
.intro-tile--kalaa:hover { border-color: rgba(192,132,252,0.30); box-shadow: 0 4px 24px rgba(192,132,252,0.08); }
.intro-tile--kalaa .intro-tile-icon { color: #c084fc; filter: drop-shadow(0 0 4px rgba(192,132,252,0.3)); }
.intro-tile--kalaa .intro-tile-sanskrit { color: rgba(192,132,252,0.85); }

.kalaa-splash {
    width: 22px; height: 22px; border-radius: 50%;
    position: absolute;
    background: radial-gradient(ellipse at 40% 30%, rgba(192,132,252,0.08) 0%, transparent 70%);
    border: 1px solid rgba(192,132,252,0.06);
    animation: kalaaSplash 6s ease-in-out infinite;
}

.kalaa-splash--2 {
    width: 16px; height: 16px;
    top: 22%; right: 18%;
    background: radial-gradient(ellipse at 40% 30%, rgba(252,165,165,0.06) 0%, transparent 70%);
    border-color: rgba(252,165,165,0.05);
    animation-delay: -2.5s;
    animation-duration: 8s;
}

.kalaa-spark {
    width: 2px; height: 2px; border-radius: 50%;
    background: #c084fc;
    position: absolute;
    animation: kalaaStar 3s ease-in-out infinite;
}

.kalaa-spark:nth-child(3) { top: 28%; left: 22%; }
.kalaa-spark--2 { top: 62%; left: 72%; animation-delay: -1s; }
.kalaa-spark--3 { top: 48%; left: 50%; animation-delay: -2s; animation-duration: 4s; }

@keyframes kalaaSplash {
    0%, 100% { border-radius: 50% 40% 60% 45%; transform: rotate(0deg) scale(1); }
    33%      { border-radius: 45% 55% 40% 60%; transform: rotate(8deg) scale(1.08); }
    66%      { border-radius: 55% 45% 55% 40%; transform: rotate(-4deg) scale(0.94); }
}

@keyframes kalaaStar {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50%      { transform: scale(2.2); opacity: 0.8; box-shadow: 0 0 4px rgba(192,132,252,0.3); }
}


/* ─── 12 DHARMA (Right Action · Sun Gold) — Dharma wheel ─────────── */
.intro-tile--dharma { border-color: rgba(234,179,8,0.12); }
.intro-tile--dharma:hover { border-color: rgba(234,179,8,0.30); box-shadow: 0 4px 24px rgba(234,179,8,0.08); }
.intro-tile--dharma .intro-tile-icon { color: #eab308; filter: drop-shadow(0 0 4px rgba(234,179,8,0.3)); }
.intro-tile--dharma .intro-tile-sanskrit { color: rgba(234,179,8,0.85); }

.dharma-core {
    width: 8px; height: 8px; border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle, rgba(234,179,8,0.30) 0%, transparent 70%);
    box-shadow: 0 0 12px rgba(234,179,8,0.15);
    animation: dharmaPulse 4s ease-in-out infinite;
}

.dharma-wheel {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px dashed rgba(234,179,8,0.12);
    position: absolute;
    animation: dharmaRotate 16s linear infinite;
}

.dharma-glow {
    width: 50px; height: 50px; border-radius: 50%;
    background: radial-gradient(circle, rgba(234,179,8,0.04) 0%, transparent 70%);
    position: absolute;
    animation: dharmaGlow 6s ease-in-out infinite;
}

@keyframes dharmaPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

@keyframes dharmaRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes dharmaGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.1); opacity: 1; }
}


/* ── Themed shimmer tint — each tile sweeps in its own accent color ── */
.intro-tile--kaya::after    { background: linear-gradient(105deg, transparent 20%, rgba(220,60,60,0.02) 40%, rgba(220,60,60,0.05) 50%, rgba(220,60,60,0.02) 60%, transparent 80%); }
.intro-tile--shabda::after  { background: linear-gradient(105deg, transparent 20%, rgba(80,140,255,0.02) 40%, rgba(80,140,255,0.05) 50%, rgba(80,140,255,0.02) 60%, transparent 80%); }
.intro-tile--hetu::after    { background: linear-gradient(105deg, transparent 20%, rgba(45,212,168,0.02) 40%, rgba(45,212,168,0.05) 50%, rgba(45,212,168,0.02) 60%, transparent 80%); }
.intro-tile--bhautika::after { background: linear-gradient(105deg, transparent 20%, rgba(212,160,74,0.02) 40%, rgba(212,160,74,0.05) 50%, rgba(212,160,74,0.02) 60%, transparent 80%); }
.intro-tile--jiva::after    { background: linear-gradient(105deg, transparent 20%, rgba(52,211,153,0.02) 40%, rgba(52,211,153,0.05) 50%, rgba(52,211,153,0.02) 60%, transparent 80%); }
.intro-tile--prithi::after  { background: linear-gradient(105deg, transparent 20%, rgba(160,132,92,0.02) 40%, rgba(160,132,92,0.05) 50%, rgba(160,132,92,0.02) 60%, transparent 80%); }
.intro-tile--kala::after    { background: linear-gradient(105deg, transparent 20%, rgba(129,140,248,0.02) 40%, rgba(129,140,248,0.05) 50%, rgba(129,140,248,0.02) 60%, transparent 80%); }
.intro-tile--artha::after   { background: linear-gradient(105deg, transparent 20%, rgba(245,158,11,0.02) 40%, rgba(245,158,11,0.05) 50%, rgba(245,158,11,0.02) 60%, transparent 80%); }
.intro-tile--raja::after    { background: linear-gradient(105deg, transparent 20%, rgba(148,163,184,0.02) 40%, rgba(148,163,184,0.05) 50%, rgba(148,163,184,0.02) 60%, transparent 80%); }
.intro-tile--yantra::after  { background: linear-gradient(105deg, transparent 20%, rgba(6,182,212,0.02) 40%, rgba(6,182,212,0.05) 50%, rgba(6,182,212,0.02) 60%, transparent 80%); }
.intro-tile--kalaa::after   { background: linear-gradient(105deg, transparent 20%, rgba(192,132,252,0.02) 40%, rgba(192,132,252,0.05) 50%, rgba(192,132,252,0.02) 60%, transparent 80%); }
.intro-tile--dharma::after  { background: linear-gradient(105deg, transparent 20%, rgba(234,179,8,0.02) 40%, rgba(234,179,8,0.05) 50%, rgba(234,179,8,0.02) 60%, transparent 80%); }

/* Themed top-edge glow on hover */
.intro-tile--kaya::before    { background: linear-gradient(90deg, transparent, rgba(220,60,60,0.5), transparent); }
.intro-tile--shabda::before  { background: linear-gradient(90deg, transparent, rgba(80,140,255,0.5), transparent); }
.intro-tile--hetu::before    { background: linear-gradient(90deg, transparent, rgba(45,212,168,0.5), transparent); }
.intro-tile--bhautika::before { background: linear-gradient(90deg, transparent, rgba(212,160,74,0.5), transparent); }
.intro-tile--jiva::before    { background: linear-gradient(90deg, transparent, rgba(52,211,153,0.5), transparent); }
.intro-tile--prithi::before  { background: linear-gradient(90deg, transparent, rgba(160,132,92,0.5), transparent); }
.intro-tile--kala::before    { background: linear-gradient(90deg, transparent, rgba(129,140,248,0.5), transparent); }
.intro-tile--artha::before   { background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent); }
.intro-tile--raja::before    { background: linear-gradient(90deg, transparent, rgba(148,163,184,0.5), transparent); }
.intro-tile--yantra::before  { background: linear-gradient(90deg, transparent, rgba(6,182,212,0.5), transparent); }
.intro-tile--kalaa::before   { background: linear-gradient(90deg, transparent, rgba(192,132,252,0.5), transparent); }
.intro-tile--dharma::before  { background: linear-gradient(90deg, transparent, rgba(234,179,8,0.5), transparent); }


/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .intro-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    html, body { overflow-y: auto; height: auto; }
    .intro-split { flex-direction: column; height: auto; }
    .intro-left {
        flex: 0 0 auto; max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--intro-border);
        padding: 16px;
        flex-direction: row; gap: 16px;
        text-align: left;
    }
    .intro-avatar-wrap { width: 60px; margin-bottom: 0; }
    .intro-motive { display: none; }
    .intro-oath { display: none; }
    .intro-cadet { width: auto; max-width: 100%; }
    .intro-right { overflow-y: auto; padding: 14px; }
    .intro-tiles { grid-template-columns: repeat(2, 1fr); }
    .intro-nav-controls { display: none; }
}