/*
 * King SMADE Theme — animations.css
 * Scroll reveals, entrance animations, and motion effects.
 * Separated so they can be disabled for accessibility if needed.
 */

/* ── REDUCED MOTION RESPECT ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .orb, .kente-stripe, .hero-grid, .marquee-track,
    .doc-ring, .doc-crown, .ray, .scroll-line::after { animation: none !important; }
}

/* ── PAGE LOAD ANIMATIONS ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-16px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideUp  { from { transform:translateY(110%) } to { transform:translateY(0) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal.vis { opacity: 1; transform: translateY(0); }

.reveal-l {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal-l.vis { opacity: 1; transform: translateX(0); }

.reveal-r {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal-r.vis { opacity: 1; transform: translateX(0); }

/* Stagger delays */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }
.d6 { transition-delay: 0.6s; }

/* ── TIMELINE ITEMS ── */
.tl-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.tl-item.vis { opacity: 1; transform: translateX(0); }

/* ── HERO TEXT STAGGER ── */
.nav-logo  { opacity:0; animation: fadeDown 0.8s 0.2s forwards; }
.nav-links { opacity:0; animation: fadeDown 0.8s 0.4s forwards; }
.nav-btn   { opacity:0; animation: fadeDown 0.8s 0.6s forwards; }

.hero-eyebrow { opacity:0; animation: fadeUp 0.9s 0.5s forwards; }
.hero-name .line span { animation: slideUp 0.9s cubic-bezier(.16,1,.3,1) both; }
.hero-name .line:nth-child(1) span { animation-delay: 0.6s; }
.hero-name .line:nth-child(2) span { animation-delay: 0.75s; }
.hero-name .line:nth-child(3) span { animation-delay: 0.9s; }
.hero-tagline { opacity:0; animation: fadeUp 0.9s 1.1s forwards; }
.hero-stats   { opacity:0; animation: fadeUp 0.9s 1.2s forwards; }
.hero-btns    { opacity:0; animation: fadeUp 0.9s 1.4s forwards; }
.scroll-ind   { opacity:0; animation: fadeUp 0.9s 1.8s forwards; }

/* ── FLOATING ORBS ── */
@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 40px) scale(1.08); }
}
.orb { animation: orbFloat 8s ease-in-out infinite alternate; }
.orb1 { animation-delay: 0s; }
.orb2 { animation-delay: -3s; }
.orb3 { animation-delay: -5s; }

/* ── GRID PAN ── */
@keyframes gridPan {
    0%   { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}
.hero-grid { animation: gridPan 20s linear infinite; }

/* ── KENTE STRIPE ── */
@keyframes stripeSlide {
    0%   { background-position: 0 0; }
    100% { background-position: 80px 0; }
}
.kente-top { animation: stripeSlide 3s linear infinite; }
.kente-bot { animation: stripeSlide 3s linear infinite reverse; }

/* ── MARQUEE ── */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 25s linear infinite; }

/* ── SCROLL LINE ── */
@keyframes scrollPulse {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.scroll-line::after { animation: scrollPulse 2s ease-in-out infinite; }

/* ── DOCTORATE RINGS ── */
@keyframes ringPulse {
    0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: .7; transform: translate(-50%, -50%) scale(1.02); }
}
.doc-ring { animation: ringPulse 4s ease-in-out infinite; }
.doc-ring:nth-child(1) { animation-delay: 0s; }
.doc-ring:nth-child(2) { animation-delay: .7s; }
.doc-ring:nth-child(3) { animation-delay: 1.4s; }
.doc-ring:nth-child(4) { animation-delay: 2.1s; }

/* ── CROWN FLOAT ── */
@keyframes crownFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%       { transform: translateY(-10px) rotate(3deg); }
}
.doc-crown { animation: crownFloat 3s ease-in-out infinite; }

/* ── LIGHT RAYS ── */
@keyframes rayPulse {
    0%   { opacity: .2; transform: scaleY(.8); }
    100% { opacity: .8; transform: scaleY(1); }
}
.ray { animation: rayPulse 3s ease-in-out infinite alternate; }
.ray:nth-child(1) { animation-delay: 0s; }
.ray:nth-child(2) { animation-delay: .5s; }
.ray:nth-child(3) { animation-delay: 1s; }
.ray:nth-child(4) { animation-delay: .3s; }
.ray:nth-child(5) { animation-delay: .8s; }

/* ── CSS PARTICLES (CTA section) ── */
@keyframes particleDrift {
    0%   { opacity: 0; transform: translate(0, 0); }
    10%  { opacity: .8; }
    90%  { opacity: .4; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
.particle { animation: particleDrift linear infinite; }

/* ── SHIMMER ON BUTTONS ── */
.btn-gold::before {
    animation: none;
}
.btn-gold:hover::before {
    animation: shimmer 0.5s ease forwards;
}
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}