/* Custom Styling Tweaks for Cartoony Roblox Portfolio */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; 
}

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

/* Scroll Animations */
.fade-in-section, .project-card {
    opacity: 0;
    transform: translateY(40px) translateZ(0);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}

/* Hardware Acceleration Class for Smooth 60FPS */
.hardware-accel, .bouncy-btn, .planet-float, .planet-float-alt, .star-twinkle {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Stagger card animations for 3 columns removed for instant response */

.fade-in-section.is-visible, .project-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Bubbly Text Outlines --- */
/* Uses a thick text stroke and drop shadow to match cartoony text */
.title-outline {
    -webkit-text-stroke: 3px #2a2845; /* Dark outline */
    paint-order: stroke fill;
    text-shadow: 0 5px 0 #2a2845;
}

/* --- Custom Cartoony Bouncy Buttons --- */
.bouncy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    border-radius: 9999px; /* Pill shape */
    font-weight: 700;
    font-size: 1.25rem;
    border: 3.5px solid #2a2845; /* Thick border */
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.1s ease;
    color: white;
    text-shadow: 1px 2px 0 rgba(0,0,0,0.3);
    cursor: pointer;
}

.bouncy-btn:active {
    transform: translateY(6px);
}

.btn-cyan {
    background: linear-gradient(180deg, #67e8f9 0%, #06b6d4 100%);
    box-shadow: 0 8px 0 #0f766e, inset 0 4px 0 rgba(255,255,255,0.4);
}
.btn-cyan:active {
    box-shadow: 0 2px 0 #0f766e, inset 0 4px 0 rgba(255,255,255,0.4);
}

.btn-orange {
    background: linear-gradient(180deg, #fdba74 0%, #ea580c 100%);
    box-shadow: 0 8px 0 #9a3412, inset 0 4px 0 rgba(255,255,255,0.4);
}
.btn-orange:active {
    box-shadow: 0 2px 0 #9a3412, inset 0 4px 0 rgba(255,255,255,0.4);
}

/* --- Magical Space Background Elements --- */
.space-gradient {
    background: linear-gradient(180deg, #373357 0%, #525784 100%);
}

/* Star twinkling animation */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
}
.star-twinkle {
    animation: twinkle 3s infinite ease-in-out;
}

/* Floating animation for planets */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}
.planet-float {
    animation: float 6s infinite ease-in-out;
}
.planet-float-alt {
    animation: float-alt 7s ease-in-out infinite;
}

/* Fun logo wobble on hover */
.wobbly-logo:hover .logo-letter {
    display: inline-block;
    animation: wobble 0.5s ease-in-out infinite alternate;
}

@keyframes wobble {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-5px) rotate(5deg); }
}

.logo-letter:nth-child(2) { animation-delay: 0.1s; }
.logo-letter:nth-child(3) { animation-delay: 0.2s; }
.logo-letter:nth-child(4) { animation-delay: 0.3s; }
.logo-letter:nth-child(5) { animation-delay: 0.4s; }



/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    /* Scale down planets to prevent horizontal scroll issues */
    .planet-float {
        transform: scale(0.6) translateZ(0);
        right: -20% !important;
    }
    .planet-float-alt {
        transform: scale(0.6) translateZ(0);
        left: -20% !important;
    }
    
    /* Ensure body doesn't scroll horizontally */
    body {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Improve touch targets for navigation and filters */
    .filter-btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 1.1rem !important;
    }
    
    .nav-link {
        padding: 0.75rem !important;
    }
    
    /* Adjust hero typography */
    header h1 {
        font-size: 3.5rem !important;
        line-height: 1.2 !important;
    }
    
    header p {
        font-size: 1.25rem !important;
        padding: 0 1rem;
    }
}

/* Fix for backdrop-blur overflowing rounded corners in WebKit */
.aspect-video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0); /* Hardware clip */
    will-change: transform;
    filter: brightness(0.85) contrast(1.05); /* Dims the bright pastel placeholders for dark mode */
}


/* Dark subtle overlay tint for thumbnails */
.aspect-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(24, 20, 40, 0.2);
    z-index: 15;
    pointer-events: none;
}

.blur-overlay {
    border-radius: calc(1.5rem - 4px); /* Precisely matches rounded-3xl (1.5rem) minus border-4 (4px) */
    overflow: hidden;
}

/* Optimized Particle Burst Animation */
@keyframes particle-burst {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    60% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2) rotate(var(--rot));
        opacity: 0.9;
    }
    100% {
        transform: translate(calc(-50% + var(--tx) * 1.5), calc(-50% + var(--ty) * 1.5)) scale(0) rotate(calc(var(--rot) * 1.5));
        opacity: 0;
    }
}
.particle {
    animation: particle-burst var(--duration, 0.6s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

/* Fun logo wobble on hover */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}
.wobbly-logo:hover {
    animation: wobble 0.5s infinite ease-in-out;
}

/* Dropdown pop animation */
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.95) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-in {
    animation: pop-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Hover Micro-Interactions (Bouncy Scale & Glowing Shadow) */
.project-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease, opacity 0.4s ease;
    will-change: transform, box-shadow, opacity;
    transform: translateZ(0);
}
.project-card:hover {
    transform: translateY(-5px) translateZ(0); /* Subtle lift, no glow/scale */
    z-index: 10;
}

/* Empty State / Placeholder Polish */
.aspect-video:not(:has(img)):not(:has(video)) {
    border-style: dashed;
    border-width: 4px;
    animation: placeholder-pulse 3s infinite ease-in-out;
}

@keyframes placeholder-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
/* View Details Badge */
.project-card .aspect-video::after {
    content: "View Details";
    position: absolute;
    bottom: -2rem;
    right: 0.75rem;
    background-color: #2a2845;
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.2);
    z-index: 30;
}
.project-card:hover .aspect-video::after {
    opacity: 1;
    bottom: 0.75rem;
}

/* Modal Hardware Acceleration */
#lightbox-modal, #lightbox-details,
#commission-modal, #commission-content {
    will-change: transform, opacity;
}

/* Colorful Glowing Shadows for Active Modal */
.modal-glow-brand-blue {
    box-shadow: 0 20px 50px -10px rgba(147, 197, 253, 0.7) !important;
    border-color: #93c5fd !important;
}
.modal-glow-brand-yellow {
    box-shadow: 0 20px 50px -10px rgba(253, 224, 71, 0.7) !important;
    border-color: #fde047 !important;
}
.modal-glow-brand-green {
    box-shadow: 0 20px 50px -10px rgba(134, 239, 172, 0.7) !important;
    border-color: #86efac !important;
}
.modal-glow-brand-purple {
    box-shadow: 0 20px 50px -10px rgba(216, 180, 254, 0.7) !important;
    border-color: #d8b4fe !important;
}

.bouncy-btn {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease;
    will-change: transform;
}
.bouncy-btn:hover {
    transform: translateY(-4px) scale(1.05);
}
.bouncy-btn:active {
    transform: translateY(2px) scale(0.95);
}

/* Fallback for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .fade-in-section, .project-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .star-twinkle, .planet-float, .planet-float-alt, .wobbly-logo:hover {
        animation: none;
    }
}

/* Lightbox Modal Hardware Acceleration */
#lightbox-modal { will-change: transform, opacity; transform: translateZ(0); }
#lightbox-modal.modal-closing { transform: scale(0.95) translateZ(0) !important; opacity: 0 !important; transition: transform 0.2s ease, opacity 0.2s ease !important; }