/* MY BLOG - Cartoonish Netflix Design System */

/* ========== Custom Cursor ========== */
body {
    cursor: none;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: #131313;
}
*, *::before, *::after {
    cursor: none !important;
}

/* ========== Material Symbols ========== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ========== Bouncy Hover Effects ========== */
.bouncy-hover {
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.bouncy-hover:hover {
    transform: scale(1.05) translateY(-4px);
}
.bouncy-press:active {
    transform: scale(0.95);
}

/* ========== Hard Shadows ========== */
.hard-shadow {
    box-shadow: 6px 6px 0px 0px #000000;
}
.hard-shadow:active {
    box-shadow: 2px 2px 0px 0px #000000;
    transform: translate(4px, 4px);
}
.card-shadow {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
}
.neo-shadow {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}
.neo-shadow-lg {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
}
.btn-shadow {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}

/* ========== Borders ========== */
.thick-border {
    border: 4px solid #000000;
}
.thick-border-lg {
    border: 6px solid #000000;
}

/* ========== Stat Bars (About page) ========== */
.stat-bar {
    height: 12px;
    background: #000;
    border-radius: 9999px;
    position: relative;
    overflow: hidden;
    border: 2px solid #000;
}
.stat-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 1s ease-out;
}

/* ========== Netflix-style Horizontal Scroll ========== */
.netflix-scroll::-webkit-scrollbar {
    display: none;
}
.netflix-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========== Active Press ========== */
.active-press:active {
    transform: translate(2px, 2px) scale(0.98);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
}

/* ========== Header Glass ========== */
.header-glass {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
}

/* ========== Scroll Reveal Animation ========== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(6px);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s ease-out;
    will-change: opacity, transform, filter;
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ========== Staggered Child Card Reveals (Home page grid) ========== */
.scroll-reveal.revealed > .grid > .scroll-reveal-child {
    opacity: 0;
    will-change: opacity, transform;
}
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(odd) {
    animation: child-slide-left 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(even) {
    animation: child-slide-right 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(1) { animation-delay: 0.15s; }
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(2) { animation-delay: 0.3s; }
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(3) { animation-delay: 0.45s; }
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(4) { animation-delay: 0.6s; }
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(5) { animation-delay: 0.75s; }
.scroll-reveal.revealed > .grid > .scroll-reveal-child:nth-child(6) { animation-delay: 0.9s; }

@keyframes child-slide-left {
    0% { opacity: 0; transform: translateX(-80px) rotate(-3deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes child-slide-right {
    0% { opacity: 0; transform: translateX(80px) rotate(3deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

/* ========== Creative Card Reveals (Works grid + Articles grid) ========== */
/* Dynamic delay via inline style --i (set in template) */
.scroll-reveal.revealed > .works-grid > .creative-card,
.scroll-reveal.revealed.grid > .creative-card {
    opacity: 0;
    will-change: opacity, transform, filter;
    animation: works-card-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s);
}

/* Cycle 4 unique entrance animations using nth-child(4n) */
.scroll-reveal.revealed > .works-grid > .creative-card:nth-child(4n+1),
.scroll-reveal.revealed.grid > .creative-card:nth-child(4n+1) {
    animation-name: works-card-zoom-spin;
}
.scroll-reveal.revealed > .works-grid > .creative-card:nth-child(4n+2),
.scroll-reveal.revealed.grid > .creative-card:nth-child(4n+2) {
    animation-name: works-card-slide-rotate;
}
.scroll-reveal.revealed > .works-grid > .creative-card:nth-child(4n+3),
.scroll-reveal.revealed.grid > .creative-card:nth-child(4n+3) {
    animation-name: works-card-flip-up;
}
.scroll-reveal.revealed > .works-grid > .creative-card:nth-child(4n),
.scroll-reveal.revealed.grid > .creative-card:nth-child(4n) {
    animation-name: works-card-curtain;
}

/* Animation 1: Scale + rotate in from invisible */
@keyframes works-card-zoom-spin {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-12deg);
        filter: blur(8px) brightness(2);
    }
    60% {
        opacity: 1;
        filter: blur(0) brightness(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0) brightness(1);
    }
}

/* Animation 2: Slide from alternating sides with heavy skew */
.scroll-reveal.revealed > .works-grid > .creative-card:nth-child(4n+2),
.scroll-reveal.revealed.grid > .creative-card:nth-child(4n+2) {
    transform-origin: left center;
}
@keyframes works-card-slide-rotate {
    0% {
        opacity: 0;
        transform: translateX(120px) skewX(-8deg) scale(0.9);
        filter: blur(4px) saturate(0);
    }
    70% {
        filter: blur(0) saturate(1.2);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg) scale(1);
        filter: blur(0) saturate(1);
    }
}

/* Animation 3: 3D flip up from bottom */
.scroll-reveal.revealed > .works-grid > .creative-card:nth-child(4n+3),
.scroll-reveal.revealed.grid > .creative-card:nth-child(4n+3) {
    transform-origin: center bottom;
    perspective: 800px;
}
@keyframes works-card-flip-up {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(70deg) translateY(60px);
        filter: blur(6px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg) translateY(0);
        filter: blur(0);
    }
}

/* Animation 4: Curtain reveal — clip-path wipe */
@keyframes works-card-curtain {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: scale(1.05);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

/* Fallback generic entrance for any card */
@keyframes works-card-enter {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ========== Section Title Accent Line ========== */
.section-accent {
    position: relative;
    overflow: hidden;
}
.section-accent::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e50914;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.scroll-reveal.revealed .section-accent::after {
    transform: scaleX(1);
}