/* ==========================================================================
   Animations & Transitions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Keyframe Definitions
   -------------------------------------------------------------------------- */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes softPop {
    0%   { opacity: 0; transform: scale(0.96) translateY(16px); }
    70%  { opacity: 1; transform: scale(1.015) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes sheen {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(220%) skewX(-18deg); }
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes kenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.025); opacity: 0.92; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes drawLine {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   2. Scroll-Reveal Base States
   Applied by JS (assets/js/animations.js) via Intersection Observer.
   Elements start hidden; JS adds .is-visible to trigger the animation.
   -------------------------------------------------------------------------- */

.has-js [data-reveal] {
    --reveal-delay: 0ms;
    --reveal-distance: 40px;
    --reveal-duration: var(--duration-slower);
    --reveal-scale: 0.94;
    opacity: 0;
    transition-delay: var(--reveal-delay);
    transition-duration: var(--reveal-duration);
    transition-property: opacity, transform, filter, clip-path;
    transition-timing-function: var(--ease-out);
    will-change: opacity, transform;
}

.has-js .reveal-fade,
.has-js .reveal-up,
.has-js .reveal-down,
.has-js .reveal-left,
.has-js .reveal-right,
.has-js .reveal-scale,
.has-js .reveal-zoom-in,
.has-js .reveal-zoom-out,
.has-js .reveal-blur,
.has-js .reveal-blur-up,
.has-js .reveal-clip-up,
.has-js .reveal-clip-right,
.has-js .reveal-flip-up,
.has-js .reveal-rotate-left,
.has-js .reveal-rotate-right,
.has-js .stagger-fade > *,
.has-js .stagger-up > *,
.has-js .stagger-down > *,
.has-js .stagger-left > *,
.has-js .stagger-right > *,
.has-js .stagger-scale > *,
.has-js .stagger-blur-up > *,
.has-js .stagger-clip-up > * {
    --reveal-delay: 0ms;
    --reveal-distance: 40px;
    --reveal-duration: var(--duration-slower);
    --reveal-scale: 0.94;
    opacity: 0;
    transition-delay: var(--reveal-delay);
    transition-duration: var(--reveal-duration);
    transition-property: opacity, transform, filter, clip-path;
    transition-timing-function: var(--ease-out);
    will-change: opacity, transform;
}

.has-js [data-reveal="fade"]       { /* stays at opacity 0 */ }
.has-js [data-reveal="up"]         { transform: translateY(var(--reveal-distance)); }
.has-js [data-reveal="down"]       { transform: translateY(calc(var(--reveal-distance) * -1)); }
.has-js [data-reveal="left"]       { transform: translateX(calc(var(--reveal-distance) * -1)); }
.has-js [data-reveal="right"]      { transform: translateX(var(--reveal-distance)); }
.has-js [data-reveal="scale"],
.has-js [data-reveal="zoom-in"]    { transform: scale(var(--reveal-scale)); }
.has-js [data-reveal="zoom-out"]   { transform: scale(1.06); }
.has-js [data-reveal="scale-up"]   { transform: scale(var(--reveal-scale)) translateY(calc(var(--reveal-distance) * 0.5)); }
.has-js [data-reveal="blur"]       { filter: blur(14px); }
.has-js [data-reveal="blur-up"]    { transform: translateY(calc(var(--reveal-distance) * 0.75)); filter: blur(14px); }
.has-js [data-reveal="rotate-left"]  { transform: translateY(24px) rotate(-3deg); transform-origin: center bottom; }
.has-js [data-reveal="rotate-right"] { transform: translateY(24px) rotate(3deg); transform-origin: center bottom; }
.has-js [data-reveal="flip-up"] {
    transform: perspective(900px) rotateX(14deg) translateY(24px);
    transform-origin: center bottom;
}
.has-js [data-reveal="clip-up"] {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translateY(18px);
}
.has-js [data-reveal="clip-right"] {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-18px);
}

.has-js .reveal-up,
.has-js .stagger-up > * { transform: translateY(var(--reveal-distance)); }
.has-js .reveal-down,
.has-js .stagger-down > * { transform: translateY(calc(var(--reveal-distance) * -1)); }
.has-js .reveal-left,
.has-js .stagger-left > * { transform: translateX(calc(var(--reveal-distance) * -1)); }
.has-js .reveal-right,
.has-js .stagger-right > * { transform: translateX(var(--reveal-distance)); }
.has-js .reveal-scale,
.has-js .reveal-zoom-in,
.has-js .stagger-scale > * { transform: scale(var(--reveal-scale)); }
.has-js .reveal-zoom-out { transform: scale(1.06); }
.has-js .reveal-blur { filter: blur(14px); }
.has-js .reveal-blur-up,
.has-js .stagger-blur-up > * { transform: translateY(calc(var(--reveal-distance) * 0.75)); filter: blur(14px); }
.has-js .reveal-clip-up,
.has-js .stagger-clip-up > * {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translateY(18px);
}
.has-js .reveal-clip-right {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-18px);
}
.has-js .reveal-flip-up {
    transform: perspective(900px) rotateX(14deg) translateY(24px);
    transform-origin: center bottom;
}
.has-js .reveal-rotate-left {
    transform: translateY(24px) rotate(-3deg);
    transform-origin: center bottom;
}
.has-js .reveal-rotate-right {
    transform: translateY(24px) rotate(3deg);
    transform-origin: center bottom;
}

.has-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
}

/* Stagger delay helpers — add data-delay="1" through "12" or use JS data-stagger */
[data-delay="1"] { transition-delay: 100ms; }
[data-delay="2"] { transition-delay: 200ms; }
[data-delay="3"] { transition-delay: 300ms; }
[data-delay="4"] { transition-delay: 400ms; }
[data-delay="5"] { transition-delay: 500ms; }
[data-delay="6"] { transition-delay: 600ms; }
[data-delay="7"] { transition-delay: 700ms; }
[data-delay="8"] { transition-delay: 800ms; }
[data-delay="9"] { transition-delay: 900ms; }
[data-delay="10"] { transition-delay: 1000ms; }
[data-delay="11"] { transition-delay: 1100ms; }
[data-delay="12"] { transition-delay: 1200ms; }

/* --------------------------------------------------------------------------
   3. Always-On Animation Utility Classes
   -------------------------------------------------------------------------- */

.animate-float   { animation: float  3s ease-in-out infinite; }
.animate-pulse   { animation: pulse  2s ease-in-out infinite; }
.animate-spin    { animation: spin   1s linear infinite; }
.animate-pop     { animation: softPop var(--duration-slower) var(--ease-spring) both; }
.animate-breathe { animation: breathe 4s ease-in-out infinite; }
.animate-kenburns {
    animation: kenBurns 12s ease-out both;
    transform-origin: center;
}
.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.3) 50%,
        transparent 100%
    );
    background-size: 200% auto;
    animation: shimmer 1.8s linear infinite;
}

.text-shine {
    background: linear-gradient(100deg, currentColor 0%, var(--color-accent) 45%, currentColor 80%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: shimmer 3s linear infinite;
}

/* --------------------------------------------------------------------------
   4. Hover Microinteractions
   -------------------------------------------------------------------------- */

/* Lift on hover — great for cards */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* Subtle scale — great for images and icons */
.hover-scale {
    transition: transform var(--transition-base);
}
.hover-scale:hover {
    transform: scale(1.04);
}

/* Pressable surface — useful for cards/buttons that should feel tactile */
.hover-press {
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--transition-base);
}
.hover-press:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.hover-press:active {
    transform: translateY(0) scale(0.99);
    box-shadow: var(--shadow-sm);
}

/* Glow on hover — great for CTA buttons */
.hover-glow {
    transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

/* Underline sweep — for nav links and text links */
.hover-underline {
    position: relative;
    text-decoration: none;
}
.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--transition-base);
}
.hover-underline:hover::after {
    width: 100%;
}

/* Sheen sweep — use sparingly on premium CTA buttons/cards */
.hover-sheen {
    position: relative;
    overflow: hidden;
}
.hover-sheen::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-120%) skewX(-18deg);
}
.hover-sheen:hover::before {
    animation: sheen 850ms var(--ease-out);
}

/* Spotlight follows the pointer when JS updates --spotlight-x/y */
[data-spotlight] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
[data-spotlight]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
            rgba(255,255,255,0.26),
            transparent 34%
        );
    opacity: 0;
    transition: opacity var(--transition-base);
}
[data-spotlight]:hover::before {
    opacity: 1;
}

/* Pointer tilt — JS sets --tilt-x/y */
[data-tilt] {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-scale: 1;
    --tilt-perspective: 900px;
    transform-style: preserve-3d;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--transition-base);
    will-change: transform;
}

[data-tilt].is-tilting {
    transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tilt-scale));
}

[data-tilt]:hover {
    box-shadow: var(--shadow-lg);
}

/* Marquee — use <div data-marquee><div data-marquee-track>items...</div></div> */
[data-marquee] {
    --marquee-duration: 28s;
    --marquee-direction: normal;
    --marquee-gap: var(--space-8);
    overflow: hidden;
    max-width: 100%;
}

[data-marquee-track],
.ekc-marquee-track {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    width: max-content;
    min-width: max-content;
    animation: marquee var(--marquee-duration) linear infinite;
    animation-direction: var(--marquee-direction);
    will-change: transform;
}

.ekc-marquee-copy {
    display: contents;
}

[data-marquee][data-pause="hover"]:hover [data-marquee-track],
[data-marquee][data-pause="hover"]:hover .ekc-marquee-track {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   5. Scroll-Linked Premium Motion
   JS writes --ekc-scroll-progress and --ekc-item-progress as the user scrolls.
   Use these classes on blocks/sections for Apple-style scrubbed motion.
   -------------------------------------------------------------------------- */

.ekc-scroll-cinematic,
.ekc-scroll-showcase,
.ekc-scroll-lift-grid,
.ekc-scroll-story {
    --ekc-scroll-progress: 0;
    --ekc-scroll-center: 0;
}

.ekc-scroll-lift-grid > *,
.ekc-scroll-story > * {
    --ekc-item-progress: 0;
    transition:
        opacity 220ms var(--ease-out),
        border-color 220ms var(--ease-out),
        box-shadow 220ms var(--ease-out);
}

.has-js .ekc-scroll-lift-grid > * {
    opacity: calc(0.68 + (var(--ekc-item-progress) * 0.32));
    transform:
        translate3d(0, calc((1 - var(--ekc-item-progress)) * 34px), 0)
        scale(calc(0.975 + (var(--ekc-item-progress) * 0.025)));
}

.has-js .ekc-scroll-story > * {
    opacity: calc(0.72 + (var(--ekc-item-progress) * 0.28));
    transform:
        translate3d(0, calc((1 - var(--ekc-item-progress)) * 22px), 0)
        scale(calc(0.985 + (var(--ekc-item-progress) * 0.015)));
}

.ekc-scroll-story > .is-current {
    border-color: color-mix(in srgb, var(--color-accent, #d8b98c) 70%, transparent);
    box-shadow: var(--shadow-lg);
}

.ekc-scroll-mask {
    overflow: hidden;
}

.has-js .ekc-scroll-mask > * {
    transform: scale(calc(1.08 - (var(--ekc-scroll-progress) * 0.05)));
    transform-origin: center;
}

/* --------------------------------------------------------------------------
   6. Luxury GSAP ScrollTrigger System
   Use these classes on Kadence/Gutenberg blocks from Advanced > Additional
   CSS class(es). JS in assets/js/animations.js owns timing and scroll triggers.
   -------------------------------------------------------------------------- */

.luxury-reveal,
.luxury-stagger > *,
.luxury-image-scale {
    --luxury-reveal-distance: 42px;
    transform-origin: center;
}

.has-js:not(.luxury-motion-disabled) .luxury-reveal,
.has-js:not(.luxury-motion-disabled) .luxury-stagger > *,
.has-js:not(.luxury-motion-disabled) .luxury-image-scale {
    opacity: 0;
    transform: translate3d(0, var(--luxury-reveal-distance), 0);
    will-change: opacity, transform;
}

.has-js:not(.luxury-motion-disabled) .luxury-reveal.is-visible,
.has-js:not(.luxury-motion-disabled) .luxury-stagger.is-visible > *,
.has-js:not(.luxury-motion-disabled) .luxury-stagger > .is-visible,
.has-js:not(.luxury-motion-disabled) .luxury-image-scale.is-visible {
    opacity: 1;
    transform: none;
}

.luxury-image-scale {
    overflow: hidden;
}

.luxury-image-scale img,
.luxury-image-scale video {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: center;
    will-change: transform;
}

.luxury-pin {
    position: relative;
}

.luxury-parallax {
    will-change: transform;
    transform-style: preserve-3d;
}

.luxury-motion-disabled .luxury-reveal,
.luxury-motion-disabled .luxury-stagger > *,
.luxury-motion-disabled .luxury-image-scale,
.luxury-motion-disabled .luxury-parallax {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
}

.editor-styles-wrapper .luxury-reveal,
.editor-styles-wrapper .luxury-stagger > *,
.editor-styles-wrapper .luxury-image-scale,
.editor-styles-wrapper .luxury-parallax,
.block-editor-block-list__layout .luxury-reveal,
.block-editor-block-list__layout .luxury-stagger > *,
.block-editor-block-list__layout .luxury-image-scale,
.block-editor-block-list__layout .luxury-parallax {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    will-change: auto !important;
}

/* --------------------------------------------------------------------------
   7. Button Transitions
   -------------------------------------------------------------------------- */

.btn-primary,
.wp-block-button__link,
.kadence-button {
    transition:
        background-color var(--transition-base),
        color             var(--transition-base),
        transform         var(--transition-base),
        box-shadow        var(--transition-base);
}

.btn-primary:hover,
.wp-block-button__link:hover,
.kadence-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active,
.wp-block-button__link:active,
.kadence-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   8. Image Hover Zoom (inside overflow-hidden wrappers)
   -------------------------------------------------------------------------- */

.img-zoom-wrap {
    overflow: hidden;
    border-radius: var(--radius-md);
}
.img-zoom-wrap img {
    transition: transform var(--duration-slow) var(--ease-out);
    display: block;
    width: 100%;
}
.img-zoom-wrap:hover img {
    transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   9. Page Transition Overlay
   Controlled by assets/js/animations.js
   -------------------------------------------------------------------------- */

.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-primary);
    z-index: var(--z-overlay);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
}
.page-transition-overlay.is-active {
    opacity: 1;
    pointer-events: all;
}

/* --------------------------------------------------------------------------
   10. Respect User Motion Preferences
   -------------------------------------------------------------------------- */

@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;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    [data-marquee-track],
    .ekc-marquee-track {
        animation: none !important;
        transform: none !important;
    }

    [data-tilt] {
        transform: none !important;
    }

    .ekc-scroll-lift-grid > *,
    .ekc-scroll-story > *,
    .ekc-scroll-mask > *,
    .luxury-reveal,
    .luxury-stagger > *,
    .luxury-image-scale,
    .luxury-image-scale img,
    .luxury-image-scale video,
    .luxury-pin,
    .luxury-parallax {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        will-change: auto !important;
    }
}