@tailwind base;
@tailwind components;
@tailwind utilities;


@font-face {
  font-family: 'quote';
  src: url('assets/quote.ttf') format('truetype');
}
.quote {
    /* font-weight: 600; */
    font-family: 'quote', sans-serif;
    font-size: 1.8rem;
    font-style: italic;
    line-height: 40px;
}

.chart-container {
    width: 100%; /* Stretch chart to full width */
    height: 100%; /* Stretch chart to full height */
    position: absolute; /* Positioning is absolute to act as background */
    top: 0;
    left: 0;
    pointer-events: none; /* Disable pointer events */
}

/* Custom gradient animation for background */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Palette:
   Primary Green: #059669 Emerald Green
   Secondary Green: #34D399 Medium Green
   Accent Light: #F0FDF4 Light Mint
*/

body {
    background:
        linear-gradient(135deg, #059669 0%, #34d399 60%, #f0fdf4 100%),
        url("path/to/soft-background-shape.png") no-repeat center center fixed;
    background-size: 200% 200%;
    animation: gradientBG 20s ease infinite;
    color: #064e3b; /* dark green for text */
    overflow-x: hidden;
}

/* Glow pulse effect on headings */
.glow {
    animation: pulseGlow 3s ease-in-out infinite;
    text-shadow:
        0 0 8px #059669,
        0 0 15px #34d399,
        0 0 30px #f0fdf4;
}

@keyframes pulseGlow {
    0%,
    100% {
        opacity: 1;
        text-shadow:
            0 0 8px #059669,
            0 0 15px #34d399,
            0 0 30px #f0fdf4;
    }
    50% {
        opacity: 0.7;
        text-shadow: none;
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 1.2s ease forwards;
}

/* Card style for token info */
.card {
    background: #f0fdf4; /* accent light */
    border: 2px solid #34d399; /* secondary green border */
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(5, 150, 105, 0.2);
    padding: 1.5rem;
    text-align: center;
    color: #064e3b; /* primary dark green */
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
    will-change: transform, background-color;
}
.card:hover {
    box-shadow: 0 15px 40px rgba(5, 150, 105, 0.4);
    transform: scale(1.05);
}

/* Trading pair link styles */
.pair-link {
    background: #34d399; /* secondary green */
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.15);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #064e3b; /* primary dark green */
    font-weight: 600;
    transition:
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
    text-decoration: none;
    will-change: transform;
}
.pair-link:hover {
    background: #059669; /* primary green */
    box-shadow: 0 10px 35px rgba(5, 150, 105, 0.4);
    color: #f0fdf4; /* accent light */
    transform: scale(1.05);
    transform: scale(1.05);
}

/* Coin Floating Animation */
@keyframes floatUpDown {
    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-15px);
        opacity: 0.8;
    }
}

/* Floating coin style */
.floating-coin {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.7;
    animation: floatUpDown 5s ease-in-out infinite;
}

/* Different delays and positions for multiple floating coins */
.floating-coin.delay1 {
    animation-delay: 0s;
    top: 60px;
    left: 10vw;
}
.floating-coin.delay2 {
    animation-delay: 1.8s;
    top: 120px;
    left: 50vw;
}
.floating-coin.delay3 {
    animation-delay: 3.4s;
    top: 100px;
    left: 80vw;
}

/* Slow spin animation for SVG coin */
@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.animate-spin-slow {
    animation: spinSlow 20s linear infinite;
}

/* Footer tweaks */
footer p {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    color: #064e3b;
    font-family: monospace;
    user-select: none;
}