/* ================================================
   SCROLL ANIMATIONS CSS
   Trig-JS + TweenMax Harmony
   Generic - Works across ALL pages
   ================================================ */

/* --- Base Trig-JS Variable Overrides --- */
.trig {
    --trig-duration: 0.8s;
    --trig-blend: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ================================================
   IMAGE REVEAL ANIMATION
   Targets: .image-anime on any page
   ================================================ */
.image-anime {
    position: relative;
    overflow: hidden;
    display: block;
}

.image-anime img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1),
                transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: clip-path, transform;
}

.image-anime.revealed img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(1);
}

/* ================================================
   LETTER-BY-LETTER TEXT ANIMATION
   ================================================ */
.split-text {
    overflow: hidden;
}

.split-text .word-wrap {
    position: relative;
    display: inline-block;
    margin-right: 0.25em;
}

.split-text .char {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.split-text.animate-in .char {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   GENERIC FADE ANIMATIONS (JS adds these classes)
   ================================================ */
.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.anim-fade-up.animated {
    opacity: 1;
    transform: translateY(0);
}

.anim-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.anim-fade-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.anim-fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.anim-fade-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* ================================================
   CTA SECTION - Çevre Bilinci (index.html)
   ================================================ */
.cta-section .content .sec-title h1 {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
.cta-section .content .sec-title .sub-title {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s ease 0.4s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}
.cta-section .content .text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease 0.6s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}
.cta-section.cta-animated .content .sec-title h1,
.cta-section.cta-animated .content .sec-title .sub-title,
.cta-section.cta-animated .content .text {
    opacity: 1;
    transform: translate(0, 0);
}

/* ================================================
   GENERIC STAGGERED ELEMENTS
   ================================================ */

/* Icon boxes (index about section) */
.about-section .icon-box {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.about-section .icon-box.stagger-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Recipe cards */
.recipe-section .recipe-card {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.recipe-section .recipe-card.stagger-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Branch cards */
.branches-section .branch-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.branches-section .branch-card.stagger-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Feature blocks (about.html) */
.feature-block-one .inner-box {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.feature-block-one .inner-box.stagger-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Content blocks (about.html) */
.content-block {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.content-block.stagger-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   SEC-TITLE TEXT (generic, all pages)
   ================================================ */
.sec-title .text,
.about-content-section .content-block .text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.sec-title.title-animated .text,
.content-block.stagger-animated .text {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   TESTIMONIAL / INSTAGRAM
   ================================================ */
.testimonial-section .testimonial-section-title h2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.testimonial-section .testimonial-section-title.title-animated h2 {
    opacity: 1;
    transform: translateY(0);
}

.instagram-feed-section .ig-profile-header {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.instagram-feed-section.ig-animated .ig-profile-header {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   SIDEBAR ANIMATION (about.html)
   ================================================ */
.about-sidebar {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
.about-sidebar.stagger-animated {
    opacity: 1;
    transform: translateX(0);
}

/* ================================================
   PAGE TITLE ANIMATION (all sub pages)
   ================================================ */
.page-title h2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.page-title.title-animated h2 {
    opacity: 1;
    transform: translateY(0);
}

.page-title .page-breadcrumb {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.6s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}
.page-title.title-animated .page-breadcrumb {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   REDUCED MOTION (Erişilebilirlik)
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .image-anime img {
        clip-path: none !important;
        transform: none !important;
    }
    .split-text .char {
        opacity: 1 !important;
        transform: none !important;
    }
}