/* Reset and Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-body-md);
    color: var(--color-on-background);
    background-color: var(--color-background);
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    /* This overrides the inline background image set on body in HTMLs if needed, or we leave inline styles there. 
       We will keep inline styles for body background image since it's hardcoded there. */
}

/* Typography Utilities */
.font-body-md { font-family: var(--font-body-md); font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); font-weight: var(--text-body-md-weight); }
.font-headline-lg { font-family: var(--font-headline-lg); font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-line-height); font-weight: var(--text-headline-lg-weight); }
.font-headline-md { font-family: var(--font-headline-md); font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-line-height); font-weight: var(--text-headline-md-weight); }
.font-display-lg-mobile { font-family: var(--font-display-lg-mobile); font-size: var(--text-display-lg-mobile-size); line-height: var(--text-display-lg-mobile-line-height); font-weight: var(--text-display-lg-mobile-weight); letter-spacing: var(--text-display-lg-mobile-spacing); }
.font-code-sm { font-family: var(--font-code-sm); font-size: var(--text-code-sm-size); line-height: var(--text-code-sm-line-height); font-weight: var(--text-code-sm-weight); }
.font-body-lg { font-family: var(--font-body-lg); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); font-weight: var(--text-body-lg-weight); }
.font-display-lg { font-family: var(--font-display-lg); font-size: var(--text-display-lg-size); line-height: var(--text-display-lg-line-height); font-weight: var(--text-display-lg-weight); letter-spacing: var(--text-display-lg-spacing); }
.font-data-label { font-family: var(--font-data-label); font-size: var(--text-data-label-size); line-height: var(--text-data-label-line-height); font-weight: var(--text-data-label-weight); letter-spacing: var(--text-data-label-spacing); }

/* Common Structural Classes */
.container {
    width: 100%;
    max-width: 1280px; /* max-w-7xl */
    margin-inline: auto;
}

/* Reusable UI Components */
.sticker-shadow { box-shadow: 6px 6px 0px 0px var(--color-shadow); }
.sticker-hover:hover { transform: translate(4px, 4px) rotate(-1deg); box-shadow: 2px 2px 0px 0px var(--color-shadow); }
.sticker-float:hover { transform: scale(1.05) rotate(5deg); }

.sketch-border { border: 4px solid var(--color-on-background); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; }
.sketchy-border { border: 4px solid var(--color-on-surface); border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px; }
.sketchy-border-secondary { border: 2px solid var(--color-on-surface); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }

.paper-texture { background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); }

.neo-shadow { box-shadow: 8px 8px 0px 0px var(--color-shadow); border-color: var(--color-background) !important; }
.neo-shadow-hover:hover { box-shadow: 2px 2px 0px 0px var(--color-shadow); transform: translate(6px, 6px); }
.neo-shadow-tertiary { box-shadow: 8px 8px 0px 0px var(--color-shadow); border-color: var(--color-background) !important; }
.neo-shadow-primary { box-shadow: 8px 8px 0px 0px var(--color-shadow); border-color: var(--color-background) !important; }
.neo-shadow-secondary { box-shadow: 8px 8px 0px 0px var(--color-shadow); border-color: var(--color-background) !important; }
.hard-shadow { box-shadow: 4px 4px 0px 0px var(--color-on-surface); }
.hard-shadow-primary { box-shadow: 4px 4px 0px 0px var(--color-primary-container); }

.sticker-rotate-1 { transform: rotate(2deg); }
.sticker-rotate-neg-1 { transform: rotate(-2deg); }
.sticker-rotate-2 { transform: rotate(3deg); }
.sticker-rotate-neg-2 { transform: rotate(-3deg); }

.scribble-underline { position: relative; display: inline-block; }
.scribble-underline::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q 25 0, 50 5 T 100 5' stroke='%23ff5c00' stroke-width='3' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; z-index: -1; }

.grid-bg { background-image: linear-gradient(to right, var(--color-surface-variant) 1px, transparent 1px), linear-gradient(to bottom, var(--color-surface-variant) 1px, transparent 1px); background-size: 24px 24px; }

@keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0.5; } 33% { transform: translateY(-20px) translateX(10px); opacity: 0.8; } 66% { transform: translateY(-10px) translateX(-10px); opacity: 0.3; } 100% { transform: translateY(0) translateX(0); opacity: 0.5; } }
.particle { position: absolute; background: var(--color-primary-container); width: 4px; height: 4px; border-radius: 50%; animation: float 4s infinite ease-in-out; }

/* Responsive Media Queries Setup */
@media (min-width: 768px) {
    /* md breakpoint setup if needed */
}

@media (min-width: 1024px) {
    /* lg breakpoint setup if needed */
}

/* Animations */
@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes popIn {
    0% { transform: scale(0.8) rotate(var(--pop-rotate, -5deg)); opacity: 0; }
    70% { transform: scale(1.1) rotate(var(--pop-rotate, 5deg)); opacity: 1; }
    100% { transform: scale(1) rotate(var(--final-rotate, 0deg)); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Base Animate Class */
.animate-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
}

/* Modifier Classes */
.animate-on-scroll.is-visible.slide-up {
    animation: slideUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.animate-on-scroll.is-visible.pop-in {
    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-on-scroll.is-visible.slide-left {
    animation: slideInLeft 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.animate-on-scroll.is-visible.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

/* Stagger Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Micro-interactions */
@keyframes subtleBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes subtleWobble {
    0% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
    100% { transform: rotate(-1deg); }
}

.breathe-infinite {
    animation: subtleBreathe 4s infinite ease-in-out;
}

.wobble-infinite {
    animation: subtleWobble 6s infinite ease-in-out;
}
/* Navbar */
.top-nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--color-background); backdrop-filter: blur(10px); opacity: 0.98;
    backdrop-filter: blur(12px);
    border-bottom: 4px solid var(--color-on-background);
    box-shadow: 4px 4px 0px 0px var(--color-shadow);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-base) var(--spacing-container-padding);
    max-width: 100%;
    margin: 0 auto;
}

.brand-logo {
    color: var(--color-primary-container);
    font-weight: bold;
    white-space: nowrap;
    transform: rotate(-2deg);
    background-color: var(--color-surface-container-lowest);
    padding: 0.25rem 1rem;
    box-shadow: 4px 4px 0px 0px var(--color-shadow);
    letter-spacing: -0.05em;
}

.nav-links {
    display: none;
    gap: var(--spacing-element-gap);
    align-items: center;
    position: relative;
}

@media (min-width: 768px) {
    .nav-links { display: flex; }
}

.nav-line-svg {
    position: absolute;
    top: -0.5rem;
    left: 0;
    width: 100%;
    height: 3rem;
    color: var(--color-outline-variant);
    pointer-events: none;
    opacity: 0.5;
}

.nav-link {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: all 0.2s;
    background-color: var(--color-surface); opacity: 0.8;
    padding: 0.25rem 0.5rem;
    border: 2px solid transparent;
}
.nav-link:hover {
    color: var(--color-primary-container);
    border-color: var(--color-on-background);
    box-shadow: 2px 2px 0px 0px var(--color-shadow);
    transform: rotate(2deg) scale(1.1);
}
.nav-link-alt:hover {
    transform: rotate(-2deg) scale(1.1);
}
.nav-link.active {
    color: var(--color-primary-container);
    border-bottom: 3px dashed var(--color-primary-container);
    padding-bottom: 0.25rem;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
}
.nav-link.active:hover {
    transform: rotate(1deg) scale(1.1);
}

.nav-actions { display: flex; align-items: center; gap: var(--spacing-base); }
.nav-icons { display: none; gap: var(--spacing-base); margin-right: 1rem; }
@media (min-width: 768px) { .nav-icons { display: flex; } }
.icon-btn { background: none; border: none; color: var(--color-on-surface); cursor: pointer; transition: color 0.2s; display: flex; }
.icon-btn:hover { color: var(--color-primary-container); }

.btn-primary {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary);
    padding: 0.5rem 1.5rem;
    font-weight: bold;
    border: 4px solid var(--color-on-background);
    box-shadow: 6px 6px 0px 0px var(--color-shadow);
    transition: all 0.2s;
    cursor: pointer;
    transform: rotate(2deg);
}
.btn-primary:hover {
    transform: translate(4px, 4px) rotate(-1deg);
    box-shadow: 2px 2px 0px 0px var(--color-shadow);
}
.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-on-background);
    padding: 1rem 1.5rem;
    border: 4px solid var(--color-on-background);
    box-shadow: 6px 6px 0px 0px var(--color-shadow);
    transition: all 0.2s;
    cursor: pointer;
    transform: rotate(-1deg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-secondary:hover {
    transform: translate(4px, 4px) rotate(-1deg);
    box-shadow: 2px 2px 0px 0px var(--color-shadow);
}
.btn-large {
    padding: 1rem 2rem;
    transform: rotate(1deg);
}

/* Footer */
.site-footer {
    width: 100%;
    margin-top: var(--spacing-section-gap);
    background-color: var(--color-surface-container-lowest);
    border-top: var(--spacing-border-thick) dashed var(--color-on-background);
}
.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-section-gap) var(--spacing-container-padding);
    gap: var(--spacing-base);
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
        gap: 2rem;
    }
}
.footer-brand {
    font-weight: bold;
    color: var(--color-primary-container);
    white-space: nowrap;
    transform: rotate(2deg);
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.footer-link {
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}
.footer-link:hover {
    color: var(--color-primary-container);
    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
    text-decoration-thickness: 4px;
    text-underline-offset: 4px;
}
.footer-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .footer-socials {
        align-items: flex-start;
    }
}
.socials-label {
    color: var(--color-secondary);
    margin-bottom: 0.25rem;
    background-color: var(--color-surface-container-lowest);
    padding: 0.25rem 0.5rem;
    border: var(--spacing-border-thin) solid var(--color-on-background);
    box-shadow: 2px 2px 0px 0px var(--color-shadow);
    display: inline-block;
    transform: rotate(1deg);
}
.social-icons {
    display: flex;
    gap: 1rem;
}
.social-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-on-background);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    box-shadow: 4px 4px 0px 0px var(--color-shadow);
    color: var(--color-on-primary);
    text-decoration: none;
}
.social-icon:hover { transform: scale(1.1); }
.social-1 { background-color: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed); transform: rotate(-3deg); }
.social-2 { background-color: var(--color-primary-container); transform: rotate(2deg); }
.social-3 { background-color: var(--color-secondary-container); transform: rotate(-2deg); }
.social-4 { background-color: var(--color-on-background); transform: rotate(4deg); }

.footer-copyright {
    color: var(--color-on-surface-variant);
    background-color: var(--color-surface-container-lowest);
    border: var(--spacing-border-thin) solid var(--color-on-background);
    padding: 0.25rem 0.75rem;
    transform: rotate(-1deg);
}


html {
    scroll-behavior: smooth;
}

/* Mobile Menu Styles */
.mobile-menu-btn {
    display: flex;
    background: none;
    border: none;
    color: var(--color-on-background);
    cursor: pointer;
    margin-left: 1rem;
}

@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none;
    }
}

/* When the nav-container has mobile-open class */
.nav-container.mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-surface-bright);
    padding: var(--spacing-container-padding);
    border-bottom: 4px solid var(--color-on-background);
    box-shadow: 4px 4px 0px 0px var(--color-shadow);
    align-items: flex-start;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nav-container.mobile-open .nav-links {
        position: relative;
        flex-direction: row;
        width: auto;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        top: 0;
        align-items: center;
    }
}


img {
    max-width: 100%;
    height: auto;
}

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-background);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* subtle texture or pattern could go here */
}

.splash-bg-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: var(--color-on-surface-variant);
    z-index: 0;
}

.splash-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#splash-logo {
    font-size: clamp(3rem, 10vw, 6rem);
    color: var(--color-on-background);
    text-shadow: 4px 4px 0px var(--color-primary-container);
    margin-bottom: 2rem;
    white-space: nowrap;
}

.splash-loader {
    width: 200px;
    height: 12px;
    background: var(--color-surface-container-high);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    position: relative;
    overflow: hidden;
    box-shadow: 4px 4px 0px 0px var(--color-shadow);
    border: 3px solid var(--color-on-background);
}

.splash-loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--color-primary);
}


@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.typed-cursor {
    font-weight: 700;
    margin-left: 2px;
    color: var(--color-primary);
}





@keyframes fadeIcon {
    from { opacity: 0.3; transform: scale(1); }
    to { opacity: 1; transform: scale(1.1); }
}

/* Hide mobile theme toggle on desktop */
@media (min-width: 768px) {
    .mobile-theme-toggle {
        display: none !important;
    }
}