/* --- SCALING & GENERAL SETUP --- */
:root {
    --canvas-width: 1920; /* The design resolution width */
    --sunburst-yellow: #FFD700;
    --flame-orange: #FF7A00;
    --deep-red: #FF3B3B;
    --pink-accent: #FCA3F5;
    --eggshell-cream: #FFF7E8;
    --carbon-black: #111111;
    --font-headline: 'Bebas Neue', cursive;
    --font-body: 'Poppins', sans-serif;
    --pale-yellow: #FFF7B8;
    --pale-orange: #FFE0BA;
    --pale-pink: #FFD4E8;
    color-scheme: light;
}

html { 
    scroll-behavior: smooth; 
}

body {
    background: #000; /* Letterbox color */
    overflow: hidden; /* CRITICAL: Disables the main body scrollbar */
    margin: 0;
    padding: 0;
}

/* This is the viewport-sized "window" that contains the scrollbar */
#scaling-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--eggshell-cream);
}

/* This wrapper's height is set by JS to create the correct scrollable area */
#scroll-wrapper {
    position: relative;
    width: 100%;
    /* Height is set dynamically by JavaScript */
}

/* This is your actual content that gets positioned and scaled */
#content-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--canvas-width) * 1px);
    background-color: var(--eggshell-cream);
    transform-origin: top left;
    /* transform: scale() is set by JavaScript */
}

/* --- General Element Styling --- */
* { box-sizing: border-box; }
main { 
    font-family: var(--font-body); 
    font-weight: 400; 
    font-size: 18px; 
    line-height: 1.7; 
    padding-top: 90px;
    color: var(--carbon-black);
}
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; display: block; }

/* --- Scroll & Keyframe Animations --- */
.animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@keyframes heroFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
@keyframes scroll-paws { 0% { background-position: 0 0; } 100% { background-position: -500px 500px; } }

/* --- Header --- */
.header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1000; 
    padding: 15px 0; 
    background-color: transparent; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease; 
}
.header--scrolled { 
    background-color: rgba(17, 17, 17, 0.85); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
.header__container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
}

.header__logo { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    text-decoration: none;
    flex: 0 0 auto;
}
.header__logo img { max-height: 60px; }
.header__logo-text { 
    font-family: var(--font-headline); 
    font-size: 2.5rem; 
    color: var(--carbon-black); 
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.header__nav--desktop { 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex; 
    gap: 60px; 
}

.header__link { 
    position: relative; 
    font-family: var(--font-body); 
    font-weight: 500; 
    text-transform: uppercase; 
    font-size: 1.2rem; 
    color: var(--carbon-black); 
    text-decoration: none; 
    padding-bottom: 5px; 
    transition: color 0.3s ease; 
}
.header__link::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background-color: var(--sunburst-yellow); 
    transition: width 0.3s ease; 
}
.header__link:hover::after { 
    width: 100%; 
    filter: drop-shadow(0 0 3px var(--sunburst-yellow)); 
}

.header--scrolled .header__link { color: var(--eggshell-cream); }
.header--scrolled .header__logo-text { color: var(--eggshell-cream); }
.header--scrolled .mobile-nav-toggle span { background-color: var(--eggshell-cream); }
.header--scrolled .header__link:hover { color: var(--sunburst-yellow); }

/* --- Mobile Navigation (Removed in original design) --- */
.mobile-nav-toggle { 
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
    z-index: 10001; 
    flex: 0 0 auto;
}
.mobile-nav-toggle span { 
    display: block; 
    width: 25px; 
    height: 3px; 
    background-color: var(--carbon-black); 
    margin: 5px 0; 
    transition: all 0.3s ease; 
}

.mobile-nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background-color: var(--carbon-black); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 30px; 
    transform: translateX(100%); 
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); 
    z-index: 10000; 
}
.mobile-nav--open { transform: translateX(0); }
.mobile-nav__link { 
    font-family: var(--font-headline); 
    font-size: 3rem; 
    color: var(--eggshell-cream); 
    text-decoration: none; 
}
.mobile-nav-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* --- Buttons & Common Elements --- */
.btn-cta { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-family: var(--font-headline); 
    font-size: 1.5rem; 
    padding: 10px 25px; 
    border-radius: 50px; 
    background-color: var(--flame-orange); 
    color: var(--eggshell-cream); 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    border: 2px solid var(--carbon-black); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    transition: all 0.2s ease; 
}
.btn-cta:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}
.btn-icon { width: 20px; height: 20px; margin-right: 10px; }
.icon-white { filter: brightness(0) invert(1); }
.section-title { 
    font-family: var(--font-headline); 
    font-size: 5rem; 
    font-weight: 400; 
    text-align: center; 
    margin-bottom: 60px; 
    color: var(--carbon-black); 
}
.section-title span { color: var(--flame-orange); }

/* --- Hero Section --- */
.hero { 
    position: relative; 
    padding: 40px 0 80px 0; 
    text-align: center; 
    background: radial-gradient(circle, #FFD700 0%, #FF7A00 60%, #FF3B3B 100%); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 1080px; 
}
#particles-js { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}
.hero__container { 
    position: relative; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.hero__image-container { 
    width: 400px; 
    height: 400px; 
    border-radius: 50%; 
    background-color: rgba(255, 247, 232, 0.1); 
    border: 2px solid rgba(255, 247, 232, 0.25); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    animation: heroFloat 7s ease-in-out infinite; 
}
.hero__image { max-width: 80%; height: auto; }
.hero__content { margin-top: 20px; }
.hero__title { 
    font-family: var(--font-headline); 
    font-size: 5.5rem; 
    color: var(--eggshell-cream); 
    text-shadow: 3px 3px 0px rgba(0,0,0,0.15); 
    line-height: 1.1; 
}
.hero__title .title-highlight { 
    color: var(--sunburst-yellow); 
    background-color: rgba(255, 215, 0, 0.15); 
    padding: 0 10px; 
    border-radius: 8px; 
}
.hero__description { 
    font-size: 1.3rem; 
    font-weight: 500; 
    color: var(--eggshell-cream); 
    margin: 20px auto 40px auto; 
    max-width: 650px; 
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1); 
}
.hero__cta-group { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
}

/* --- About Section --- */
.about { padding: 100px 0; }
.about__grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-areas: "card1 image card2" "card3 image card4"; 
    gap: 30px; 
    align-items: stretch; 
    max-width: 100%; 
}
.about__card { 
    background-color: #ffffff; 
    border: 2px solid var(--carbon-black); 
    padding: 30px; 
    border-radius: 20px; 
    box-shadow: 8px 8px 0px var(--carbon-black); 
}
.about__card:nth-child(1) { grid-area: card1; }
.about__card--center-image { 
    grid-area: image; 
    background: none; 
    border: none; 
    box-shadow: none; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.about__center-image { animation: float 6s ease-in-out infinite; }
.about__card:nth-child(3) { grid-area: card2; }
.about__card:nth-child(4) { grid-area: card3; }
.about__card:nth-child(5) { grid-area: card4; }
.about__card-title { 
    font-family: var(--font-headline); 
    font-size: 2.5rem; 
    color: var(--carbon-black); 
    margin-bottom: 15px; 
}
.about__card--large-num { 
    background-color: var(--sunburst-yellow); 
    color: var(--carbon-black); 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}
.about__card-number { 
    font-family: var(--font-headline); 
    font-size: 8rem; 
    font-weight: 400; 
    line-height: 0.8; 
    color: rgba(0, 0, 0, 0.2); 
}

/* --- How to Buy Section --- */
.how-to-buy { 
    padding: 100px 0; 
    background-color: var(--carbon-black); 
    color: var(--eggshell-cream); 
    position: relative; 
    overflow: hidden; 
}
.how-to-buy::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200%; 
    height: 200%; 
    background-image: url('images/emoji-pattern.png'); 
    background-size: 300px; 
    opacity: 0.06; 
    z-index: 0; 
    animation: scroll-paws 60s linear infinite; 
}
.how-to-buy .container { position: relative; z-index: 1; }
.how-to-buy .section-title { color: var(--eggshell-cream); }
.how-to-buy .section-title span { color: var(--sunburst-yellow); }
.how-to-buy__grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
}
.how-to-buy__card { 
    position: relative; 
    text-align: center; 
    border: 2px solid var(--carbon-black); 
    border-radius: 20px; 
    padding: 50px 25px 30px 25px; 
    color: var(--carbon-black); 
    box-shadow: 6px 6px 0px var(--carbon-black); 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
#step1 { background-color: var(--pale-yellow); } 
#step2 { background-color: var(--pale-orange); } 
#step3 { background-color: var(--pale-pink); } 
#step4 { background-color: var(--sunburst-yellow); }
.how-to-buy__card:hover { 
    transform: translateY(-5px); 
    box-shadow: 10px 10px 0px var(--carbon-black); 
}
.step-badge { 
    position: absolute; 
    top: -25px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 50px; 
    height: 50px; 
    background-color: var(--flame-orange); 
    color: var(--eggshell-cream); 
    border: 2px solid var(--carbon-black); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: var(--font-headline); 
    font-size: 2rem; 
    box-shadow: 4px 4px 0px var(--carbon-black); 
}
.how-to-buy__card-title { 
    font-family: var(--font-headline); 
    font-size: 2rem; 
    color: var(--carbon-black); 
    margin-bottom: 10px; 
}
.how-to-buy__card p { 
    font-size: 1rem; 
    font-family: var(--font-body); 
}

/* --- Tokenomics Section --- */
.tokenomics { 
    padding: 100px 0; 
    position: relative; 
    background-color: var(--carbon-black); 
    color: var(--eggshell-cream); 
    overflow: hidden; 
}
.tokenomics::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200%; 
    height: 200%; 
    background-image: url('images/emoji-pattern.png'); 
    background-size: 300px; 
    opacity: 0.06; 
    z-index: 0; 
    animation: scroll-paws 60s linear infinite reverse; 
}
.tokenomics .container { position: relative; z-index: 1; }
.tokenomics .section-title { color: var(--eggshell-cream); }
.tokenomics .section-title span { color: var(--sunburst-yellow); }
.tokenomics__wrapper { 
    display: flex; 
    align-items: center; 
    gap: 50px; 
    background: rgba(0,0,0,0.2); 
    border: 2px solid var(--sunburst-yellow); 
    border-radius: 20px; 
    padding: 40px; 
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2); 
}
.tokenomics__image-container { 
    flex: 0 0 40%; 
    max-width: 400px; 
    margin: 0 auto; 
}
.tokenomics__content { 
    flex: 1; 
    width: 100%; 
}
.tokenomics__supply-amount { 
    font-family: var(--font-headline); 
    font-size: 3.5rem; 
    color: var(--sunburst-yellow); 
    line-height: 1; 
}
.tokenomics__supply-label { 
    font-family: var(--font-headline); 
    text-transform: uppercase; 
    font-weight: 400; 
    margin-bottom: 20px; 
    font-size: 1.5rem; 
}
.tokenomics__contract { 
    display: flex; 
    align-items: center; 
    background-color: var(--carbon-black); 
    border: 2px solid var(--sunburst-yellow); 
    border-radius: 12px; 
    padding: 4px; 
    margin-bottom: 30px; 
    font-family: var(--font-body); 
}
#contract-address { 
    flex-grow: 1; 
    font-size: 1rem; 
    font-weight: 500; 
    color: var(--eggshell-cream); 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    padding: 0 15px; 
}
.btn-copy { 
    flex-shrink: 0; 
    background-color: var(--sunburst-yellow); 
    color: var(--carbon-black); 
    border: 2px solid var(--carbon-black); 
    padding: 10px 25px; 
    border-radius: 8px; 
    font-weight: 700; 
    font-size: 1.1rem; 
    cursor: pointer; 
}
.tokenomics__list { 
    list-style: none; 
    font-family: var(--font-headline); 
}
.tokenomics__item { 
    padding: 20px 0; 
    border-bottom: 2px solid rgba(255,255,255,0.1); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.tokenomics__item:first-child { 
    border-top: 2px solid rgba(255,255,255,0.1); 
}
.tokenomics__item-title { 
    font-size: 2rem; 
}
.tokenomics__item-value { 
    font-family: var(--font-body); 
    font-size: 1.8rem; 
    font-weight: 700; 
}
.ownership-color { color: var(--deep-red); } 
.liquidity-color { color: var(--flame-orange); } 
.tax-color { color: var(--pink-accent); }

/* --- Footer --- */
.footer { 
    padding: 40px 0; 
    background-color: var(--carbon-black); 
    color: var(--eggshell-cream); 
    position: relative; 
    border-top: 1px solid rgba(255, 255, 255, 0.15); 
}
.footer::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url('images/emoji-pattern.png'); 
    background-size: 300px; 
    opacity: 0.02; 
    z-index: 0; 
}
.footer__wrapper { 
    position: relative; 
    z-index: 1; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.footer__copyright { 
    font-size: 1rem; 
}
.footer__socials { 
    display: flex; 
    gap: 20px; 
}
.footer__socials img { 
    height: 32px; 
    width: auto; 
    transition: transform 0.2s ease, filter 0.2s ease; 
}
.footer__socials a:hover img { 
    transform: scale(1.15); 
    filter: drop-shadow(0 0 8px var(--sunburst-yellow)); 
}

/* --- Responsive & Mobile Optimizations --- */
@media (max-width: 992px) {
    /* Hide desktop nav and show mobile hamburger */
    .header__nav--desktop { display: none; }
    .mobile-nav-toggle { display: block; }
}

/* Mobile scaling fixes */
@media (max-width: 768px) {
    #scaling-container {
        background-color: var(--eggshell-cream);
    }
    
    body {
        background-color: var(--eggshell-cream);
    }
    
    #content-canvas {
        min-width: 1920px;
        background-color: var(--eggshell-cream);
    }
}