/* ===== SCROLL ANIMATIONS ===== */
.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-up {
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.75s ease-out;
    will-change: transform, opacity;
}

.fade-in {
    transform: translateY(24px) scale(0.97);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fade-in-left {
    transform: translateX(-48px) scale(0.98);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.fade-in-right {
    transform: translateX(48px) scale(0.98);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.fade-in-up {
    transform: translateY(48px) scale(0.97);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Blob Animation */
@keyframes blob-pulse {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

.image-blob {
    animation: blob-pulse 8s ease-in-out infinite;
    will-change: border-radius;
}

/* Staggered List Items */
.stagger-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Tribe Card Entrance */
.tribe-card {
    opacity: 0;
    transform: translateY(36px) scale(0.93);
    transition: transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.6s ease-out, box-shadow 0.3s ease;
}

.tribe-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tribe-card.visible:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 24px 50px rgba(188, 166, 185, 0.22);
}

/* Stagger Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

/* Gallery Reveal - Unique Loader */
.gallery-card,
.gallery-text-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    cursor: pointer;
    opacity: 0;
    transform: perspective(1000px) rotateX(45deg) translateZ(-100px);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.4, 1), opacity 0.8s ease-out;
    will-change: transform, opacity;
    contain: layout style paint;
}

.gallery-card.visible,
.gallery-text-card.visible {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateZ(0);
}

.gallery-card:hover,
.gallery-text-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-card:hover img {
    transform: scale(1.1);
}

/* ===== BACKGROUND VIDEO / CANVAS ===== */
.optimized-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    overflow: hidden;
}

/* SVG Bubble Canvas */
.tetra-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.tetra-canvas path {
    fill: none !important;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.tetra-canvas circle {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Z-index layering for sections with background canvas */
.gallery-section>.organic-gallery,
.gallery-section>.container,
.recipe-section>.container,
.recipe-section>.origami-shape,
.contact-section>.container {
    position: relative;
    z-index: 2;
}

/* ===== REDUCED MOTION — Accessibility & low-end device perf ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in,
    .fade-in-left,
    .fade-in-right,
    .fade-in-up,
    .stagger-item,
    .gallery-card,
    .gallery-text-card {
        opacity: 1 !important;
        transform: none !important;
    }

    .hw-waiting {
        opacity: 1 !important;
        fill-opacity: 1 !important;
    }

    .image-blob {
        animation: none !important;
    }

    .wave-anim {
        animation: none !important;
    }

    .tetra-bg {
        display: none !important;
    }
}