/* ========================================
   INK TULUM — SCROLL-DRIVEN ANIMATIONS 2026
   ======================================== */

/* Universal reveal on scroll */
.section-reveal {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 50%;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Parallax image */
.parallax-img {
    animation: parallax-scroll linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

@keyframes parallax-scroll {
    from { transform: translateY(-8%); }
    to { transform: translateY(8%); }
}

/* Stagger children */
.stagger-reveal > * {
    animation: stagger-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
}

@keyframes stagger-in {
    from { opacity: 0; transform: scale(0.92) translateY(30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Scale up */
.scale-reveal {
    animation: scale-up linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 55%;
}

@keyframes scale-up {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* Slide from left */
.slide-left {
    animation: slide-from-left linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 50%;
}

@keyframes slide-from-left {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Slide from right */
.slide-right {
    animation: slide-from-right linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 50%;
}

@keyframes slide-from-right {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Rotating gradient border */
@keyframes rotate-gradient {
    from { --gradient-angle: 0deg; }
    to { --gradient-angle: 360deg; }
}

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

/* Pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

/* Hero text stagger */
@keyframes hero-text-in {
    from { opacity: 0; transform: translateY(40px) rotateX(15deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Scroll progress bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--tk-red), var(--tk-gold));
    z-index: 10000;
    transform-origin: left;
    animation: scroll-progress-grow linear;
    animation-timeline: scroll();
}

@keyframes scroll-progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
    .section-reveal,
    .parallax-img,
    .stagger-reveal > *,
    .scale-reveal,
    .slide-left,
    .slide-right {
        opacity: 1;
        transform: none;
    }
    .scroll-progress {
        display: none;
    }
}