/* ============================================
   Trust Wallet AI — Global Styles
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* --- Anti-copy --- */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
img, svg { pointer-events: none; }

/* --- Material Icons --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   Ink & Shadow System
   ============================================ */
.ink-outline {
    filter: drop-shadow(2px 2px 0px #0B1426)
            drop-shadow(-1px -1px 0px #0B1426)
            drop-shadow(1px -1px 0px #0B1426)
            drop-shadow(-1px 1px 0px #0B1426);
}

.ink-shadow         { box-shadow: 8px 8px 0px 0px #0B1426; }
.ink-shadow-blue    { box-shadow: 8px 8px 0px 0px #0500FF; }
.ink-shadow-green   { box-shadow: 8px 8px 0px 0px #48FF91; }
.ink-shadow-purple  { box-shadow: 8px 8px 0px 0px #8B5CF6; }

/* ============================================
   Typography Helpers
   ============================================ */
.gradient-text {
    background: linear-gradient(135deg, #48FF91, #0094FF, #0500FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Neon Glow Effects
   ============================================ */
.neon-glow-green  { filter: drop-shadow(0 0 20px rgba(72, 255, 145, 0.5)); }
.neon-glow-blue   { filter: drop-shadow(0 0 20px rgba(5, 0, 255, 0.4)); }
.neon-glow-cyan   { filter: drop-shadow(0 0 20px rgba(0, 148, 255, 0.4)); }

/* ============================================
   Buttons — Premium Feel
   ============================================ */
.gooey-btn {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gooey-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px -12px rgba(72, 255, 145, 0.35);
}
.gooey-btn:active {
    transform: translateY(0px);
    box-shadow: 0 4px 12px -4px rgba(72, 255, 145, 0.2);
    transition-duration: 0.1s;
}

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

/* ============================================
   Scroll Reveal — Staggered & Smooth
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }

/* ============================================
   Dashboard Hero — Subtle Entrance
   ============================================ */
@keyframes dashboardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.dash-enter {
    animation: dashboardIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Holdings rows fade in staggered */
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.dash-row-1 { animation: rowFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both; }
.dash-row-2 { animation: rowFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both; }
.dash-row-3 { animation: rowFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both; }

/* Chart line draw */
@keyframes chartDraw {
    from { stroke-dashoffset: 600; }
    to   { stroke-dashoffset: 0; }
}
.chart-line {
    stroke-dasharray: 600;
    animation: chartDraw 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
@keyframes chartFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.chart-fill-anim {
    animation: chartFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}
.chart-dot {
    animation: chartFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 2s both;
}

/* AI Insight bar */
@keyframes insightSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.insight-enter {
    animation: insightSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

/* ============================================
   Modal System — Smoother
   ============================================ */
.modal-backdrop {
    backdrop-filter: blur(16px);
    background: rgba(11, 20, 38, 0.6);
    animation: backdropIn 0.3s ease both;
}
@keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-enter {
    animation: modalIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   Navbar — Smooth transition
   ============================================ */
#navbar {
    transition: box-shadow 0.4s ease, background-color 0.4s ease;
}

/* ============================================
   Link & Card hover — Consistent easing
   ============================================ */
a, button {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* FAQ accordion smooth open */
[data-faq-toggle] + div {
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
}

/* Feature cards hover lift */
.ink-shadow,
.ink-shadow-blue,
.ink-shadow-green,
.ink-shadow-purple {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #0500FF; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #48FF91; }

/* ============================================
   Mobile Performance
   ============================================ */
@media (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }
    .ink-shadow,
    .ink-shadow-blue,
    .ink-shadow-green,
    .ink-shadow-purple {
        box-shadow: 4px 4px 0px 0px currentColor;
    }
    .ink-shadow         { box-shadow: 4px 4px 0px 0px #0B1426; }
    .ink-shadow-blue    { box-shadow: 4px 4px 0px 0px #0500FF; }
    .ink-shadow-green   { box-shadow: 4px 4px 0px 0px #48FF91; }
    .ink-shadow-purple  { box-shadow: 4px 4px 0px 0px #8B5CF6; }
    .modal-backdrop { backdrop-filter: blur(8px); }
    .dash-enter,
    .chart-line,
    .chart-fill-anim,
    .chart-dot,
    .dash-row-1,
    .dash-row-2,
    .dash-row-3,
    .insight-enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}