/* =============================================================================
   LUMINOUS FINANCE — Animation System
   Premium motion design for Planet Nine Sales Management
   ============================================================================= */

/* ── Scroll Reveal ─────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger children */
.stagger-children > * { transition-delay: calc(var(--stagger, 0) * 60ms); }
.stagger-children > *:nth-child(1) { --stagger: 0; }
.stagger-children > *:nth-child(2) { --stagger: 1; }
.stagger-children > *:nth-child(3) { --stagger: 2; }
.stagger-children > *:nth-child(4) { --stagger: 3; }
.stagger-children > *:nth-child(5) { --stagger: 4; }
.stagger-children > *:nth-child(6) { --stagger: 5; }
.stagger-children > *:nth-child(7) { --stagger: 6; }
.stagger-children > *:nth-child(8) { --stagger: 7; }

/* ── 3D Card Tilt ──────────────────────────────────────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.03, 0.98, 0.52, 0.99),
                box-shadow 0.3s ease;
    will-change: transform;
}
.tilt-card:hover {
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.12),
                0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ── Hover Lift ────────────────────────────────────────────────────────────── */
.hover-lift {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.1),
                0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ── Button Effects ────────────────────────────────────────────────────────── */
.btn-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.4));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(8px);
}
.btn-glow:hover::before { opacity: 1; }

/* Ripple */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
    transform: scale(10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.8s;
    pointer-events: none;
}
.ripple:active::after {
    transform: scale(0);
    opacity: 0.4;
    transition: 0s;
}

/* ── Animated Gradient Background ──────────────────────────────────────────── */
@keyframes meshGradient {
    0%, 100% { background-position: 0% 50%; }
    25%      { background-position: 100% 0%; }
    50%      { background-position: 100% 100%; }
    75%      { background-position: 0% 100%; }
}

.mesh-bg {
    background: linear-gradient(
        -45deg,
        #f0f4f8, #e8eef6, #ede9fe, #f0f4f8,
        #dbeafe, #f0f4f8, #fae8ff20, #f0f4f8
    );
    background-size: 400% 400%;
    animation: meshGradient 20s ease infinite;
}

/* ── Floating Orbs ─────────────────────────────────────────────────────────── */
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -20px) scale(1.05); }
    66%      { transform: translate(-20px, 15px) scale(0.95); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-25px, 20px) scale(0.95); }
    66%      { transform: translate(15px, -25px) scale(1.08); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, 20px) scale(1.02); }
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}
.orb-1 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #818cf850, transparent 70%);
    animation: orbFloat1 12s ease-in-out infinite;
}
.orb-2 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #a78bfa40, transparent 70%);
    animation: orbFloat2 15s ease-in-out infinite;
}
.orb-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #60a5fa30, transparent 70%);
    animation: orbFloat3 18s ease-in-out infinite;
}

/* ── Number Counter ────────────────────────────────────────────────────────── */
.counter-value {
    display: inline-block;
    transition: all 0.3s ease;
}

/* ── Glow Pulse ────────────────────────────────────────────────────────────── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2); }
    50%      { box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.15); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ── Shimmer Loading ───────────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ── Table Row Entrance ────────────────────────────────────────────────────── */
@keyframes rowSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.row-enter {
    animation: rowSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Phase Card Entrance ───────────────────────────────────────────────────── */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card-reveal {
    animation: cardReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Gradient Border ───────────────────────────────────────────────────────── */
.gradient-border {
    position: relative;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #818cf840, #a78bfa40, #60a5fa40);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gradient-border:hover::before { opacity: 1; }

/* ── Section Color Accents ─────────────────────────────────────────────────── */
.accent-left-bom     { border-inline-start: 3px solid #6366f1; }
.accent-left-efforts { border-inline-start: 3px solid #10b981; }
.accent-left-travels { border-inline-start: 3px solid #06b6d4; }
.accent-left-subs    { border-inline-start: 3px solid #f97316; }

/* ── Table Row Hover ───────────────────────────────────────────────────────── */
.table-row-hover tr {
    transition: background 0.15s ease;
}
.table-row-hover tr:hover {
    background: rgba(99, 102, 241, 0.03);
}

/* ── Accordion Smooth ──────────────────────────────────────────────────────── */
.accordion-body {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
}

/* ── Prefers Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .orb { display: none; }
    .mesh-bg { animation: none; }
}