/* ==========================================================================
   ISEMOODY THEME - ANIMATIONS & MOTION
   Extracted from style.css for performance optimization
   ========================================================================== */

/* @keyframes definitions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes gradientShift {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.75;
    }
}

@keyframes textReveal {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        letter-spacing: 0.2em;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        letter-spacing: 0.04em;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

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

    100% {
        background-position: -200% 0;
    }
}

@keyframes iconBounce {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes letterPop {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.85);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pageReveal {
    0% {
        clip-path: inset(0 0 100% 0);
        opacity: 1;
        background: linear-gradient(180deg, #faf8f5 0%, #ffffff 50%, rgba(184, 134, 11, 0.03) 100%);
    }

    40% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes headerReveal {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionReveal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lineDraw {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes breath {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideUpBounce {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientRotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(184, 134, 11, 0.15);
    }

    50% {
        box-shadow: 0 0 40px rgba(184, 134, 11, 0.25);
    }
}

@keyframes shineSweep {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

@keyframes morphUnderline {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes kenBurns {
    0% {
        background-size: 100%;
        background-position: 50% 50%;
    }

    100% {
        background-size: 110%;
        background-position: 55% 45%;
    }
}

@keyframes floatLabel {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }

    33% {
        transform: translate(30px, -25px) scale(1.08);
        opacity: 0.8;
    }

    66% {
        transform: translate(-25px, 20px) scale(0.92);
        opacity: 0.5;
    }
}

@keyframes shimmerSweep {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes blurToFocus {
    from {
        filter: blur(8px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        transform: rotate(-5deg) scale(0.9);
        opacity: 0;
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes glitch {
    0% {
        text-shadow: 0 0 0 transparent;
        transform: translate(0);
    }

    20% {
        text-shadow: -2px 2px 0 rgba(255, 0, 0, 0.3), 2px -2px 0 rgba(0, 255, 255, 0.3);
        transform: translate(-2px, 2px);
    }

    40% {
        text-shadow: 2px -2px 0 rgba(255, 0, 0, 0.3), -2px 2px 0 rgba(0, 255, 255, 0.3);
        transform: translate(2px, -2px);
    }

    60% {
        text-shadow: -2px -2px 0 rgba(0, 255, 255, 0.3), 2px 2px 0 rgba(255, 0, 0, 0.3);
        transform: translate(-2px, -2px);
    }

    80% {
        text-shadow: 2px 2px 0 rgba(255, 0, 0, 0.3), -2px -2px 0 rgba(0, 255, 255, 0.3);
        transform: translate(2px, 2px);
    }

    100% {
        text-shadow: 0 0 0 transparent;
        transform: translate(0);
    }
}

@keyframes idlePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes logoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes progressPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.4);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px 4px rgba(184, 134, 11, 0.3);
    }
}

@keyframes quoteFade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes underlineDraw {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Scroll Animation Utilities */
.animate-on-scroll {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury),
        filter var(--duration-reveal) var(--ease-luxury);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-rotate,
.reveal-up {
    transform: translate3d(0, 40px, 0);
    opacity: 0;
    transition: opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

.reveal-left {
    transform: translate3d(-36px, 0, 0);
}

.reveal-right {
    transform: translate3d(36px, 0, 0);
}

.reveal-up {
    transform: translate3d(0, 28px, 0);
}

.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.reveal-rotate.visible,
.reveal-up.visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* Drop from top – for About section images */
.reveal-drop-top {
    transform: translateY(-80px);
    opacity: 0;
    transition: transform 0.9s var(--ease-out-expo), opacity 0.7s var(--ease-luxury);
}

.reveal-drop-top.visible {
    transform: translateY(0);
    opacity: 1;
}

.reveal-blur {
    filter: blur(10px);
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: filter var(--duration-reveal) var(--ease-luxury),
        opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

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

/* Staggered delays */
.category-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 100ms;
}

.category-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 200ms;
}

.category-grid .animate-on-scroll:nth-child(4) {
    transition-delay: 300ms;
}

.category-grid .animate-on-scroll:nth-child(5) {
    transition-delay: 400ms;
}

.category-grid .animate-on-scroll:nth-child(6) {
    transition-delay: 100ms;
}

.category-grid .animate-on-scroll:nth-child(7) {
    transition-delay: 200ms;
}

.category-grid .animate-on-scroll:nth-child(8) {
    transition-delay: 300ms;
}

.product-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 100ms;
}

.product-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 200ms;
}

.product-grid .animate-on-scroll:nth-child(4) {
    transition-delay: 300ms;
}

.product-grid .animate-on-scroll:nth-child(5) {
    transition-delay: 400ms;
}

.product-grid .animate-on-scroll:nth-child(6) {
    transition-delay: 100ms;
}

.product-grid .animate-on-scroll:nth-child(7) {
    transition-delay: 200ms;
}

.product-grid .animate-on-scroll:nth-child(8) {
    transition-delay: 300ms;
}

ul.products li:nth-child(2) .product-card,
.shop-products .product-card:nth-child(2) {
    transition-delay: 100ms;
}

ul.products li:nth-child(3) .product-card,
.shop-products .product-card:nth-child(3) {
    transition-delay: 200ms;
}

ul.products li:nth-child(4) .product-card,
.shop-products .product-card:nth-child(4) {
    transition-delay: 300ms;
}

ul.products li:nth-child(5) .product-card,
.shop-products .product-card:nth-child(5) {
    transition-delay: 400ms;
}

ul.products li:nth-child(6) .product-card,
.shop-products .product-card:nth-child(6) {
    transition-delay: 100ms;
}

ul.products li:nth-child(7) .product-card,
.shop-products .product-card:nth-child(7) {
    transition-delay: 200ms;
}

ul.products li:nth-child(8) .product-card,
.shop-products .product-card:nth-child(8) {
    transition-delay: 300ms;
}

.testimonials-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 120ms;
}

.testimonials-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 240ms;
}

.testimonials-grid .animate-on-scroll:nth-child(4) {
    transition-delay: 360ms;
}

.about-values__grid .animate-on-scroll:nth-child(2) {
    transition-delay: 100ms;
}

.about-values__grid .animate-on-scroll:nth-child(3) {
    transition-delay: 200ms;
}

.about-values__grid .animate-on-scroll:nth-child(4) {
    transition-delay: 300ms;
}

/* About page: section content stagger (title then text when block reveals) */
@keyframes aboutContentTitleIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aboutContentTextIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-section__content.visible .about-section__title {
    animation: aboutContentTitleIn 0.55s var(--ease-luxury) 0.12s both;
}

.about-section__content.visible .about-section__text {
    animation: aboutContentTextIn 0.55s var(--ease-luxury) 0.32s both;
}

/* About page: section content block delay so image and content don't overlap */
.about-section__inner .about-section__content.animate-on-scroll {
    transition-delay: 80ms;
}

/* About page: team carousel members stagger */
.about-team--carousel .about-team__track .about-team__member:nth-child(1) {
    transition-delay: 0ms;
}

.about-team--carousel .about-team__track .about-team__member:nth-child(2) {
    transition-delay: 70ms;
}

.about-team--carousel .about-team__track .about-team__member:nth-child(3) {
    transition-delay: 140ms;
}

.about-team--carousel .about-team__track .about-team__member:nth-child(4) {
    transition-delay: 210ms;
}

.about-team--carousel .about-team__track .about-team__member:nth-child(5) {
    transition-delay: 280ms;
}

.about-team--carousel .about-team__track .about-team__member:nth-child(6) {
    transition-delay: 350ms;
}

/* About page: CTA inner cascade (title → text → button) */
@keyframes aboutCtaItemIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-cta__inner.visible .about-cta__title {
    animation: aboutCtaItemIn 0.5s var(--ease-luxury) 0.1s both;
}

.about-cta__inner.visible .about-cta__text {
    animation: aboutCtaItemIn 0.5s var(--ease-luxury) 0.28s both;
}

.about-cta__inner.visible .about-cta__btn {
    animation: aboutCtaItemIn 0.5s var(--ease-luxury) 0.45s both;
}

.about-cta__inner.animate-on-scroll:not(.visible) .about-cta__title,
.about-cta__inner.animate-on-scroll:not(.visible) .about-cta__text,
.about-cta__inner.animate-on-scroll:not(.visible) .about-cta__btn {
    opacity: 0;
    transform: translateY(12px);
}

/* Theme Specific Keyframes */
@keyframes introLogoReveal {
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes introLineDraw {
    to {
        width: 64px;
    }
}

@keyframes introTaglineIn {
    to {
        opacity: 1;
    }
}

/* Elite Butterfly - V5 (High-Detail, Branding Aligned) */
.intro-preloader__butterfly {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 50%;
    left: 50%;
    z-index: 9999;
    pointer-events: none;
    transform-style: preserve-3d;
    perspective: 600px;
}

/* Custom 3D Butterfly GIF */
.custom-3d-butterfly {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: custom-butterfly-flight 16s infinite forwards;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
}

/* Organic swooping flight path optimized for a pre-rendered 2D GIF */
@keyframes custom-butterfly-flight {
    0% {
        transform: translate(-300px, 200px) scale(0.4) rotateZ(-15deg);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    10% {
        opacity: 1;
        transform: translate(-150px, 0px) scale(0.7) rotateZ(5deg);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    30% {
        transform: translate(50px, -120px) scale(1.1) rotateZ(20deg);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    45% {
        transform: translate(180px, -20px) scale(0.9) rotateZ(0deg);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    60% {
        transform: translate(300px, -150px) scale(1.2) rotateZ(15deg);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
    75% {
        transform: translate(150px, 100px) scale(0.8) rotateZ(-10deg);
        opacity: 0.9;
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    85% {
        transform: translate(-50px, 150px) scale(1.3) rotateZ(-25deg);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    100% {
        transform: translate(-400px, -200px) scale(0.4) rotateZ(-40deg);
        opacity: 0;
    }
}

@keyframes cursorRingExpand {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
        border-width: 2px;
        border-color: rgba(184, 134, 11, 0.8);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
        border-width: 1px;
        border-color: rgba(184, 134, 11, 0.2);
    }
}

@keyframes rippleExpand {
    to {
        transform: scale(8);
        opacity: 0;
    }
}

@keyframes focusWavePulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes iconRotate {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes particleFall {
    to {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes liquidSquish {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.96, 1.04);
    }

    70% {
        transform: scale(1.02, 0.98);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes inputFocusGlow {
    0% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 0 0 rgba(184, 134, 11, 0);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 0 24px 2px rgba(184, 134, 11, 0.25);
    }

    100% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 0 20px rgba(184, 134, 11, 0.15);
    }
}

@keyframes footerGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes downloadBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

@keyframes cartBreadcrumbIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cartFadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Luxury Easing Functions */
:root {
    --ease-luxury: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.435, 0.005, 0.05, 1.25);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes cartRowIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Premium Motion Library */
@keyframes cardHoverLift {
    to {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }
}

@keyframes titleScramble {
    0% {
        filter: blur(2px);
        opacity: 0.8;
    }

    50% {
        filter: blur(0);
        opacity: 1;
    }

    100% {
        filter: blur(1px);
        opacity: 0.9;
    }
}

@keyframes shineSweepPremium {
    0% {
        transform: translateX(-100%) skewX(-30deg);
    }

    100% {
        transform: translateX(300%) skewX(-30deg);
    }
}

@keyframes magneticPull {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2px, -2px);
    }

    50% {
        transform: translate(-1px, 1px);
    }

    75% {
        transform: translate(1px, -1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes revealBlurIn {
    0% {
        filter: blur(15px);
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes glideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* About page – advanced image motion (zoom-in) */
@keyframes aboutImageReveal {
    0% {
        opacity: 0;
        transform: scale(0.55) translateZ(0);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
        filter: blur(0);
    }
}

@keyframes aboutImageShine {
    0% {
        transform: translateX(-100%) skewX(-18deg);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        transform: translateX(200%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes aboutImageHover3d {
    to {
        transform: scale(1.06) perspective(1200px) rotateX(2deg) rotateY(-3deg) translateZ(16px);
    }
}

@keyframes aboutTeamAvatarReveal {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .animate-on-scroll,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-rotate,
    .reveal-blur,
    .reveal-up,
    .reveal-drop-top {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .about-section__image img,
    .about-team__avatar--circle img,
    .about-team__avatar--rect img {
        opacity: 1 !important;
        animation: none !important;
    }

    .about-section__image:hover::after {
        animation: none !important;
    }

    .about-section__image:hover,
    .about-section__image:hover img {
        transform: none !important;
    }

    .about-team__member:hover,
    .about-team__member:hover .about-team__avatar--circle,
    .about-team__member:hover .about-team__avatar--circle img {
        transform: none !important;
    }

    .about-cta__btn:hover {
        transform: none !important;
    }

    .about-cta__inner.animate-on-scroll:not(.visible) .about-cta__title,
    .about-cta__inner.animate-on-scroll:not(.visible) .about-cta__text,
    .about-cta__inner.animate-on-scroll:not(.visible) .about-cta__btn {
        opacity: 1 !important;
        transform: none !important;
    }

    .page-reveal-overlay {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}