/* ===========================
   OWNER-LIKE MOTION SYSTEM
   =========================== */

:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 280ms;
    --dur-med: 550ms;
    --dur-slow: 900ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Header subtle shrink on scroll ---------- */
.header {
    transition: padding var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.header.is-scrolled {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .95);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(2px);
    transition: opacity var(--dur-med) var(--ease-out),
        transform var(--dur-med) var(--ease-out),
        filter var(--dur-med) var(--ease-out);
    will-change: opacity, transform, filter;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.reveal--scale {
    transform: translateY(18px) scale(.98);
}

.reveal--left {
    transform: translateX(-18px);
}

.reveal--right {
    transform: translateX(18px);
}

/* Stagger helper (JS sets transition-delay) */
.reveal[data-stagger] {}

/* ---------- Tabs: smoother image swap ---------- */
.tab-panel {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-med) var(--ease-soft),
        transform var(--dur-med) var(--ease-soft);
}

.tab-panel.active {
    opacity: 1;
    transform: translateY(0);
}

/* Progress underline animation (you already have fill keyframes)
   We’ll control it by toggling .is-animating on active tab */
.tab-btn .tab-fill {
    animation: none !important;
    width: 0%;
}

.tab-btn.active.is-animating .tab-fill {
    animation: fillProgress 6.5s linear forwards !important;
    /* Owner-like pacing */
}

/* ---------- Owner slide fade/slide ---------- */
.owner-slide {
    opacity: 0;
    visibility: hidden;
    transform: translateX(36px);
    transition: opacity var(--dur-med) var(--ease-soft),
        transform var(--dur-med) var(--ease-soft),
        visibility 0s linear var(--dur-med);
}

.owner-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity var(--dur-med) var(--ease-soft),
        transform var(--dur-med) var(--ease-soft),
        visibility 0s;
}

/* ---------- Carousel dot progress (your CSS already animates ::before)
   We'll restart it by toggling .active in JS ---------- */
.carousel-dots .dot {
    transition: transform var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        width var(--dur-fast) var(--ease-out);
}