@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: "Saira", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: <weight>; */
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* General Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }


@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slideInLeft { animation: slideInLeft 0.8s ease-out forwards; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slideInRight { animation: slideInRight 0.8s ease-out forwards; }

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.animate-zoomIn { animation: zoomIn 0.6s ease-out forwards; }

.animation-delay-200 { animation-delay: 0.2s; opacity: 0; /* Start hidden before animation */ }
.animation-delay-300 { animation-delay: 0.3s; opacity: 0; }
.animation-delay-400 { animation-delay: 0.4s; opacity: 0; }
.animation-delay-600 { animation-delay: 0.6s; opacity: 0; }
.animation-delay-800 { animation-delay: 0.8s; opacity: 0; }


/* Fire Animation on Logo */
.fire-animation-container {
    position: relative;
    display: inline-block; /* Or block, depending on layout */
}

.fire-animation-container::before,
.fire-animation-container::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5%; /* Adjust to position flames correctly around the logo base */
    width: 120%; /* Flames wider than logo */
    height: 80%; /* Flames height */
    transform: translateX(-50%);
    background-repeat: no-repeat;
    z-index: -1; /* Behind the logo image */
    pointer-events: none;
}

.fire-animation-container::before {
    background-image:
        radial-gradient(circle at 50% 100%, rgba(255,165,0,0.8) 0%, rgba(255,165,0,0) 70%),
        radial-gradient(circle at 40% 100%, rgba(255,100,0,0.7) 0%, rgba(255,100,0,0) 60%),
        radial-gradient(circle at 60% 100%, rgba(255,100,0,0.7) 0%, rgba(255,100,0,0) 60%);
    animation: fireSmall 1.5s ease-in-out infinite alternate, flicker 0.5s linear infinite;
    filter: blur(5px);
}

.fire-animation-container::after {
     background-image:
        radial-gradient(ellipse at 50% 100%, rgba(255,0,0,0.6) 0%, rgba(255,0,0,0) 60%),
        radial-gradient(ellipse at 45% 100%, rgba(255,200,0,0.7) 0%, rgba(255,200,0,0) 70%),
        radial-gradient(ellipse at 55% 100%, rgba(255,200,0,0.7) 0%, rgba(255,200,0,0) 70%);
    animation: fireLarge 2s ease-in-out infinite alternate, flicker 0.3s linear infinite reverse;
    filter: blur(10px);
    opacity: 0.8;
}

@keyframes fireSmall {
    0% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.9; }
    50% { transform: translateX(-50%) scaleY(1.2) scaleX(1.1); opacity: 0.7; }
    100% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.9; }
}

@keyframes fireLarge {
    0% { transform: translateX(-50%) scaleY(1.1) scaleX(1.1); opacity: 0.7; }
    50% { transform: translateX(-50%) scaleY(1.3) scaleX(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(1.1) scaleX(1.1); opacity: 0.7; }
}
@keyframes flicker {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}


/* Live Red Dot Animation */
.live-dot {
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* Custom Scrollbar for Tokenomics List */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5a24a; /* Brand gold color */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c98f3d; /* Darker gold on hover */
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.hover-glow:hover {
    box-shadow: 0 0 25px rgba(229, 162, 74, 0.6); /* Glow with brand-bg color */
}

/* Roadmap line (for mobile: stack them) */
@media (max-width: 767px) {
    .roadmap-step {
        padding-left: 20px; /* Space for a vertical line if desired */
        padding-right: 20px;
        text-align: left;
        display: flex;
        align-items: flex-start; /* Align icon and text */
    }
    .roadmap-step > div:first-child { /* The icon container */
        margin-right: 15px;
        margin-left: 0;
        margin-bottom: 0; /* Remove bottom margin on mobile */
        flex-shrink: 0; /* Prevent icon from shrinking */
    }
     .roadmap-step h3, .roadmap-step p {
        text-align: left;
    }
}










/* General Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }


@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slideInLeft { animation: slideInLeft 0.8s ease-out forwards; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slideInRight { animation: slideInRight 0.8s ease-out forwards; }

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.animate-zoomIn { animation: zoomIn 0.6s ease-out forwards; }

.animation-delay-200 { animation-delay: 0.2s; opacity: 0; /* Start hidden before animation */ }
.animation-delay-300 { animation-delay: 0.3s; opacity: 0; }
.animation-delay-400 { animation-delay: 0.4s; opacity: 0; }
.animation-delay-600 { animation-delay: 0.6s; opacity: 0; }
.animation-delay-800 { animation-delay: 0.8s; opacity: 0; }


/* Fire Animation on Logo */
.fire-animation-container {
    position: relative;
    display: inline-block; /* Or block, depending on layout */
}

.fire-animation-container::before,
.fire-animation-container::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5%; /* Adjust to position flames correctly around the logo base */
    width: 120%; /* Flames wider than logo */
    height: 80%; /* Flames height */
    transform: translateX(-50%);
    background-repeat: no-repeat;
    z-index: -1; /* Behind the logo image */
    pointer-events: none;
}

.fire-animation-container::before {
    background-image:
        radial-gradient(circle at 50% 100%, rgba(255,165,0,0.8) 0%, rgba(255,165,0,0) 70%),
        radial-gradient(circle at 40% 100%, rgba(255,100,0,0.7) 0%, rgba(255,100,0,0) 60%),
        radial-gradient(circle at 60% 100%, rgba(255,100,0,0.7) 0%, rgba(255,100,0,0) 60%);
    animation: fireSmall 1.5s ease-in-out infinite alternate, flicker 0.5s linear infinite;
    filter: blur(5px);
}

.fire-animation-container::after {
     background-image:
        radial-gradient(ellipse at 50% 100%, rgba(255,0,0,0.6) 0%, rgba(255,0,0,0) 60%),
        radial-gradient(ellipse at 45% 100%, rgba(255,200,0,0.7) 0%, rgba(255,200,0,0) 70%),
        radial-gradient(ellipse at 55% 100%, rgba(255,200,0,0.7) 0%, rgba(255,200,0,0) 70%);
    animation: fireLarge 2s ease-in-out infinite alternate, flicker 0.3s linear infinite reverse;
    filter: blur(10px);
    opacity: 0.8;
}

@keyframes fireSmall {
    0% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.9; }
    50% { transform: translateX(-50%) scaleY(1.2) scaleX(1.1); opacity: 0.7; }
    100% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 0.9; }
}

@keyframes fireLarge {
    0% { transform: translateX(-50%) scaleY(1.1) scaleX(1.1); opacity: 0.7; }
    50% { transform: translateX(-50%) scaleY(1.3) scaleX(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(1.1) scaleX(1.1); opacity: 0.7; }
}
@keyframes flicker {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}


/* Live Red Dot Animation */
.live-dot {
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* Custom Scrollbar for Tokenomics List */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5a24a; /* Brand gold color */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c98f3d; /* Darker gold on hover */
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.hover-glow:hover {
    box-shadow: 0 0 25px rgba(229, 162, 74, 0.6); /* Glow with brand-bg color */
}

/* Roadmap line (for mobile: stack them) */
@media (max-width: 767px) {
    .roadmap-step {
        padding-left: 20px; /* Space for a vertical line if desired */
        padding-right: 20px;
        text-align: left;
        display: flex;
        align-items: flex-start; /* Align icon and text */
    }
    .roadmap-step > div:first-child { /* The icon container */
        margin-right: 15px;
        margin-left: 0;
        margin-bottom: 0; /* Remove bottom margin on mobile */
        flex-shrink: 0; /* Prevent icon from shrinking */
    }
     .roadmap-step h3, .roadmap-step p {
        text-align: left;
    }
}