/* Main Styles */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Splash Page Adjustments */
.splash-page {
    overflow-y: auto; /* Allow scrolling on mobile if content overflows */
}

@media (min-width: 768px) {
    .splash-page {
        overflow: hidden; /* Prevent scrolling on splash page for desktop */
    }
}

.visible .fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* Initial visible state for splash elements */
.fade-up {
    animation: fadeIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Manga Panel Framing */
.manga-panel {
    position: relative;
    overflow: hidden;
    clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
}

/* Hero Text Mask Effect */
.text-mask {
    -webkit-text-stroke: 1px #111;
    color: transparent;
    transition: all 0.5s ease;
}

.text-mask:hover {
    color: #111;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #333;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff0000;
}