/* ============================================
   TK AFROCARIBBEAN KITCHEN - Animations
   ============================================ */

/* ---- Reveal Animations (GSAP triggers these) ---- */
[data-animate] {
    will-change: transform, opacity;
}

[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(60px);
}

[data-animate="fade-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="reveal-left"] {
    clip-path: inset(0 100% 0 0);
}

[data-animate="reveal-left"].animated {
    clip-path: inset(0 0% 0 0);
}

[data-animate="reveal-right"] {
    clip-path: inset(0 0 0 100%);
}

[data-animate="reveal-right"].animated {
    clip-path: inset(0 0 0 0%);
}

[data-animate="scale-in"] {
    opacity: 0;
    transform: scale(0.9);
}

[data-animate="scale-in"].animated {
    opacity: 1;
    transform: scale(1);
}

[data-animate="float-in"] {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
}

[data-animate="float-in"].animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---- Magnetic Button Effect ---- */
.btn {
    will-change: transform;
}

/* ---- Card 3D Tilt ---- */
.pillar-card {
    transform-style: preserve-3d;
}

.pillar-card .card-content {
    transform: translateZ(30px);
}

/* ---- Smooth Scroll Progress ---- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    z-index: 10001;
    transform-origin: left;
    transform: scaleX(0);
}

/* ---- Text Split Animation ---- */
.split-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.6s var(--ease-out);
}

.split-char.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Parallax Background Text ---- */
[data-animate="parallax-text"] {
    will-change: transform;
}

/* ---- Counter Animation ---- */
[data-animate="counter"] .stat-number {
    transition: none;
}

/* ---- Gallery Horizontal Scroll ---- */
.gallery-track {
    will-change: transform;
}

/* ---- Page Transition Overlay ---- */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 9998;
    transform: scaleY(0);
    transform-origin: bottom;
}

.page-transition.active {
    animation: pageTransition 0.8s var(--ease-in-out);
}

@keyframes pageTransition {
    0% { transform: scaleY(0); transform-origin: bottom; }
    50% { transform: scaleY(1); transform-origin: bottom; }
    51% { transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: top; }
}

/* ---- Grain Texture Overlay ---- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9997;
    opacity: 0.4;
}

/* ---- Stagger Children ---- */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-children.animated > * {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Glow Effects ---- */
.glow-accent {
    box-shadow: 0 0 60px rgba(212, 160, 82, 0.15),
                0 0 120px rgba(212, 160, 82, 0.05);
}

/* ---- Image Reveal Mask ---- */
.img-reveal {
    position: relative;
    overflow: hidden;
}

.img-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 1s var(--ease-out);
}

.img-reveal.revealed::after {
    transform: scaleX(0);
}

/* ---- Smooth Entrance for Pages ---- */
.page-enter {
    animation: pageEnter 0.8s var(--ease-out) forwards;
}

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

/* ---- Hover Shine Effect on Cards ---- */
.pillar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.06) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.pillar-card:hover::before {
    opacity: 1;
}

/* ---- Loading Skeleton ---- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}