/**
 * NMA Public Website — Animation & Motion Layer
 * Palette: crimson #A92020 · navy #0F2744 · gold #D69E2E · white
 */

/* ============================================================
   1. KEYFRAMES
   ============================================================ */

@keyframes nma-drift {
    0%   { transform: translate(0, 0)    rotate(0deg); }
    33%  { transform: translate(14px, -18px) rotate(8deg); }
    66%  { transform: translate(-10px, 12px) rotate(-5deg); }
    100% { transform: translate(0, 0)    rotate(0deg); }
}

@keyframes nma-drift-slow {
    0%   { transform: translate(0, 0)   rotate(0deg) scale(1); }
    50%  { transform: translate(-20px, 24px) rotate(15deg) scale(1.06); }
    100% { transform: translate(0, 0)   rotate(0deg) scale(1); }
}

@keyframes nma-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes nma-spin-rev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes nma-pulse-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

@keyframes nma-pulse-ring {
    0%   { transform: scale(0.88); opacity: 1; }
    100% { transform: scale(1.55); opacity: 0; }
}

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

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

@keyframes nma-float-y-sm {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes nma-scale-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

@keyframes nma-slide-up {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes nma-slide-left {
    from { transform: translateX(32px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes nma-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes nma-count-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nma-bar-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes nma-gradient-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes nma-orb-breathe {
    0%, 100% { transform: scale(1)   translate(0, 0); opacity: 0.45; }
    33%      { transform: scale(1.1) translate(15px, -10px); opacity: 0.65; }
    66%      { transform: scale(0.93) translate(-12px, 14px); opacity: 0.38; }
}

@keyframes nma-sparkle {
    0%, 100% { transform: scale(0) rotate(0deg);   opacity: 0; }
    40%      { transform: scale(1) rotate(90deg);  opacity: 1; }
    80%      { transform: scale(0.6) rotate(160deg); opacity: 0.4; }
}

@keyframes nma-wave-x {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes nma-morph-blob {
    0%   { border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; }
    25%  { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }
    50%  { border-radius: 40% 60% 65% 35% / 40% 55% 45% 60%; }
    75%  { border-radius: 55% 45% 50% 50% / 45% 65% 35% 55%; }
    100% { border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; }
}

/* ============================================================
   2. DECORATIVE SHAPES  (.nma-shapes layer)
   ============================================================ */

.nma-shapes {
    position: relative;
    overflow: hidden;
}

.nma-shapes__layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Blobs */
.nma-shape--blob {
    position: absolute;
    border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
    animation: nma-morph-blob 18s ease-in-out infinite, nma-drift 22s ease-in-out infinite;
    will-change: transform, border-radius;
}

/* Ring */
.nma-shape--ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    animation: nma-spin-slow 28s linear infinite;
    will-change: transform;
}

/* Diamond */
.nma-shape--diamond {
    position: absolute;
    transform: rotate(45deg);
    animation: nma-drift-slow 20s ease-in-out infinite;
    will-change: transform;
}

/* Triangle */
.nma-shape--triangle {
    position: absolute;
    width: 0; height: 0;
    animation: nma-drift 16s ease-in-out infinite;
    will-change: transform;
}

/* ——— Hero shapes ——— */
.nma-hero .nma-shape--blob:nth-child(1) {
    width: 520px; height: 520px;
    top: -140px; right: -120px;
    background: radial-gradient(circle, rgba(245, 179, 22, 0.18) 0%, rgba(169, 32, 32, 0.08) 60%, transparent 80%);
    animation-duration: 24s, 30s;
}

.nma-hero .nma-shape--ring:nth-child(2) {
    width: 300px; height: 300px;
    bottom: 20px; left: -80px;
    border-color: rgba(255, 255, 255, 0.1);
    animation-duration: 32s;
}

.nma-hero .nma-shape--diamond:nth-child(3) {
    width: 80px; height: 80px;
    top: 18%; right: 22%;
    background: rgba(245, 179, 22, 0.15);
    border: 1px solid rgba(245, 179, 22, 0.3);
    border-radius: 6px;
    animation-duration: 18s;
    animation-delay: -5s;
}

/* Extra floating dot cluster in hero */
.nma-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 2px at 15% 60%, rgba(255,255,255,0.35) 100%, transparent),
        radial-gradient(circle 2px at 75% 30%, rgba(255,255,255,0.3) 100%, transparent),
        radial-gradient(circle 1.5px at 40% 80%, rgba(255,255,255,0.25) 100%, transparent),
        radial-gradient(circle 1.5px at 88% 65%, rgba(245,179,22,0.45) 100%, transparent),
        radial-gradient(circle 2px at 60% 15%, rgba(245,179,22,0.35) 100%, transparent),
        radial-gradient(circle 1px at 28% 38%, rgba(255,255,255,0.2) 100%, transparent),
        radial-gradient(circle 1.5px at 82% 88%, rgba(255,255,255,0.2) 100%, transparent);
    pointer-events: none;
    z-index: 0;
    animation: nma-fade-in 1.2s ease both;
}

/* ——— Alumni hero shapes ——— */
.nma-page-hero .nma-shape--blob:nth-child(1),
.nma-alumni-hero .nma-shape--blob:nth-child(1) {
    width: 460px; height: 460px;
    top: -100px; right: -100px;
    background: radial-gradient(circle, rgba(245,179,22,0.14) 0%, transparent 70%);
    animation-duration: 26s, 32s;
}

.nma-page-hero .nma-shape--ring:nth-child(2),
.nma-alumni-hero .nma-shape--ring:nth-child(2) {
    width: 220px; height: 220px;
    bottom: 10px; left: 5%;
    border-color: rgba(255, 255, 255, 0.1);
    animation-duration: 36s;
}

.nma-page-hero .nma-shape--diamond:nth-child(3),
.nma-alumni-hero .nma-shape--diamond:nth-child(3) {
    width: 60px; height: 60px;
    top: 28%; right: 42%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    animation-duration: 22s;
    animation-delay: -8s;
}

.nma-page-hero .nma-shape--triangle:nth-child(4),
.nma-alumni-hero .nma-shape--triangle:nth-child(4) {
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 48px solid rgba(245, 179, 22, 0.1);
    bottom: 18%;
    right: 8%;
    animation-duration: 14s;
    animation-delay: -3s;
}

/* ——— Section shape defaults (cool variant = bluish, warm = gold) ——— */
.nma-shapes__layer--cool .nma-shape--blob:nth-child(1) {
    width: 380px; height: 380px;
    top: -60px; right: -60px;
    background: radial-gradient(circle, rgba(44, 82, 130, 0.18) 0%, transparent 70%);
    animation-duration: 20s, 26s;
}

.nma-shapes__layer--cool .nma-shape--ring:nth-child(2) {
    width: 180px; height: 180px;
    bottom: -30px; left: 10%;
    border-color: rgba(15, 39, 68, 0.1);
}

.nma-shapes__layer--cool .nma-shape--diamond:nth-child(3) {
    width: 50px; height: 50px;
    top: 30%; left: 8%;
    background: rgba(15, 39, 68, 0.06);
    border: 1px solid rgba(15, 39, 68, 0.12);
    border-radius: 4px;
    animation-duration: 19s;
}

.nma-shapes__layer--cool .nma-shape--triangle:nth-child(4) {
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 38px solid rgba(169, 32, 32, 0.07);
    top: 20%;
    right: 12%;
    animation-duration: 13s;
}

/* ============================================================
   3. AMBIENT ORBS  (large blurred background blobs)
   ============================================================ */

.nma-orb-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.nma-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    animation: nma-orb-breathe 18s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Hero orbs */
.nma-hero .nma-orb-layer { display: block; }

.nma-hero-orb-1 {
    width: 420px; height: 420px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, rgba(169, 32, 32, 0.35) 0%, transparent 70%);
    animation-delay: 0s;
}

.nma-hero-orb-2 {
    width: 360px; height: 360px;
    top: 0; right: -60px;
    background: radial-gradient(circle, rgba(245, 179, 22, 0.22) 0%, transparent 70%);
    animation-delay: -6s;
    animation-duration: 22s;
}

.nma-hero-orb-3 {
    width: 280px; height: 280px;
    bottom: -40px; left: 35%;
    background: radial-gradient(circle, rgba(15, 39, 68, 0.45) 0%, transparent 70%);
    animation-delay: -12s;
    animation-duration: 26s;
}

/* ============================================================
   4. PULSING RINGS (behind stat numbers, icons, CTAs)
   ============================================================ */

.nma-pulse-ring {
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    animation: nma-pulse-ring 2.4s ease-out infinite;
    pointer-events: none;
}

.nma-hero__stat {
    position: relative;
}

/* ============================================================
   5. SPARKLES
   ============================================================ */

.nma-sparkle-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.nma-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--nma-gold);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: nma-sparkle var(--dur, 3.2s) ease-in-out var(--delay, 0s) infinite;
    opacity: 0;
}

/* Sparkle instances on the hero */
.nma-hero .nma-sparkle:nth-child(1)  { top: 12%; left: 10%; --dur: 3.5s; --delay: 0s;    }
.nma-hero .nma-sparkle:nth-child(2)  { top: 30%; left: 85%; --dur: 4s;   --delay: 0.6s;  }
.nma-hero .nma-sparkle:nth-child(3)  { top: 68%; left: 20%; --dur: 3.2s; --delay: 1.2s;  }
.nma-hero .nma-sparkle:nth-child(4)  { top: 80%; left: 72%; --dur: 4.5s; --delay: 0.3s;  }
.nma-hero .nma-sparkle:nth-child(5)  { top: 50%; left: 55%; --dur: 3.8s; --delay: 1.8s;  }
.nma-hero .nma-sparkle:nth-child(6)  { top: 18%; left: 60%; --dur: 3s;   --delay: 2.4s;  }
.nma-hero .nma-sparkle:nth-child(7)  { top: 88%; left: 42%; --dur: 4.2s; --delay: 0.9s;  }
.nma-hero .nma-sparkle:nth-child(8)  { top: 42%; left: 6%;  --dur: 3.6s; --delay: 1.5s;  }

/* ============================================================
   6. SCROLL REVEAL — enhanced stagger delays
   (Base reveal transitions live in nma-public.css)
   ============================================================ */

/* Richer stagger timing on top of the base reveal system */
[data-reveal-stagger].is-revealed > [data-reveal-item]:nth-child(1)  { --reveal-i: 0; }
[data-reveal-stagger].is-revealed > [data-reveal-item]:nth-child(2)  { --reveal-i: 1.5; }
[data-reveal-stagger].is-revealed > [data-reveal-item]:nth-child(3)  { --reveal-i: 3; }
[data-reveal-stagger].is-revealed > [data-reveal-item]:nth-child(4)  { --reveal-i: 4.5; }
[data-reveal-stagger].is-revealed > [data-reveal-item]:nth-child(5)  { --reveal-i: 6; }
[data-reveal-stagger].is-revealed > [data-reveal-item]:nth-child(6)  { --reveal-i: 7.5; }

/* ============================================================
   7. GRADIENT ANIMATED HERO HEADLINE
   ============================================================ */

.nma-hero h1 .nma-text-gold {
    background: linear-gradient(90deg, var(--nma-gold) 0%, #f5e07a 40%, var(--nma-gold) 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nma-shimmer 3s linear infinite;
}

/* ============================================================
   8. ICON CARD HOVER ANIMATIONS
   ============================================================ */

.nma-icon-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.nma-icon-card:hover {
    transform: translateY(-8px) scale(1.015);
}

.nma-icon-card__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nma-icon-card:hover .nma-icon-card__icon {
    transform: scale(1.15) rotate(-5deg);
}

/* ============================================================
   9. PORTAL TILE ANIMATIONS
   ============================================================ */

.nma-portal-tile {
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease;
}

.nma-portal-tile:hover {
    transform: translateY(-10px) scale(1.02);
}

.nma-portal-tile__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nma-portal-tile:hover .nma-portal-tile__icon {
    transform: scale(1.2) rotate(-8deg);
    animation: nma-float-y-sm 1.8s ease-in-out infinite;
}

/* ============================================================
   10. PERK CARD ANIMATIONS (Alumni)
   ============================================================ */

.nma-alumni-perk {
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease;
}

.nma-alumni-perk:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 44px rgba(169, 32, 32, 0.13);
}

.nma-alumni-perk__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nma-alumni-perk:hover .nma-alumni-perk__icon {
    transform: scale(1.18) rotate(-6deg);
}

/* ============================================================
   11. HERO STAT COUNTER (CSS-only pop-in)
   ============================================================ */

.nma-hero__stat strong {
    display: inline-block;
    animation: nma-count-up 0.8s ease both;
}

.nma-hero__stat:nth-child(1) strong { animation-delay: 0.5s; }
.nma-hero__stat:nth-child(2) strong { animation-delay: 0.7s; }
.nma-hero__stat:nth-child(3) strong { animation-delay: 0.9s; }

/* ============================================================
   12. SECTION KICKER  — sliding underline on appear
   ============================================================ */

.nma-kicker {
    position: relative;
    overflow: hidden;
}

.nma-kicker::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease 0.3s;
    opacity: 0.4;
}

.is-revealed .nma-kicker::after,
.nma-section__head .nma-kicker::after {
    transform: scaleX(1);
}

/* ============================================================
   13. ANIMATED GRADIENT CTA BAND
   ============================================================ */

.nma-section--home-cta,
.nma-section--navy.nma-section--home-cta {
    background-size: 220% 220%;
    animation: nma-gradient-shift 10s ease infinite;
}

/* ============================================================
   14. FOOTER ENTRANCE
   ============================================================ */

.nma-footer {
    position: relative;
    overflow: visible;
}

.nma-footer::before {
    content: '';
    position: absolute;
    width: 600px; height: 300px;
    top: -100px; right: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169, 32, 32, 0.05) 0%, transparent 70%);
    pointer-events: none;
    animation: nma-orb-breathe 22s ease-in-out infinite;
}

/* Campus card hover — defined in nma-public.css (3D pop-out) */

/* ============================================================
   16. NAV LINK UNDERLINE SLIDE
   ============================================================ */

.nma-nav__link {
    position: relative;
}

.nma-nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    width: 0; height: 2px;
    background: var(--nma-gold);
    border-radius: 2px;
    transition: width 0.25s ease, left 0.25s ease;
}

.nma-nav__link:hover::after,
.nma-nav__link.is-active::after {
    width: 70%;
    left: 15%;
}

/* ============================================================
   17. HERO CARD & STATS ANIMATE-IN
   ============================================================ */

.nma-hero__card {
    animation: nma-slide-left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

.nma-hero__stats {
    animation: nma-slide-left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.65s both;
}

.nma-hero__content > * {
    animation: nma-slide-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.nma-hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.nma-hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.nma-hero__content > *:nth-child(3) { animation-delay: 0.25s; }
.nma-hero__content > *:nth-child(4) { animation-delay: 0.35s; }
.nma-hero__content > *:nth-child(5) { animation-delay: 0.45s; }

/* ============================================================
   18. STAT CARDS — bounce-in + number pop
   ============================================================ */

@keyframes nma-stat-pop {
    0%   { transform: scale(0.88) translateY(18px); opacity: 0; }
    65%  { transform: scale(1.04) translateY(-3px); opacity: 1; }
    100% { transform: scale(1) translateY(0);       opacity: 1; }
}

.nma-stat[data-reveal-item] {
    animation: none; /* let IntersectionObserver handle it */
}

.nma-stats-row.is-revealed .nma-stat {
    animation: nma-stat-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.nma-stats-row.is-revealed .nma-stat:nth-child(1) { animation-delay: 0s;    }
.nma-stats-row.is-revealed .nma-stat:nth-child(2) { animation-delay: 0.1s;  }
.nma-stats-row.is-revealed .nma-stat:nth-child(3) { animation-delay: 0.2s;  }
.nma-stats-row.is-revealed .nma-stat:nth-child(4) { animation-delay: 0.3s;  }

/* ============================================================
   19. ABOUT HUB CARDS
   ============================================================ */

/* Lift/scale + icon rotate on hover are GSAP-driven (quickTo,
   nma-public.js initHubCardHover) — no CSS :hover transform here to
   avoid both owning the same property. */

/* ============================================================
   20. TIMELINE ITEMS (Journey page)
   ============================================================ */

@keyframes nma-timeline-in {
    from { transform: translateX(-20px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

.nma-timeline__item {
    animation: nma-timeline-in 0.6s ease both;
}

.nma-timeline__item:nth-child(1)  { animation-delay: 0.05s; }
.nma-timeline__item:nth-child(2)  { animation-delay: 0.12s; }
.nma-timeline__item:nth-child(3)  { animation-delay: 0.19s; }
.nma-timeline__item:nth-child(4)  { animation-delay: 0.26s; }
.nma-timeline__item:nth-child(5)  { animation-delay: 0.33s; }
.nma-timeline__item:nth-child(6)  { animation-delay: 0.40s; }
.nma-timeline__item:nth-child(7)  { animation-delay: 0.47s; }
.nma-timeline__item:nth-child(8)  { animation-delay: 0.54s; }

/* ============================================================
   21. PARTNER / ADMISSIONS PAGE CARDS
   ============================================================ */

.nma-partner-benefit-card,
.nma-partner-step,
.nma-admission-step {
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease;
}

.nma-partner-benefit-card:hover,
.nma-partner-step:hover,
.nma-admission-step:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 44px rgba(169, 32, 32, 0.1);
}

/* ============================================================
   22. PAGE HERO — inner content animate-in
   ============================================================ */

.nma-page-hero .nma-container > *,
.nma-partner-hero__text > *,
.nma-ah__left > * {
    animation: nma-slide-up 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.nma-page-hero .nma-container > *:nth-child(1) { animation-delay: 0.08s; }
.nma-page-hero .nma-container > *:nth-child(2) { animation-delay: 0.18s; }
.nma-page-hero .nma-container > *:nth-child(3) { animation-delay: 0.28s; }

.nma-partner-hero__text > *:nth-child(1) { animation-delay: 0.06s; }
.nma-partner-hero__text > *:nth-child(2) { animation-delay: 0.14s; }
.nma-partner-hero__text > *:nth-child(3) { animation-delay: 0.22s; }
.nma-partner-hero__text > *:nth-child(4) { animation-delay: 0.30s; }
.nma-partner-hero__text > *:nth-child(5) { animation-delay: 0.38s; }

.nma-ah__left > *:nth-child(1) { animation-delay: 0.06s; }
.nma-ah__left > *:nth-child(2) { animation-delay: 0.14s; }
.nma-ah__left > *:nth-child(3) { animation-delay: 0.22s; }
.nma-ah__left > *:nth-child(4) { animation-delay: 0.30s; }
.nma-ah__left > *:nth-child(5) { animation-delay: 0.38s; }

.nma-ah__card {
    animation: nma-slide-left 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s both;
}

/* ============================================================
   23. BEAUTIFUL BUTTONS — site-wide polish
   ============================================================ */

/* Shared: inset shimmer on all buttons */
.nma-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Travelling light streak on hover */
.nma-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 1;
}

.nma-btn:hover::before {
    left: 130%;
}

/* Primary: rich crimson, deeper shadow */
.nma-btn--primary {
    background: linear-gradient(155deg, #c82424 0%, var(--nma-red) 40%, var(--nma-red-dark) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(169,32,32,0.38), inset 0 1px 0 rgba(255,255,255,0.18);
    letter-spacing: 0.03em;
}

.nma-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(169,32,32,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
    filter: brightness(1.06);
    color: #fff;
}

.nma-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(169,32,32,0.3);
}

/* Outline (on dark backgrounds) */
.nma-btn--outline {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.4);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(4px);
}

.nma-btn--outline:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.75);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}

/* Gold: warm amber with navy text */
.nma-btn--gold {
    background: linear-gradient(155deg, #e8b830 0%, var(--nma-gold) 45%, var(--nma-gold-dark) 100%);
    color: #1a0e00;
    border-color: transparent;
    font-weight: 800;
    box-shadow: 0 4px 18px rgba(214,158,46,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}

.nma-btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(214,158,46,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
    filter: brightness(1.06);
    color: #1a0e00;
}

/* Large modifier */
.nma-btn--lg {
    padding: 0.9rem 2rem;
    font-size: 1rem;
    border-radius: 12px;
    letter-spacing: 0.02em;
}

/* Focus ring for all buttons */
.nma-btn:focus-visible {
    outline: 3px solid var(--nma-gold);
    outline-offset: 3px;
}

/* ============================================================
   24. SECTION HEAD HEADING — animated underline accent
   ============================================================ */

.nma-section__head h2 {
    position: relative;
    display: inline-block;
}

.nma-section__head--center h2::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%; transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--nma-red), var(--nma-gold), transparent);
    border-radius: 3px;
    transition: width 0.6s ease 0.2s;
}

.nma-section__head:not(.nma-section__head--center) h2::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 3px;
    background: linear-gradient(90deg, var(--nma-red), var(--nma-gold));
    border-radius: 3px;
    transition: width 0.6s ease 0.2s;
}

.is-revealed .nma-section__head h2::after,
.nma-section__head h2::after {
    width: 60%;
}

.nma-section__head--center .is-revealed h2::after,
.nma-section__head--center h2::after {
    width: 50%;
}

/* ============================================================
   24b. LOGO — simple fade + gentle float
   ============================================================ */

@keyframes nma-logo-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.nma-logo-shell {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.nma-logo-shell--hero .nma-logo,
.nma-logo-shell--feature .nma-logo {
    animation:
        nma-logo-fade-in 0.6s ease both,
        nma-logo-float 5s ease-in-out 0.6s infinite;
}

.nma-logo-shell--nav .nma-logo {
    animation: nma-logo-fade-in 0.5s ease both;
    transition: transform 0.25s ease;
}

.nma-nav__brand:hover .nma-logo-shell--nav .nma-logo {
    transform: scale(1.05);
}

/* ============================================================
   25. REDUCED MOTION FALLBACK
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .nma-logo-shell--hero .nma-logo,
    .nma-logo-shell--feature .nma-logo,
    .nma-logo-shell--nav .nma-logo {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .nma-nav__brand:hover .nma-logo-shell--nav .nma-logo {
        transform: none !important;
    }

    [data-reveal],
    [data-reveal-stagger] [data-reveal-item] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   25. JOURNEY TIMELINE — scroll progress spine
   A single vertical line that fills 0% -> 100% as the visitor scrolls
   through the milestones (Our Journey), driven by
   --nma-timeline-progress (set via ScrollTrigger scrub in
   nma-public.js). Purely additive — sits to the left of the existing
   milestone cards without changing their own styling.
   ============================================================ */
.nma-timeline--vertical {
    position: relative;
    --nma-timeline-progress: 0;
}
.nma-timeline--vertical::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 27px;
    width: 2px;
    background: var(--nma-gray-200);
    border-radius: 2px;
}
.nma-timeline--vertical::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 27px;
    width: 2px;
    height: calc((100% - 0.5rem) * (var(--nma-timeline-progress) / 100));
    background: linear-gradient(180deg, var(--nma-gold) 0%, var(--nma-red) 100%);
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .nma-timeline--vertical::after {
        height: calc(100% - 0.5rem);
    }
}
@media (max-width: 560px) {
    .nma-timeline--vertical::before,
    .nma-timeline--vertical::after {
        left: 19px;
    }
}