/* ==========================================
   TROLL.IO
   styles.css
   Part 1
========================================== */

/* ---------- Variables ---------- */

:root{

    --bg:#0D1117;
    --bg2:#111827;
    --surface:rgba(255,255,255,.05);
    --surface2:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.09);

    --text:#F5F7FA;
    --muted:#9CA3AF;

    --primary:#00E5FF;
    --primary-dark:#00B8D4;

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --radius:24px;

    --transition:.35s cubic-bezier(.22,.61,.36,1);

    --container:1200px;

}


/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.6;

}


/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#333;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/* ---------- Typography ---------- */

h1{

    font-size:clamp(4rem,9vw,7rem);

    line-height:1;

    font-weight:900;

    letter-spacing:-3px;

}

h2{

    font-size:clamp(2rem,5vw,3rem);

    margin-bottom:18px;

}

h3{

    font-size:1.2rem;

}

p{

    color:var(--muted);

}


/* ---------- Container ---------- */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

.section{

    padding:110px 0;

}


/* ==========================================
   Animated Background
========================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

    background:
    radial-gradient(circle at top,#131b26,#0D1117);

}

.gradient{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    filter:blur(90px);

    opacity:.22;

    animation:blobMove 18s ease-in-out infinite;

}

.blob1{

    background:#00E5FF;

    top:-250px;

    left:-150px;

}

.blob2{

    background:#5B5FFF;

    bottom:-250px;

    right:-150px;

    animation-delay:5s;

}

.blob3{

    background:#00BFA5;

    top:40%;

    left:40%;

    animation-delay:9s;

}

.noise{

    position:absolute;

    inset:0;

    opacity:.03;

    pointer-events:none;

    background-image:
    radial-gradient(#fff 1px,transparent 1px);

    background-size:24px 24px;

}


/* ==========================================
   Navbar
========================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(13,17,23,.55);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    color:white;

    text-decoration:none;

    font-weight:900;

    font-size:1.4rem;

    letter-spacing:.08em;

}

.nav-links{

    display:flex;

    gap:36px;

    list-style:none;

}

.nav-links a{

    color:var(--muted);

    text-decoration:none;

    transition:var(--transition);

}

.nav-links a:hover{

    color:white;

}

.mobile-menu{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:2rem;

    cursor:pointer;

}


/* ==========================================
   Buttons
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    cursor:pointer;

    transition:var(--transition);

}

.btn-primary,
.btn-download,
.btn-nav{

    color:#00141B;

    background:var(--primary);

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    box-shadow:
    0 0 35px rgba(0,229,255,.30);

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-primary:hover,
.btn-download:hover,
.btn-nav:hover{

    background:white;

    box-shadow:
    0 0 60px rgba(0,229,255,.45);

}


/* ==========================================
   Hero
========================================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.25fr .75fr;

    gap:70px;

    align-items:center;

}

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(0,229,255,.08);

    color:var(--primary);

    border:1px solid rgba(0,229,255,.2);

    margin-bottom:26px;

}

.tagline{

    font-size:1.5rem;

    color:white;

    margin-top:22px;

    margin-bottom:18px;

}

.description{

    font-size:1.08rem;

    max-width:650px;

    margin-bottom:38px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


/* ==========================================
   Glass Cards
========================================== */

.hero-info{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.glass-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:28px;

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.glass-card:hover{

    transform:translateY(-6px);

    background:var(--surface2);

    border-color:rgba(0,229,255,.25);

}

.glass-card span{

    display:block;

    color:var(--muted);

    margin-bottom:8px;

}

.glass-card strong{

    font-size:1.3rem;

    color:white;

}


/* ==========================================
   Animations
========================================== */

@keyframes blobMove{

    0%{

        transform:translate(0,0) scale(1);

    }

    25%{

        transform:translate(80px,-40px) scale(1.1);

    }

    50%{

        transform:translate(-60px,70px) scale(.95);

    }

    75%{

        transform:translate(40px,40px) scale(1.05);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}
/* =====================================================
   SECTION TITLES
===================================================== */

.section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.section-title h2{
    font-size:clamp(2.2rem,5vw,3rem);
    font-weight:800;
    margin-bottom:18px;
    color:var(--text);
}

.section-title p{
    font-size:1.08rem;
    color:var(--muted);
    line-height:1.8;
}


/* =====================================================
   ABOUT
===================================================== */

#about{
    position:relative;
}

#about::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:650px;
    height:650px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,
        rgba(0,229,255,.08),
        transparent 70%);
    pointer-events:none;
    filter:blur(80px);
}


/* =====================================================
   FEATURES GRID
===================================================== */

.features-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

}


/* =====================================================
   FEATURE CARD
===================================================== */

.feature-card{

    background:var(--surface);

    border:1px solid var(--border);

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:34px 28px;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

    cursor:default;

    box-shadow:var(--shadow);

}


.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,229,255,.10),
        transparent 45%);

    opacity:0;

    transition:var(--transition);

}


.feature-card:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    border-color:
        rgba(0,229,255,.25);

    background:var(--surface2);

}


.feature-card:hover::before{

    opacity:1;

}


.feature-card{

    font-size:2rem;

}


.feature-card h3{

    margin-top:20px;

    font-size:1.15rem;

    font-weight:700;

    color:var(--text);

}


.feature-card p{

    margin-top:10px;

    font-size:.95rem;

    color:var(--muted);

}


/* Glow line */

.feature-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent);

    transform:scaleX(0);

    transition:.4s;

}

.feature-card:hover::after{

    transform:scaleX(1);

}
/* =====================================================
   SYSTEM REQUIREMENTS
===================================================== */

#requirements{

    position:relative;

}


#requirements::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:700px;

    height:700px;

    background:
        radial-gradient(circle,
        rgba(0,229,255,.06),
        transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}


/* =====================================================
   REQUIREMENTS CARD
===================================================== */

.requirements-card{

    max-width:900px;

    margin:0 auto;

    padding:42px;

    border-radius:var(--radius);

    background:var(--surface);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

    transition:var(--transition);

}


.requirements-card:hover{

    transform:translateY(-6px);

    border-color:rgba(0,229,255,.22);

    background:var(--surface2);

}


/* =====================================================
   REQUIREMENT ITEMS
===================================================== */

.requirements-card > div{

    padding:24px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.05);

    transition:var(--transition);

}


.requirements-card > div:hover{

    background:rgba(255,255,255,.06);

    transform:translateY(-4px);

    border-color:rgba(0,229,255,.18);

}


.requirements-card h3{

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    margin-bottom:14px;

}


.requirements-card p{

    color:var(--text);

    font-size:1.15rem;

    font-weight:600;

}


/* =====================================================
   OPTIONAL DIVIDER
===================================================== */

.requirements-card > div::after{

    content:"";

    display:block;

    margin-top:18px;

    width:60px;

    height:2px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        transparent
    );

    opacity:.8;

}
/* =====================================================
   FAQ SECTION
===================================================== */

.faq{

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* =====================================================
   FAQ ITEM
===================================================== */

.faq-item{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.faq-item:hover{

    border-color:rgba(0,229,255,.22);

    transform:translateY(-4px);

}


/* =====================================================
   QUESTION
===================================================== */

.faq-question{

    width:100%;

    background:none;

    border:none;

    color:var(--text);

    cursor:pointer;

    font-family:inherit;

    font-size:1.08rem;

    font-weight:600;

    text-align:left;

    padding:24px 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/* Arrow */

.faq-question::after{

    content:"+";

    font-size:1.6rem;

    color:var(--primary);

    transition:transform .35s ease;

}


/* =====================================================
   ANSWER
===================================================== */

.faq-answer{

    max-height:0;

    overflow:hidden;

    color:var(--muted);

    line-height:1.8;

    padding:0 28px;

    transition:
        max-height .45s ease,
        padding .35s ease;

}


/* =====================================================
   ACTIVE STATE
===================================================== */

.faq-item.active{

    border-color:rgba(0,229,255,.30);

    background:var(--surface2);

}


.faq-item.active .faq-question::after{

    transform:rotate(45deg);

}


.faq-item.active .faq-answer{

    max-height:250px;

    padding:0 28px 24px;

}
/* =====================================================
   DOWNLOAD CTA
===================================================== */

.download-section{

    padding:120px 0;

    position:relative;

}


.download-box{

    max-width:900px;

    margin:0 auto;

    padding:70px 50px;

    text-align:center;

    border-radius:32px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

}


/* Animated glow */

.download-box::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(
        circle,
        rgba(0,229,255,.25),
        transparent 70%
    );

    top:-180px;

    right:-120px;

    filter:blur(60px);

    animation:floatGlow 10s ease-in-out infinite;

    pointer-events:none;

}


.download-box h2{

    font-size:clamp(2.3rem,5vw,3.6rem);

    margin-bottom:20px;

}


.download-box p{

    max-width:640px;

    margin:0 auto 38px;

    font-size:1.08rem;

}


/* =========================================
   DOWNLOAD BUTTON
========================================= */

.btn-download{

    font-size:1.15rem;

    padding:20px 44px;

    border-radius:999px;

    animation:pulseGlow 3s ease-in-out infinite;

}


/* =========================================
   FOOTER
========================================= */

footer{

    padding:45px 0;

    border-top:1px solid rgba(255,255,255,.06);

    background:rgba(255,255,255,.015);

}


.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


.footer p{

    color:var(--muted);

}


.footer strong{

    color:var(--primary);

}


/* =========================================
   STICKY MOBILE DOWNLOAD
========================================= */

.sticky-download{

    position:fixed;

    left:16px;

    right:16px;

    bottom:16px;

    display:none;

    justify-content:center;

    align-items:center;

    padding:18px;

    border-radius:999px;

    background:var(--primary);

    color:#00141B;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 0 40px rgba(0,229,255,.35);

    z-index:9999;

    transition:var(--transition);

}


.sticky-download:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 60px rgba(0,229,255,.45);

}


/* =========================================
   CTA ANIMATIONS
========================================= */

@keyframes pulseGlow{

    0%{

        box-shadow:
        0 0 25px rgba(0,229,255,.25);

    }

    50%{

        box-shadow:
        0 0 60px rgba(0,229,255,.50);

    }

    100%{

        box-shadow:
        0 0 25px rgba(0,229,255,.25);

    }

}


@keyframes floatGlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(40px);

    }

    100%{

        transform:translateY(0);

    }

}
/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

/* ---------- Large Tablets ---------- */

@media (max-width: 1100px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:60px;
        text-align:center;
    }

    .hero-info{
        max-width:650px;
        margin:auto;
        width:100%;
    }

    .hero-buttons{
        justify-content:center;
    }

}


/* ---------- Tablets ---------- */

@media (max-width:900px){

    .nav-links{

        position:fixed;

        top:78px;

        left:16px;

        right:16px;

        background:rgba(13,17,23,.97);

        backdrop-filter:blur(22px);

        border:1px solid rgba(255,255,255,.08);

        border-radius:24px;

        padding:26px;

        display:flex;

        flex-direction:column;

        gap:18px;

        transform:translateY(-25px);

        opacity:0;

        pointer-events:none;

        transition:var(--transition);

        box-shadow:var(--shadow);

    }

    .nav-links.active{

        transform:translateY(0);

        opacity:1;

        pointer-events:auto;

    }

    .mobile-menu{

        display:block;

    }

    .btn-nav{

        display:none;

    }

    h1{

        font-size:clamp(3rem,10vw,5rem);

    }

    .section{

        padding:90px 0;

    }

}


/* ---------- Mobile ---------- */

@media (max-width:700px){

    .container{

        width:min(94%,1200px);

    }

    .hero{

        padding-top:120px;

        min-height:auto;

    }

    .tagline{

        font-size:1.25rem;

    }

    .description{

        font-size:1rem;

    }

    .glass-card{

        padding:22px;

    }

    .requirements-card{

        padding:24px;

    }

    .download-box{

        padding:50px 24px;

        border-radius:24px;

    }

    .btn-primary,
    .btn-download{

        width:100%;

    }

    .hero-buttons{

        width:100%;

    }

    .footer{

        justify-content:center;

        text-align:center;

    }

}


/* ---------- Small Phones ---------- */

@media (max-width:500px){

    h1{

        letter-spacing:-2px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .feature-card{

        padding:28px 22px;

    }

    .faq-question{

        padding:20px;

        font-size:1rem;

    }

    .faq-answer{

        padding:0 20px;

    }

    .faq-item.active .faq-answer{

        padding:0 20px 20px;

    }

    .sticky-download{

        display:flex;

    }

}
/* =====================================================
   FINAL POLISH & ANIMATIONS
===================================================== */

/* ---------- Reveal Animations ---------- */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:transform,opacity;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}


/* ---------- Fade ---------- */

.fade{

    opacity:0;

    transition:opacity .9s ease;

}

.fade.show{

    opacity:1;

}


/* ---------- Scale ---------- */

.scale{

    opacity:0;

    transform:scale(.95);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.scale.show{

    opacity:1;

    transform:scale(1);

}


/* =========================================
   Navbar Scrolled
========================================= */

.navbar.scrolled{

    background:rgba(13,17,23,.82);

    backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:0 10px 40px rgba(0,0,0,.25);

}


/* =========================================
   Floating Particles
========================================= */

#particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-2;

}

.particle{

    position:absolute;

    width:4px;

    height:4px;

    border-radius:50%;

    background:rgba(0,229,255,.45);

    animation:particleFloat linear infinite;

}


@keyframes particleFloat{

    from{

        transform:
            translateY(100vh);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        transform:
            translateY(-120px);

        opacity:0;

    }

}


/* =========================================
   Smooth Card Hover
========================================= */

.feature-card,
.glass-card,
.requirements-card,
.faq-item,
.download-box{

    will-change:transform;

    backface-visibility:hidden;

}


/* =========================================
   Button Active
========================================= */

.btn:active{

    transform:scale(.97);

}


/* =========================================
   Selection
========================================= */

::selection{

    background:rgba(0,229,255,.35);

    color:white;

}


/* =========================================
   Focus Accessibility
========================================= */

a:focus-visible,
button:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

    border-radius:12px;

}


/* =========================================
   Images
========================================= */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* =========================================
   Reduced Motion
========================================= */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* =========================================
   Performance
========================================= */

.gradient{

    will-change:transform;

}

.hero,
.section{

    position:relative;

    z-index:2;

}


/* =========================================
   Download Toast Notification
========================================= */

.download-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    min-width: 320px;
    max-width: 420px;
    padding: 18px 22px;
    background: rgba(13, 17, 23, 0.95);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 229, 255, 0.2);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    color: #F5F7FA;
    font-family: 'Inter', sans-serif;
    transform: translateY(100px) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.download-toast.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.download-toast .toast-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: #00E5FF;
    margin-bottom: 6px;
}

.download-toast .toast-body {
    font-size: 14px;
    line-height: 1.5;
    color: #9CA3AF;
}

.download-toast a {
    color: #00E5FF;
    text-decoration: underline;
    font-weight: 600;
}

.download-toast a:hover {
    color: #ffffff;
}

/* =========================================
   News & Announcements Banner (Read More)
========================================= */

.news-section {
    padding: 24px 0 10px;
}

.news-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.news-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.news-tag {
    background: linear-gradient(135deg, #00E5FF, #00B0FF);
    color: #0D1117;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.8px;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
}

.news-text-container {
    width: 100%;
}

.news-text {
    color: #E2E8F0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-more-btn {
    background: none;
    border: none;
    color: #00E5FF;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 0 0 0;
    display: none;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.read-more-btn:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* =========================================
   Modrinth Style Download Button Animation
========================================= */

.modrinth-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #00E5FF 0%, #00B0FF 100%);
    color: #0D1117;
    font-weight: 800;
    font-size: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.35);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    text-decoration: none;
}

.modrinth-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 229, 255, 0.55);
    background: linear-gradient(135deg, #33E9FF 0%, #1AB8FF 100%);
    color: #0D1117;
}

.modrinth-download-btn .btn-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.35);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.modrinth-download-btn .btn-icon-wrapper {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.modrinth-download-btn .btn-icon {
    position: absolute;
    width: 22px;
    height: 22px;
    transition: all 0.35s ease;
}

.modrinth-download-btn .spinner-icon,
.modrinth-download-btn .check-icon {
    opacity: 0;
    transform: scale(0.5);
}

.modrinth-download-btn .spinner-icon {
    animation: modrinth-spin 0.8s linear infinite;
}

@keyframes modrinth-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modrinth-download-btn .btn-text {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Downloading State */
.modrinth-download-btn.is-downloading {
    pointer-events: none;
}

.modrinth-download-btn.is-downloading .download-arrow {
    opacity: 0;
    transform: translateY(15px);
}

.modrinth-download-btn.is-downloading .spinner-icon {
    opacity: 1;
    transform: scale(1);
}

.modrinth-download-btn.is-downloading .btn-progress-fill {
    width: 100%;
}

/* Success State */
.modrinth-download-btn.is-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
}

.modrinth-download-btn.is-success .spinner-icon {
    opacity: 0;
    transform: scale(0.5);
}

.modrinth-download-btn.is-success .check-icon {
    opacity: 1;
    transform: scale(1.1);
}

.modrinth-download-btn.is-success .btn-progress-fill {
    opacity: 0;
}

/* =========================================
   End of Styles
========================================= */