/**
 * SnowbrixAI — New-Age Motion & Effects (loaded after main.css)
 * 1. Course ticker (stock-ticker style, infinite scroll, pause on hover)
 * 2. "Feather-touch" scroll reveals (smoother easing + subtle grow)
 * 3. Card & button micro-interactions
 * All motion is disabled under prefers-reduced-motion.
 */

/* ═══ 1. COURSE TICKER ═══════════════════════════════════ */
.course-ticker {
    padding: 22px 0;
    background: var(--bg-alt, #F8FAFC);
    border-top: 1px solid var(--border, #E2E8F0);
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.course-ticker__label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, #14B8B8);
    margin: 0 0 12px;
}
.course-ticker__viewport {
    position: relative;
    overflow: hidden;
    /* Fade the left/right edges so items slide in/out softly */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.course-ticker__track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: sb-ticker 45s linear infinite;
    will-change: transform;
}
.course-ticker:hover .course-ticker__track { animation-play-state: paused; }

.course-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 9px 16px;
    border-radius: var(--radius-full, 9999px);
    background: #fff;
    border: 1px solid var(--border, #E2E8F0);
    color: var(--primary, #1B2A4A);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.course-ticker__item:hover {
    transform: translateY(-3px);
    border-color: var(--accent, #14B8B8);
    box-shadow: 0 8px 22px rgba(20,184,184,0.16);
    color: var(--primary, #1B2A4A);
}
.course-ticker__star { color: var(--accent, #14B8B8); font-weight: 700; }
.course-ticker__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #14B8B8); opacity: 0.5; flex: 0 0 5px; }

@keyframes sb-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* track holds 2 identical halves → seamless loop */
}

/* ═══ "NEW" BADGE (this-month launches) ══════════════════ */
.badge-new {
    display: inline-flex;
    align-items: center;
    background: var(--accent, #14B8B8);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-full, 9999px);
    line-height: 1;
    vertical-align: middle;
    animation: sb-pulse 2.4s ease-out infinite;
}
@keyframes sb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,184,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(20,184,184,0); }
}
@media (prefers-reduced-motion: reduce) { .badge-new { animation: none; } }

/* "Top Rated" — steady navy (proof, not urgency → no pulse) */
.badge-top {
    display: inline-flex;
    align-items: center;
    background: var(--primary, #1B2A4A);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-full, 9999px);
    line-height: 1;
    vertical-align: middle;
}

/* ═══ 2. FEATHER-TOUCH SCROLL REVEALS ════════════════════ */
/* Smoother easing + a subtle "grow" so sections ease up AND scale in. */
.reveal {
    transform: translateY(34px) scale(0.985);
    transition: opacity 0.75s cubic-bezier(.22,.61,.36,1),
                transform 0.75s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal.visible { transform: translateY(0) scale(1); }

/* Finer stagger for richer sequencing */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ═══ 3. CARD & BUTTON MICRO-INTERACTIONS ════════════════ */
.vp-card, .offer-card, .feature-card, .result-card, .program-card {
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}
.vp-card:hover, .offer-card:hover, .feature-card:hover, .result-card:hover, .program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(15,27,51,0.12);
}
.btn { transition: transform 0.25s cubic-bezier(.22,.61,.36,1), background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Smooth in-page scrolling */
html { scroll-behavior: smooth; }

/* ═══ 4. SITE-WIDE POLISH (every page) ═══════════════════ */

/* Gently floating hero/page-header blobs — a calm, living background */
@keyframes sb-float-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,28px) scale(1.06); } }
@keyframes sb-float-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px,-18px) scale(1.08); } }
@keyframes sb-float-3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(16px,-24px); } }
.hero__circle--1 { animation: sb-float-1 23s ease-in-out infinite; }
.hero__circle--2 { animation: sb-float-2 27s ease-in-out infinite; }
.hero__circle--3 { animation: sb-float-3 19s ease-in-out infinite; }

/* Staggered entrance for inner page headers (homepage hero uses .reveal) */
@keyframes sb-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.page-header .section-label { animation: sb-rise 0.7s cubic-bezier(.22,.61,.36,1) both; }
.page-header h1            { animation: sb-rise 0.7s cubic-bezier(.22,.61,.36,1) 0.10s both; }
.page-header__desc         { animation: sb-rise 0.7s cubic-bezier(.22,.61,.36,1) 0.20s both; }
.page-header .btn-group    { animation: sb-rise 0.7s cubic-bezier(.22,.61,.36,1) 0.30s both; }

/* Soft teal gradient on the hero accent word */
.hero h1 .accent {
    background: linear-gradient(120deg, var(--accent, #14B8B8), #5fd6d6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--accent, #14B8B8);
}

/* Animated underline on nav links */
.navbar__nav a { position: relative; }
.navbar__nav a::after {
    content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
    background: var(--accent, #14B8B8); border-radius: 2px;
    transition: width 0.32s cubic-bezier(.22,.61,.36,1);
}
.navbar__nav a:hover::after, .navbar__nav a.current::after { width: 100%; }

/* Accent buttons → subtle gradient + glow lift */
.btn--accent { background: linear-gradient(135deg, var(--accent, #14B8B8), var(--accent-dark, #0D8A8A)); }
.btn--accent:hover {
    background: linear-gradient(135deg, var(--accent-dark, #0D8A8A), var(--accent, #14B8B8));
    box-shadow: 0 12px 30px rgba(20,184,184,0.30);
}

/* Thin scroll-progress bar (element injected by animations.js) */
.sb-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
    background: linear-gradient(90deg, var(--accent, #14B8B8), var(--accent-dark, #0D8A8A));
    transition: width 0.1s linear; pointer-events: none;
}

/* Selection + keyboard focus polish */
::selection { background: rgba(20,184,184,0.22); color: var(--primary, #1B2A4A); }
:focus-visible { outline: 2px solid var(--accent, #14B8B8); outline-offset: 2px; border-radius: 3px; }

/* ═══ 5. BREATHING ROOM & RHYTHM (de-densify, premium spacing) ═══ */
/* More generous, screen-responsive section padding → air between sections */
.section { padding: clamp(84px, 9vw, 136px) 0; }

/* Roomier container gutters on large screens */
@media (min-width: 1280px) { .container { padding: 0 40px; } }

/* Stronger heading hierarchy + more space before the content below */
.section-header { margin-bottom: clamp(48px, 5.5vw, 76px); }
.section-title {
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 18px;
}
.section-desc { font-size: 1.13rem; line-height: 1.75; max-width: 640px; }

/* Cards: more internal air, softer/rounder, slightly larger body text */
.cards-grid { gap: clamp(24px, 2.3vw, 34px); }
.vp-card, .offer-card, .feature-card {
    padding: clamp(30px, 2.6vw, 42px);
    border-radius: 18px;
}
.feature-card__desc, .vp-card__desc, .offer-card__desc { font-size: 0.97rem; line-height: 1.7; }
.offer-card__bullets li { margin-bottom: 10px; }

/* Result/metric cards: let the big number breathe */
.result-card { padding: clamp(30px, 2.6vw, 40px); border-radius: 18px; }

/* Hero: tighten headline tracking, ease the line-height for large display text */
.hero h1 { letter-spacing: -0.02em; line-height: 1.12; }
.page-header h1 { letter-spacing: -0.02em; }

/* ═══ ACCESSIBILITY: stop all motion under reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .course-ticker__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .course-ticker__track { animation: none !important; transform: none !important; }
    .reveal { transform: none; transition: none; }
    .vp-card:hover, .offer-card:hover, .feature-card:hover, .result-card:hover, .program-card:hover, .btn:hover { transform: none; }
    .hero__circle--1, .hero__circle--2, .hero__circle--3 { animation: none !important; }
    .page-header .section-label, .page-header h1, .page-header__desc, .page-header .btn-group {
        animation: none !important; opacity: 1; transform: none;
    }
    .sb-progress { display: none; }
}