/* Custom CSS for Parallax Website */

/* CSS Custom Properties (Root Variables) */
:root {
    /* Primary Colors */
    --primary-pink: #87CEEB;
    --primary-purple: #007e91;
    --primary-blue: #1e40af;
    --primary-light-blue: #3B82F6;
    --primary-lighter-blue: #60A5FA;
    --primary-sky-blue: #87CEEB;

    /* Background Colors */
    --bg-dark: #000306;
    --bg-white: #ffffff;
    --bg-transparent: transparent;

    /* Gradient Colors */
    --gradient-blue-start: #64bdfe;
    --gradient-blue-end: #97d3ff;

    /* Text Colors */
    --text-white: #ffffff;
    --text-dark: #000306;
    --text-light: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-subtle: rgba(255, 255, 255, 0.5);
    --text-dark-subtle: rgba(255, 255, 255, 0.9);

    /* Overlay Colors */
    --overlay-dark-light: rgba(0, 3, 6, 0.3);
    --overlay-dark-medium: rgba(0, 3, 6, 0.5);
    --overlay-dark-heavy: rgba(0, 3, 6, 0.9);
    --overlay-dark-subtle: rgba(0, 3, 6, 0.1);
    --overlay-dark-minimal: rgba(0, 3, 6, 0.05);
    --overlay-white-light: rgba(255, 255, 255, 0.1);
    --overlay-white-medium: rgba(255, 255, 255, 0.2);
    --overlay-white-heavy: rgba(255, 255, 255, 0.95);
    --overlay-white-full: rgba(255, 255, 255, 1);

    /* Shadow Colors */
    --shadow-black-light: rgba(0, 0, 0, 0.1);
    --shadow-black-medium: rgba(0, 0, 0, 0.2);
    --shadow-black-heavy: rgba(0, 0, 0, 0.3);
    --shadow-black-strong: rgba(0, 0, 0, 0.8);
    --shadow-black-subtle: rgba(0, 0, 0, 0.15);

    /* Pink Shadows (now Light Blue) */
    --shadow-pink-light: rgba(135, 206, 235, 0.3);
    --shadow-pink-medium: rgba(135, 206, 235, 0.4);
    --shadow-pink-heavy: rgba(135, 206, 235, 0.5);

    /* Blue Shadows */
    --shadow-blue-light: rgba(30, 64, 175, 0.2);
    --shadow-blue-medium: rgba(30, 64, 175, 0.3);
    --shadow-blue-heavy: rgba(30, 64, 175, 0.4);
    --shadow-blue-strong: rgba(30, 64, 175, 0.5);
    --shadow-blue-subtle: rgba(30, 64, 175, 0.08);
    --shadow-blue-minimal: rgba(30, 64, 175, 0.1);

    /* Light Blue Shadows */
    --shadow-light-blue-light: rgba(59, 130, 246, 0.05);
    --shadow-light-blue-medium: rgba(59, 130, 246, 0.08);
    --shadow-light-blue-heavy: rgba(59, 130, 246, 0.1);
    --shadow-light-blue-strong: rgba(59, 130, 246, 0.15);
    --shadow-light-blue-glow: rgba(59, 130, 246, 0.4);

    /* Sky Blue Shadows */
    --shadow-sky-blue-light: rgba(96, 165, 250, 0.3);
    --shadow-sky-blue-glow: rgba(96, 165, 250, 0.3);

    /* Gradient Blue Shadows */
    --shadow-gradient-blue-light: rgba(100, 189, 254, 0.3);
    --shadow-gradient-blue-medium: rgba(100, 189, 254, 0.4);

    /* Sky Blue Overlay */
    --overlay-sky-blue-light: rgba(135, 206, 235, 0.1);
}

/* Import Godzilla Font */
@font-face {
    font-family: 'Godzilla';
    src: url('../fonts/Godzilla.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Import Toasty Milk Font */
@font-face {
    font-family: 'Toasty Milk';
    src: url('../fonts/Toasty Milk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--bg-dark);
}

/* Hero Section - Fixed Position */
#home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

/* Preloader Section */
.preloader-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: #87CEEB;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preloader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.progress-bar-bg {
    width: 500px;
    height: 80px;
    background: white;
    border: 4px solid #70769e;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: pulseBorder 6s ease-in-out infinite;
}

@keyframes pulseBorder {

    0%,
    100% {
        border-color: #70769e;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    50% {
        border-color: #5a6a7e;
        box-shadow: 0 4px 20px rgba(112, 118, 158, 0.3);
    }
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #d4e4d5;
    border-radius: 50px;
    transition: none;
    /* Remove CSS transition - let JS handle it for better performance */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    will-change: width;
    /* Hint to browser for optimization */
    contain: layout;
    /* Contain layout calculations for better performance */
    backface-visibility: hidden;
    /* Prevent flickering */
    transform: translateZ(0);
    /* Force hardware acceleration */
}

.progress-emoji {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.8rem;
    color: #70769e;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(0);
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition-delay: 2.5s;
    /* Delay 2.5 seconds */
}

.progress-emoji.show {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: bounceScale 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceScale {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translateX(-50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

.progress-loader-image {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: auto;
    object-fit: contain;
}

.progress-percentage {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: #70769e;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    animation: pulseText 4s ease-in-out infinite;
}

@keyframes pulseText {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Responsive Preloader */
@media (max-width: 768px) {
    .progress-bar-bg {
        width: 350px;
        height: 60px;
    }

    .progress-emoji {
        font-size: 1.2rem;
        transition-delay: 2.5s;
        /* Keep same delay for mobile */
    }

    .progress-loader-image {
        height: 45px;
        right: 8px;
    }

    .progress-percentage {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .progress-bar-bg {
        width: 280px;
        height: 50px;
    }

    .progress-emoji {
        font-size: 1rem;
    }

    .progress-loader-image {
        height: 35px;
        right: 6px;
    }

    .progress-percentage {
        font-size: 1.2rem;
    }
}








@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main Content */
.main-content {
    opacity: 1;
    transition: opacity 0.8s ease;
    visibility: visible;
}

.main-content.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Hero blur overlay - appears when section 2 enters */
.hero-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    opacity: 0;
    transition: all 1s ease !important;
    z-index: 5;
    pointer-events: none;
}

.hero-blur-overlay.active {
    opacity: 1 !important;
    background: var(--overlay-dark-medium) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    transition: all 1s ease !important;
}

/* Parallax Container - Fixed position to prevent scrolling */
.parallax-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Parallax Layers (only layers 3-8) */
.parallax-layer {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    will-change: transform;
    transition: transform 0.2s ease;
    /* Reduced from 0.3s for smoother performance */
    backface-visibility: hidden;
    /* Prevent flickering */
    transform-style: preserve-3d;
    /* Better 3D performance */
    image-rendering: -webkit-optimize-contrast;
    /* Better image rendering for WebKit browsers */
    overflow: hidden;
}

/* Independent Layers (Layer 1 & 2) - Fixed position to prevent scrolling */
.independent-layer {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 5;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* Parallax Layer Speeds (only layers 3-8) - Reduced scale values */
.layer-3 {
    z-index: 2;
    transform: translateZ(-50px) scale(1.05);
    /* Reduced from 1.1 */
}

.layer-4 {
    z-index: 1;
    transform: translateZ(-100px) scale(1.1);
    /* Reduced from 1.2 */
}

.layer-5 {
    z-index: 0;
    transform: translateZ(-150px) scale(1.15);
    /* Reduced from 1.3 */
}

.layer-6 {
    z-index: -1;
    transform: translateZ(-200px) scale(1.2);
    /* Reduced from 1.4 */
}

.layer-7 {
    z-index: -2;
    transform: translateZ(-250px) scale(1.25);
    /* Reduced from 1.5 */
}

.layer-8 {
    z-index: -3;
    transform: translateZ(-300px) scale(1.3);
    /* Reduced from 1.6 */
}

/* Independent Layer Z-index */
.layer-1 {
    z-index: 6;
}

.layer-2 {
    z-index: 5;
}

/* Optimized image rendering for parallax layers */
.parallax-layer img,
.independent-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    image-rendering: -webkit-optimize-contrast;
    filter: brightness(1.02) contrast(1.01) saturate(1.01);
    /* Subtle enhancement */
    transition: filter 0.3s ease;
    transform-origin: center center;
    /* Better transform origin */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    /* Hardware acceleration for images */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    /* Prevent image glitches */
    image-rendering: -webkit-optimize-contrast;
}

/* Additional optimizations to prevent glitches */
.parallax-layer,
.independent-layer {
    transform-origin: center center;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    /* Hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    /* Prevent subpixel rendering issues */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling and reduced glitch */
html {
    scroll-behavior: smooth;
    /* Prevent scroll glitches */
    overflow-x: hidden;
}

/* Optimize scroll performance */
* {
    scroll-behavior: smooth;
}

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

/* Prevent layout shifts during parallax */
.parallax-container {
    contain: layout style paint;
    will-change: transform;
}


/* Hero Title Styling */
.hero-title {
    position: absolute;
    bottom: 80px;
    left: 13%;
    z-index: 20;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    max-width: 80vw;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hero title exit animation when blur appears */
.hero-title.exit {
    opacity: 0 !important;
    transform: translateY(-50px) scale(0.8) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

.hero-title.exit h1 {
    opacity: 0 !important;
    transform: translateY(-30px) scale(0.9) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-title.exit .hero-caption {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* More specific override for exit state */
#home .hero-title.exit {
    opacity: 0 !important;
    transform: translateY(-50px) scale(0.8) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

#home .hero-title.exit h1 {
    opacity: 0 !important;
    transform: translateY(-30px) scale(0.9) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Even more specific override */
body #home .hero-title.exit {
    opacity: 0 !important;
    transform: translateY(-50px) scale(0.8) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

body #home .hero-title.exit h1 {
    opacity: 0 !important;
    transform: translateY(-30px) scale(0.9) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-title h1 {
    font-family: 'Godzilla', 'Impact', 'Arial Black', sans-serif;
    font-weight: normal;
    letter-spacing: 4px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-align: left;
    color: white;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.title-line {
    line-height: 1.1;
    margin-bottom: 15px;
    display: block;
}

.title-line:last-child {
    margin-bottom: 0;
}

/* Hero Caption Styling */
.hero-caption {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.2rem;
    color: var(--text-white);
    text-align: center;
    margin-top: 20px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0;
    animation: fadeInCaption 1s ease forwards;
    animation-delay: 1.2s;
}

@keyframes fadeInCaption {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial Jiggle Animation for each letter on page load */
.hero-title h1 span {
    display: inline-block;
    animation: initialJiggle 1.2s ease-in-out;
    opacity: 1;
    visibility: visible;
}

/* Override jiggle animation when hero title exits */
.hero-title.exit h1 span {
    animation: none !important;
    opacity: 0 !important;
    transform: translateY(-20px) scale(0.9) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Different delay for each letter on initial load */
.hero-title h1 .title-line:nth-child(1) span:nth-child(1) {
    animation-delay: 0.2s;
}

.hero-title h1 .title-line:nth-child(1) span:nth-child(2) {
    animation-delay: 0.3s;
}

.hero-title h1 .title-line:nth-child(1) span:nth-child(3) {
    animation-delay: 0.4s;
}

.hero-title h1 .title-line:nth-child(1) span:nth-child(4) {
    animation-delay: 0.5s;
}

.hero-title h1 .title-line:nth-child(1) span:nth-child(5) {
    animation-delay: 0.6s;
}

.hero-title h1 .title-line:nth-child(2) span:nth-child(1) {
    animation-delay: 0.7s;
}

.hero-title h1 .title-line:nth-child(2) span:nth-child(2) {
    animation-delay: 0.8s;
}

.hero-title h1 .title-line:nth-child(2) span:nth-child(3) {
    animation-delay: 0.9s;
}

/* Initial Jiggle Animation */
@keyframes initialJiggle {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    50% {
        transform: translate(0, 0) rotate(0deg) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Remove old jiggle animation */
.hero-title.scrolled {
    animation: none;
}

/* Fixed Navbar (Hidden by default, appears on scroll) */
.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    width: 100%;
}

.fixed-navbar.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

.navbar-content {
    padding: 20px 40px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Social Icons Styling */
.social-icons {
    display: flex;
    align-items: center;
    gap: 30px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInUp 0.6s ease forwards;
}

/* Staggered animation delays for each social icon */
.social-link:nth-child(1) {
    animation-delay: 0.2s;
}

.social-link:nth-child(2) {
    animation-delay: 0.4s;
}

.social-link:nth-child(3) {
    animation-delay: 0.6s;
}

.social-link:hover {
    opacity: 1 !important;
    transform: scale(1.1) rotate(5deg) !important;
}

/* Fade in animation for social icons */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.social-icon {
    width: 42px;
    height: 42px;
    transition: all 0.3s ease;
    filter: none;
    /* Remove filter to keep original SVG colors */
}

.social-link:hover .social-icon {
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.8)) drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.8));
}

.navbar-title {
    font-family: 'Godzilla', 'Impact', 'Arial Black', sans-serif;
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.navbar-title span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.navbar-title span:hover {
    transform: scale(1.1);
}

/* Content Sections - PARALLAX SCROLL SOLUTION */
#about {
    position: relative;
    z-index: 50;
    background: transparent;
    margin-top: 120vh;
    /* Start lower for parallax effect */
    min-height: 100vh;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    transform: translateY(100px);
    /* Initial offset for parallax */
    transition: transform 0.1s ease-out;
}

/* Section styling with solid backgrounds */
#about {
    background: transparent;
    position: relative;
}

/* Text Shadow for Hero Content */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Custom Button Styles */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-purple) 100%);
    color: white;
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-pink-medium);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Glitch effect on button hover */
.btn-primary:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: glitch 0.6s ease-in-out;
}

@keyframes glitch {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Enhanced smooth scrolling with Lenis */
body {
    overflow-x: hidden;
}

/* Ensure preloader can be scrolled */
html,
body {
    height: auto;
    min-height: 100vh;
}

/* Spring Bounce Animation Keyframes */
@keyframes springBounce {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    15% {
        transform: scale(1.15);
        opacity: 1;
    }

    30% {
        transform: scale(0.95);
        opacity: 1;
    }

    45% {
        transform: scale(1.08);
        opacity: 1;
    }

    60% {
        transform: scale(0.98);
        opacity: 1;
    }

    75% {
        transform: scale(1.03);
        opacity: 1;
    }

    90% {
        transform: scale(0.99);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spring Bounce untuk Slide Content */
@keyframes slideContentBounce {
    0% {
        transform: scale(0.9);
        box-shadow: 0 4px 15px var(--shadow-blue-light);
    }

    15% {
        transform: scale(1.12);
        box-shadow: 0 12px 35px var(--shadow-blue-medium);
    }

    30% {
        transform: scale(0.95);
        box-shadow: 0 6px 20px var(--shadow-blue-light);
    }

    45% {
        transform: scale(1.06);
        box-shadow: 0 10px 28px var(--shadow-blue-medium);
    }

    60% {
        transform: scale(0.98);
        box-shadow: 0 7px 22px var(--shadow-blue-light);
    }

    75% {
        transform: scale(1.02);
        box-shadow: 0 8px 25px var(--shadow-blue-medium);
    }

    90% {
        transform: scale(0.99);
        box-shadow: 0 5px 18px var(--shadow-blue-light);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px var(--shadow-blue-light);
    }
}

/* Spring Bounce untuk Navigation Buttons */
@keyframes navButtonBounce {
    0% {
        transform: translateY(-50%) scale(0.85);
        box-shadow: 0 2px 8px var(--shadow-blue-light);
    }

    15% {
        transform: translateY(-50%) scale(1.2);
        box-shadow: 0 8px 20px var(--shadow-blue-medium);
    }

    30% {
        transform: translateY(-50%) scale(0.9);
        box-shadow: 0 4px 12px var(--shadow-blue-light);
    }

    45% {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 16px var(--shadow-blue-medium);
    }

    60% {
        transform: translateY(-50%) scale(0.95);
        box-shadow: 0 3px 10px var(--shadow-blue-light);
    }

    75% {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 5px 14px var(--shadow-blue-medium);
    }

    90% {
        transform: translateY(-50%) scale(0.98);
        box-shadow: 0 2px 9px var(--shadow-blue-light);
    }

    100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 2px 8px var(--shadow-blue-light);
    }
}

@keyframes slideBounce {
    0% {
        transform: scale(1.05);
    }

    20% {
        transform: scale(1.15);
    }

    40% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1.08);
    }

    80% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1.05);
    }
}

@keyframes rotationBounce {
    0% {
        transform: translate(-50%, -50%) rotate(var(--bounce-rotation)) translateY(var(--translate-y));
    }

    15% {
        transform: translate(-50%, -50%) rotate(calc(var(--bounce-rotation) + 8deg)) translateY(var(--translate-y));
    }

    30% {
        transform: translate(-50%, -50%) rotate(calc(var(--bounce-rotation) - 5deg)) translateY(var(--translate-y));
    }

    45% {
        transform: translate(-50%, -50%) rotate(calc(var(--bounce-rotation) + 3deg)) translateY(var(--translate-y));
    }

    60% {
        transform: translate(-50%, -50%) rotate(calc(var(--bounce-rotation) - 2deg)) translateY(var(--translate-y));
    }

    75% {
        transform: translate(-50%, -50%) rotate(calc(var(--bounce-rotation) + 1deg)) translateY(var(--translate-y));
    }

    90% {
        transform: translate(-50%, -50%) rotate(calc(var(--bounce-rotation) - 0.5deg)) translateY(var(--translate-y));
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--bounce-rotation)) translateY(var(--translate-y));
    }
}

/* Smooth transitions for all elements */
/* Global transition for smooth scrolling - exclude hero title and blur overlay */
*:not(.hero-title):not(.hero-title *):not(.hero-title h1):not(.hero-title h1 span):not(.hero-blur-overlay) {
    transition: transform 0.1s ease-out;
}

/* Hide vertical scrollbar but keep scroll functionality */
html,
body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .parallax-layer img,
    .independent-layer img {
        object-position: center;
    }

    .text-shadow {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }

    #about {
        margin-top: 120vh;
        transform: translateY(80px);
    }

    /* Mobile CA Coming Soon Box adjustments */
    .ca-coming-soon-box {
        padding: 10px 16px;
        margin: 0 12px;
        gap: 8px;
    }

    .ca-label {
        font-size: 1rem;
        letter-spacing: 0.3px;
    }

    .coming-soon-text {
        font-size: 1rem;
        letter-spacing: 0.3px;
    }

    /* Mobile Copy Button adjustments */
    .copy-button {
        padding: 5px;
        margin-left: 6px;
    }

    .copy-icon {
        font-size: 14px;
    }

    /* Mobile H1 adjustments */
    h1 {
        font-size: 3rem;
        letter-spacing: 1px;
    }

    /* Mobile hero title adjustments */
    .hero-title {
        bottom: 80px;
        left: 30px;
        z-index: 20;
    }

    .hero-title h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
        line-height: 1.1;
    }

    .hero-caption {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-top: 15px;
    }

    .hero-title.scrolled h1 {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .hero-title.scrolled {
        top: 20px;
        right: 20px;
        bottom: auto;
        left: auto;
    }

    .title-line {
        margin-bottom: 10px;
    }

    .hero-title.scrolled .title-line {
        margin-bottom: 5px;
    }

    /* Mobile navbar adjustments */
    .fixed-navbar {
        left: 0;
        right: 0;
        width: 100%;
    }

    .navbar-content {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .social-icons {
        gap: 20px;
        order: 2;
    }

    .social-icon {
        width: 36px;
        height: 36px;
    }

    .navbar-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
        order: 1;
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;
        animation-delay: 0.1s;
    }

    /* Mobile features section adjustments */
    #features {
        padding: 3rem 0;
    }

    /* Mobile batu divider adjustments */
    .batu-svg-image {
        width: 100%;
        height: auto;
    }

    .nav-decoration-image {
        width: 300px;
        right: 10px;
    }

    .nav-decoration-image:hover {
        transform: translateY(-50%) scale(1.02) !important;
        transition: all 0.3s ease !important;
    }

    /* Mobile footer adjustments */
    .footer-section {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 30;
        transform: translateY(100vh);
    }
}

/* Focus styles for accessibility */
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary-pink);
    outline-offset: 2px;
}

/* Override focus for copy-button */
.copy-button:focus {
    outline-color: #87CEEB;
    /* Light blue */
}

/* Animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom AOS Bounce Up Animation */
[data-aos="bounce-up"] {
    opacity: 1 !important;
    transform: translateY(100px);
    transition-property: transform;
}

[data-aos="bounce-up"].aos-animate {
    opacity: 1 !important;
    transform: translateY(0);
    animation: bounceUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Force no opacity changes for AOS */
[data-aos] {
    opacity: 1 !important;
}

[data-aos].aos-animate {
    opacity: 1 !important;
}

@keyframes bounceUp {
    0% {
        transform: translateY(100px);
    }

    25% {
        transform: translateY(-20px);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(-5px);
    }

    80% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Removed staggered animations to prevent random loading order */
.parallax-layer,
.independent-layer {
    opacity: 1;
    transform: none;
}

/* Section entrance animations */
#about {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#about.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced section styling */
#about .container {
    background: rgba(0, 3, 6, 0.9);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Section headings */
#about h2 {
    color: var(--primary-pink);
    text-shadow: 0 0 20px var(--shadow-pink-light);
}







/* Sticky Section */
.sticky-section {
    position: sticky;
    top: 0;
    z-index: 15;
    background: transparent;
    /* Completely transparent background */
    border: none;
    box-shadow: none;
}

/* Enhanced section styling with glassmorphism */
#about .container {
    padding-top: 0 !important;
    background: transparent;
    border-radius: 20px;
    padding: 2rem;
    border: none;
    box-shadow: none;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Mission box with enhanced glassmorphism */
.mission-box {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
    transition: all 0.3s ease;
    text-align: left;
}

.mission-box:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

/* Section headings with blue theme */
#about h2 {
    color: #3B82F6;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    font-weight: bold;
}

#about h3 {
    color: #60A5FA;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

/* Text styling with blue accents */
#about p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* About Row 2: CA Coming Soon Box */
.about-row-2 {
    margin-top: 8vh;
    flex-direction: column;
    gap: 20px;
}

.ca-coming-soon-box {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Trading Buttons Container */
.trading-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.trading-buttons-container.show {
    opacity: 1;
    transform: translateY(0);
}

.trading-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: 'Toasty Milk', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.trading-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.buy-button {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-purple) 100%);
    color: white;
    box-shadow: 0 4px 15px var(--shadow-pink-light);
}

.buy-button:hover {
    box-shadow: 0 6px 20px var(--shadow-pink-medium);
}

.chart-button {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.chart-button:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.ca-coming-soon-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 3, 6, 0.05), transparent);
    transition: left 0.4s ease;
}

.ca-coming-soon-box:hover::before {
    left: 100%;
}

.ca-coming-soon-box:hover {
    transform: translateY(-2px) scale(1.01);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ca-text {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ca-label {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0.5px;
}

.coming-soon-text {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.1rem;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Copy Button Styling */
.copy-button {
    background: none;
    border: 1px solid transparent;
    /* Add transparent border */
    padding: 6px;
    border-radius: 6px;
    position: relative;
    z-index: 52;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.copy-button:hover {
    background: rgba(0, 3, 6, 0.1);
    transform: scale(1.1);
}

.copy-button:active {
    transform: scale(0.95);
    border-color: #87CEEB;
    /* Light blue border on click */
}

.copy-icon {
    font-size: 16px;
    color: var(--text-dark);
    opacity: 0.7;
    transition: all 0.2s ease;
    line-height: 1;
}

.copy-button:active .copy-icon {
    color: var(--primary-sky-blue);
    /* Light blue icon on click */
}

.copy-button:hover .copy-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Success state for copy feedback */
.copy-button.copied {
    background: rgba(135, 206, 235, 0.1);
    /* Light blue background */
}

.copy-button.copied .copy-icon {
    color: var(--primary-sky-blue);
    /* Light blue icon */
    opacity: 1;
}

.mission-box p {
    color: rgba(255, 255, 255, 0.85);
}

/* Features Section - New section below about */
#features {
    position: relative;
    z-index: 25;
    background: url('../assets/images/sec3.png') center center/cover no-repeat;
    margin-top: 0;
    min-height: 100vh;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    transform: translateY(0);
    transition: transform 0.1s ease-out;
    padding: 5rem 0;
    overflow: hidden;
    pointer-events: none;
}

/* Pastikan features section tidak menghalangi tombol navigation */
#features * {
    pointer-events: none;
}

/* Position carousel to show middle section */
#features .carousel-container {
    margin-top: -1200px;
    /* Move container up to show middle section (hide 85% top) */
}

/* Features Section Overlay - Removed */

/* Batu SVG Divider */
.batu-divider {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: 55;
    overflow: visible;
    transform: translateY(0px) !important;
    /* Force no parallax */
    will-change: auto;
    /* Disable GPU acceleration for parallax */
}

.batu-svg-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.nav-decoration-image {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    width: 500px;
    height: auto;
    z-index: 60;
    transition: all 0.3s ease;
    cursor: pointer;
    object-fit: contain;
}

.nav-decoration-image:hover {
    transform: translateY(-50%) scale(1.05) !important;
    transition: all 0.3s ease !important;
}

/* About Section Hover Effects */
.about-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    z-index: 51;
}

.about-image-container:hover {
    transform: scale(1.1);
}

.about-image-container img {
    max-width: 100%;
    height: auto;
    filter: brightness(1.1) contrast(1.05) saturate(1.1);
    transition: filter 0.3s ease;
}

.about-image-container:hover img {
    filter: brightness(1.2) contrast(1.1) saturate(1.2);
}

/* Circular Carousel Styles */
.carousel-container {
    position: relative;
    width: 100vw;
    height: 1608px;
    /* Height: 650px (top) + 540px (slide height) + 650px (bottom) + 368px (extra space) */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: visible;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border: none;
    border-radius: 20px;
    box-shadow: none;
    background: transparent;
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

/* Pastikan slides tidak menghalangi tombol navigation */
.carousel-slides {
    pointer-events: none;
}

.carousel-slides * {
    pointer-events: none;
}

/* Hover effect for carousel container - Removed */

.carousel-center {
    display: none;
    /* Hide carousel center */
}

.carousel-title {
    font-family: 'Godzilla', 'Impact', 'Arial Black', sans-serif;
    font-size: 2rem;
    color: var(--primary-pink);
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 20px var(--shadow-pink-heavy);
    letter-spacing: 2px;
}

.carousel-subtitle {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    letter-spacing: 1px;
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 432px;
    height: 540px;
    /* Width tetap 432px, height ditambah 25% = 540px */
    transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        box-shadow 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    will-change: transform;
    cursor: pointer;
}

.slide-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%);
    border-radius: 50px;
    padding: 0;
    box-shadow: 0px 4px 15px rgba(135, 206, 235, 0.6),
        0 0 20px rgba(135, 206, 235, 0.5),
        0 0 40px rgba(135, 206, 235, 0.3),
        inset 0 0 20px rgba(135, 206, 235, 0.1);
    border: 3px solid rgba(135, 206, 235, 0.9);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    position: relative;
}

.slide-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%,
            rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slide:hover .slide-content::before {
    opacity: 1;
}

.slide:hover .slide-content {
    box-shadow: 0px 8px 25px rgba(135, 206, 235, 0.8),
        0 0 30px rgba(135, 206, 235, 0.7),
        0 0 60px rgba(135, 206, 235, 0.5),
        inset 0 0 30px rgba(135, 206, 235, 0.2);
    border: 3px solid rgba(135, 206, 235, 1);
}

.slide-image {
    width: 100%;
    height: 100%;
    border-radius: 47px;
    /* 50px - 3px border = 47px untuk menyesuaikan dengan border */
    overflow: hidden;
    margin-bottom: 0;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    transform: scale(-1, -1);
}

.slide:hover .slide-image img {
    transform: scale(-1.1, -1.1);
}

.slide-text {
    display: none;
}

.slide-text h3 {
    display: none;
}

.slide-text p {
    display: none;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: white;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    color: var(--primary-blue);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1000 !important;
    display: flex;
    align-items: center;
    /* Disabled bounce animation */
    justify-content: center;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto !important;
    position: relative !important;
}

/* Invisible clickable area untuk tombol navigation */
.carousel-nav::before {
    content: '';
    position: absolute;
    top: -25px;
    left: -25px;
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001 !important;
    pointer-events: auto !important;
}

.carousel-nav:hover {
    background: #1e40af !important;
    color: white !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.carousel-nav:active {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.1s ease !important;
}

/* Force tombol navigation selalu bisa diklik */
.carousel-nav,
.carousel-nav *,
.carousel-nav::before,
.carousel-nav::after {
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
}

/* Override untuk semua elemen yang mungkin menghalangi */
.carousel-nav {
    z-index: 1000 !important;
    pointer-events: auto !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Pastikan tombol tidak tertutup oleh elemen lain */
.carousel-prev,
.carousel-next {
    z-index: 1000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
}

/* Override untuk semua elemen yang mungkin menghalangi tombol */
.carousel-nav,
.carousel-prev,
.carousel-next {
    z-index: 1000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
}

/* Pastikan tombol navigation selalu di atas semua elemen */
.carousel-nav {
    z-index: 1000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
}

/* Override untuk semua elemen yang mungkin menghalangi */
.carousel-nav * {
    pointer-events: auto !important;
    z-index: 1000 !important;
}

/* Pastikan tombol tidak tertutup oleh elemen lain */
.carousel-nav::before {
    z-index: 1001 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
}

.carousel-prev {
    left: calc(50% - 286px);
    /* 432px (slide width) + 140px = 572px, half = 286px */
    bottom: -60px;
    top: auto;
    transform: translateY(-50%);
}

.carousel-next {
    right: calc(50% - 286px);
    /* 432px (slide width) + 140px = 572px, half = 286px */
    bottom: -60px;
    top: auto;
    transform: translateY(-50%);
}

/* Slide positioning - Initial setup with more distance from center */
/* Slide positioning is now handled by JavaScript */

/* Active slide styling */
.slide.active {
    z-index: 5;
}

.slide.active .slide-content {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-purple) 100%);
    box-shadow: 0px 8px 25px rgba(135, 206, 235, 0.8),
        0 0 30px rgba(135, 206, 235, 0.7),
        0 0 60px rgba(135, 206, 235, 0.5),
        inset 0 0 30px rgba(135, 206, 235, 0.2);
    border: 3px solid rgba(135, 206, 235, 1);
}

/* Features Section Animation - Disabled */
#features {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

#features.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Footer Section - Fixed at bottom */
.footer-section {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 30;
    pointer-events: none;
    transform: translateY(100vh);
    /* Start hidden below viewport */
    transition: transform 0.5s ease-out;
    opacity: 1;
    background: transparent;
    align-items: flex-end;
}

/* Pastikan footer tidak menghalangi tombol navigation */
.footer-section * {
    pointer-events: none !important;
}

/* Footer section when visible */
.footer-section.visible {
    transform: translateY(0);
    pointer-events: all;
}

/* Show floating footer when footer section is visible */
.footer-section.visible .floating-footer {
    opacity: 1;
}

.footer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    display: block;
}

/* Floating Footer with Glassmorphism */
.floating-footer {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    z-index: 1001;
    padding: 0 1rem;
    pointer-events: all;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.footer-content {
    background: var(--overlay-white-light);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.footer-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
}


.footer-brand {
    text-align: center;
    margin-bottom: 0.25rem;
}

.footer-title {
    font-family: 'Godzilla', 'Impact', 'Arial Black', sans-serif;
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 1.5px;
    color: var(--primary-pink);
    margin: 0 0 0.1rem 0;
}

.footer-subtitle {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    margin: 0;
}

.footer-bottom {
    text-align: center;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6rem;
    margin: 0;
    letter-spacing: 0.2px;
}

/* Responsive Design for Floating Footer */
@media (max-width: 768px) {
    .floating-footer {
        bottom: 3rem;
        padding: 0 0.5rem;
        max-width: 500px;
    }

    .footer-content {
        padding: 0.4rem;
        border-radius: 6px;
    }

    .footer-title {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .footer-subtitle {
        font-size: 0.6rem;
    }

    .footer-bottom {
        padding-top: 0.2rem;
    }

    .footer-bottom p {
        font-size: 0.55rem;
    }
}

@media (max-width: 480px) {
    .floating-footer {
        bottom: 2.5rem;
        padding: 0 0.25rem;
        max-width: 400px;
    }

    .footer-content {
        padding: 0.3rem;
        border-radius: 4px;
    }

    .footer-title {
        font-size: 0.9rem;
        letter-spacing: 0.8px;
    }

    .footer-subtitle {
        font-size: 0.55rem;
    }

    .footer-bottom p {
        font-size: 0.5rem;
    }
}

/* Responsive Design for Circular Carousel */
@media (max-width: 768px) {
    .carousel-container {
        width: 100vw;
        height: 1450px;
        /* Height: 500px (top) + 450px (slide height) + 500px (bottom) + 340px (extra space) */
    }

    #features .carousel-container {
        margin-top: -800px;
        /* Move container up to show middle section (hide 85% top) */
    }

    .carousel-container {
        border: none;
        border-radius: 15px;
        box-shadow: none;
        background: transparent;
    }

    .slide {
        width: 360px;
        height: 450px;
        /* Width tetap 360px, height ditambah 25% = 450px */
        transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
            box-shadow 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        will-change: transform;
    }

    .slide-content {
        padding: 0;
        border-radius: 40px;
        border: 3px solid var(--primary-blue);
    }

    .slide-image {
        border-radius: 37px;
        /* 40px - 3px border = 37px untuk menyesuaikan dengan border */
    }

    .slide-text h3 {
        font-size: 1rem;
    }

    .slide-text p {
        font-size: 0.7rem;
    }

    .carousel-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    .carousel-subtitle {
        font-size: 0.9rem;
    }

    .carousel-center {
        padding: 1.5rem;
        border-radius: 15px;
    }

    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: 2px solid var(--primary-blue);
        background: white;
        color: var(--primary-blue);
        z-index: 1000 !important;
        pointer-events: auto !important;
        position: absolute !important;
        cursor: pointer !important;
    }

    .carousel-prev {
        left: calc(50% - 230px);
        /* 360px (slide width) + 100px = 460px, half = 230px */
        transform: translateY(-50%);
    }

    .carousel-next {
        right: calc(50% - 230px);
        /* 360px (slide width) + 100px = 460px, half = 230px */
        transform: translateY(-50%);
    }

    .carousel-indicators {
        bottom: -50px;
    }

    .indicator {
        width: 10px;
        height: 10px;
    }

    /* Adjust slide positioning for smaller carousel */
    /* Slide positioning handled by JavaScript */
}

@media (max-width: 480px) {
    .carousel-container {
        width: 100vw;
        height: 1180px;
        /* Height: 350px (top) + 360px (slide height) + 350px (bottom) + 420px (extra space) */
    }

    #features .carousel-container {
        margin-top: -500px;
        /* Move container up to show middle section (hide 85% top) */
    }

    .carousel-container {
        border: none;
        border-radius: 10px;
        box-shadow: none;
        background: transparent;
    }

    .slide {
        width: 288px;
        height: 360px;
        /* Width tetap 288px, height ditambah 25% = 360px */
        transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
            box-shadow 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        will-change: transform;
    }

    .slide-content {
        padding: 0;
        border-radius: 30px;
        border: 3px solid var(--primary-blue);
    }

    .slide-image {
        border-radius: 27px;
        /* 30px - 3px border = 27px untuk menyesuaikan dengan border */
    }

    .slide-text h3 {
        font-size: 0.9rem;
    }

    .slide-text p {
        font-size: 0.6rem;
    }

    .carousel-title {
        font-size: 1.2rem;
        letter-spacing: 0.5px;
    }

    .carousel-subtitle {
        font-size: 0.8rem;
    }

    .carousel-center {
        padding: 1rem;
        border-radius: 12px;
    }

    .carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        border: 2px solid var(--primary-blue);
        background: white;
        color: var(--primary-blue);
        z-index: 1000 !important;
        pointer-events: auto !important;
        position: absolute !important;
        cursor: pointer !important;
    }

    .carousel-prev {
        left: calc(50% - 194px);
        /* 288px (slide width) + 100px = 388px, half = 194px */
        transform: translateY(-50%);
    }

    .carousel-next {
        right: calc(50% - 194px);
        /* 288px (slide width) + 100px = 388px, half = 194px */
        transform: translateY(-50%);
    }

    .carousel-indicators {
        bottom: -40px;
        gap: 8px;
    }

    .indicator {
        width: 8px;
        height: 8px;
    }

    /* Adjust slide positioning for mobile carousel */
    /* Slide positioning handled by JavaScript */
}

/* Responsive Design for Trading Buttons */
@media (max-width: 768px) {
    .trading-buttons-container {
        flex-direction: column;
        gap: 12px;
    }

    .trading-button {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .trading-buttons-container {
        gap: 10px;
    }

    .trading-button {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* FORCE TOMBOL NAVIGATION SELALU BISA DIKLIK - OVERRIDE SEMUA */
.carousel-nav,
.carousel-prev,
.carousel-next {
    z-index: 1000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Clean navigation button styling */
.carousel-nav {
    background: white !important;
    border: 2px solid #1e40af !important;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2) !important;
}

/* Force tombol navigation selalu bisa diklik */
.carousel-nav,
.carousel-prev,
.carousel-next {
    z-index: 9999 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Pastikan tombol tidak tertutup oleh elemen lain */
.carousel-nav::before {
    z-index: 10000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* Force tombol navigation selalu di atas semua elemen */
.carousel-nav,
.carousel-prev,
.carousel-next {
    z-index: 9999 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override untuk semua elemen yang mungkin menghalangi */
.carousel-nav * {
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* Pastikan tombol tidak tertutup oleh elemen lain */
.carousel-nav::before {
    z-index: 10000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* Pastikan tombol tidak tertutup oleh elemen lain */
.carousel-nav::before {
    z-index: 10000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* SOLUSI TOMBOL NAVIGATION TIDAK BISA DIKLIK */
.carousel-nav,
.carousel-prev,
.carousel-next {
    z-index: 9999 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel-nav *,
.carousel-prev *,
.carousel-next * {
    pointer-events: auto !important;
    z-index: 9999 !important;
}

.carousel-nav::before,
.carousel-prev::before,
.carousel-next::before {
    z-index: 10000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* SOLUSI AGGRESSIVE TOMBOL NAVIGATION SELALU BISA DIKLIK */
.carousel-nav,
.carousel-prev,
.carousel-next {
    z-index: 999999 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
    border: 2px solid #1e40af !important;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2) !important;
}

.carousel-nav *,
.carousel-prev *,
.carousel-next * {
    pointer-events: auto !important;
    z-index: 999999 !important;
}

.carousel-nav::before,
.carousel-prev::before,
.carousel-next::before {
    z-index: 1000000 !important;
    pointer-events: auto !important;
    position: absolute !important;
    cursor: pointer !important;
    background: transparent !important;
    width: 120px !important;
    height: 120px !important;
    top: -35px !important;
    left: -35px !important;
}

/* FORCE SEMUA ELEMEN LAIN TIDAK MENGHALANGI */
* {
    pointer-events: none !important;
}

/* Exception untuk about section dan elemen interaktif */
#about,
#about *,
.about-image-container,
.about-image-container *,
.copy-button,
.copy-button *,
.ca-coming-soon-box,
.ca-coming-soon-box *,
.nav-decoration-image,
.nav-decoration-image *,
.batu-divider,
.batu-divider *,
button,
button *,
a,
a *,
input,
input *,
textarea,
textarea *,
select,
select * {
    pointer-events: auto !important;
}

/* EXCEPTION: TOMBOL NAVIGATION DAN ELEMENNYA */
.carousel-nav,
.carousel-prev,
.carousel-next,
.carousel-nav *,
.carousel-prev *,
.carousel-next *,
.carousel-nav::before,
.carousel-prev::before,
.carousel-next::before,
.carousel-nav::after,
.carousel-prev::after,
.carousel-next::after {
    pointer-events: auto !important;
}

/* FORCE TOMBOL NAVIGATION DI ATAS SEMUA */
.carousel-nav,
.carousel-prev,
.carousel-next {
    position: absolute !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
    border: 2px solid #1e40af !important;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2) !important;
}

/* Slide Overlay Text Styling */
.slide-overlay-text {
    vertical-align: top;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%) scale(-1, -1);
    text-align: center;
    z-index: 10;
    width: 90%;
    pointer-events: none;
}

.overlay-small {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.8rem;
    color: white;
    text-shadow:
        3px 3px 0px rgba(0, 0, 0, 0.8),
        -1px -1px 0px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

.overlay-large {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 4.5rem;
    color: white;
    text-shadow:
        4px 4px 0px rgba(0, 0, 0, 0.9),
        -2px -2px 0px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 0, 0, 0.6);
    letter-spacing: 3px;
    font-weight: bold;
    line-height: 1;
}

/* Responsive Overlay Text */
@media (max-width: 768px) {
    .overlay-small {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
    }

    .overlay-large {
        font-size: 3.5rem;
        letter-spacing: 2px;
    }
}

@media (max-width: 480px) {
    .overlay-small {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

    .overlay-large {
        font-size: 2.8rem;
        letter-spacing: 1.5px;
    }
}

/* Slide 0 - Text Only Slide */
.slide-text-only .slide-content-text {
    background: linear-gradient(135deg, #87CEEB 0%, #4A90E2 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px !important;
    transform: scale(-1, -1);
}

.slide-text-full {
    display: block !important;
    text-align: left;
    width: 100%;
    color: white;
}

.slide-text-full h3 {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
    text-align: left;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    display: block !important;
}

.slide-text-full p {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.1rem;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.6;
    text-align: left;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    display: block !important;
}

.slide-signature {
    font-family: 'Toasty Milk', 'Arial', sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    margin-top: 1.5rem !important;
    text-align: left;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive Slide 0 Text */
@media (max-width: 768px) {
    .slide-text-only .slide-content-text {
        padding: 30px !important;
    }

    .slide-text-full h3 {
        font-size: 2rem;
        margin-bottom: 1.2rem;
    }

    .slide-text-full p {
        font-size: 0.95rem;
        margin-bottom: 0.8rem;
    }

    .slide-signature {
        font-size: 1.1rem;
        margin-top: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .slide-text-only .slide-content-text {
        padding: 20px !important;
    }

    .slide-text-full h3 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .slide-text-full p {
        font-size: 0.85rem;
        margin-bottom: 0.7rem;
    }

    .slide-signature {
        font-size: 1rem;
        margin-top: 1rem !important;
    }
}
}
}