/**
 * NegocioGo — sistema global de motion (animaciones, microinteracciones, modales)
 * Solo transform/opacity para rendimiento. Respeta prefers-reduced-motion.
 */

:root {
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 420ms;
    --motion-stagger-step: 60ms;
    --motion-stagger-max: 360ms;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: var(--motion-ease-out);
    --ease-smooth: var(--motion-ease);
    --motion-lift: -3px;
    --motion-shadow-hover: 0 18px 45px rgba(15, 23, 42, 0.1);
    --motion-shadow-btn: 0 10px 24px -10px rgba(14, 143, 102, 0.45);
    --motion-focus-ring: 0 0 0 3px rgba(14, 143, 102, 0.18);
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    [data-animate],
    [data-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* —— Scroll suave (solo si no hay reduced motion) —— */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* —— Utilidades de entrada —— */
[data-animate] {
    opacity: 0;
    transition:
        opacity var(--motion-slow) var(--ease-out),
        transform var(--motion-slow) var(--ease-out);
}

[data-animate].is-visible {
    opacity: 1;
}

[data-animate="fade-up"] {
    transform: translateY(18px);
}

[data-animate="fade-up"].is-visible {
    transform: translateY(0);
}

[data-animate="fade-in"] {
    transform: none;
}

[data-animate="scale-in"] {
    transform: scale(0.97);
}

[data-animate="scale-in"].is-visible {
    transform: scale(1);
}

[data-animate="slide-left"] {
    transform: translateX(18px);
}

[data-animate="slide-left"].is-visible {
    transform: translateX(0);
}

[data-animate="slide-right"] {
    transform: translateX(-18px);
}

[data-animate="slide-right"].is-visible {
    transform: translateX(0);
}

/* Stagger: hijos empiezan ocultos hasta que el padre es visible */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--motion-slow) var(--ease-out),
        transform var(--motion-slow) var(--ease-out);
}

[data-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.motion-fade-up,
.animate-fade-up { animation: ng-fade-up var(--motion-slow) var(--motion-ease-out) both; }
.motion-fade-in,
.animate-fade-in { animation: ng-fade-in var(--motion-base) var(--motion-ease-out) both; }
.motion-scale-in,
.animate-scale-in { animation: ng-scale-in var(--motion-base) var(--motion-ease-out) both; }
.motion-soft-pop { animation: ng-soft-pop var(--motion-base) var(--motion-ease-out) both; }

/* —— Utilidades globales —— */
.motion-hover-lift {
    transition:
        transform var(--motion-base) var(--motion-ease),
        box-shadow var(--motion-base) var(--motion-ease),
        border-color var(--motion-base) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .motion-hover-lift:hover {
        transform: translateY(-2px);
    }
}

.motion-press,
.ng-button,
.ng-chip {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-base) var(--motion-ease),
        border-color var(--motion-base) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease);
}

.motion-press:active,
.ng-button:active,
.ng-chip:active,
.is-pressed.motion-press,
.is-pressed.ng-button,
.is-pressed.ng-chip {
    transform: scale(0.98);
}

.motion-float {
    animation: ng-float-gentle 6s var(--motion-ease) infinite alternate;
}

.motion-pulse-pin,
.map-pin {
    animation: ng-pin-pulse 2.8s ease-in-out infinite;
}

.motion-soft-glow {
    transition: box-shadow var(--motion-base) var(--motion-ease);
}

@media (hover: hover) {
    .motion-soft-glow:hover {
        box-shadow: 0 0 0 1px rgba(14, 143, 102, 0.12), 0 16px 40px -16px rgba(14, 143, 102, 0.28);
    }
}

/* —— Hero: entrada en carga —— */
[data-hero-intro] [data-hero-item] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--motion-slow) var(--motion-ease-out),
        transform var(--motion-slow) var(--motion-ease-out);
    transition-delay: var(--hero-delay, 0ms);
}

[data-hero-intro] [data-hero-item][data-hero-variant="scale"] {
    transform: translateY(18px) scale(0.97);
}

[data-hero-intro].is-ready [data-hero-item] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

[data-hero-intro] .home-hero__image-wrap.motion-float {
    opacity: 0;
    transform: scale(0.97);
    transition:
        opacity var(--motion-slow) var(--motion-ease-out),
        transform var(--motion-slow) var(--motion-ease-out);
    transition-delay: var(--hero-delay, 220ms);
    animation: none;
}

[data-hero-intro].is-ready .home-hero__image-wrap.motion-float {
    opacity: 1;
    transform: scale(1);
    animation: ng-hero-float 6s var(--motion-ease) infinite;
}

@keyframes ng-hero-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1); }
}

@keyframes ng-pin-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(14, 143, 102, 0);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 8px rgba(14, 143, 102, 0.08);
    }
}

@keyframes ng-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ng-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ng-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ng-soft-pop {
    0% { opacity: 0; transform: scale(0.98); }
    70% { transform: scale(1.01); }
    100% { opacity: 1; transform: scale(1); }
}

/* —— Cards interactivas —— */
.card-interactive,
.market-card,
.landing-category-card,
.landing-business-card,
.landing-featured-card,
.dash-tool-card,
.dash-metric,
.dash-hero,
.qr-card,
.cat-card,
.store-product-card,
.store-service-card {
    transition:
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .card-interactive:hover,
    .market-card:hover,
    .landing-category-card:hover,
    .landing-business-card:hover,
    .landing-featured-card:hover,
    .dash-tool-card:not(.dash-tool-card--locked):hover,
    .dash-metric:hover,
    .qr-card:hover,
    .cat-card:hover,
    .store-product-card:hover,
    .store-service-card:hover {
        transform: translateY(var(--motion-lift));
        box-shadow: var(--motion-shadow-hover);
    }

    .landing-category-card:hover {
        border-color: rgba(14, 143, 102, 0.22);
    }

    .market-card:hover {
        border-color: rgba(14, 143, 102, 0.18);
    }
}

@media (hover: none) {
    .card-interactive:active,
    .market-card:active,
    .landing-category-card:active,
    .dash-tool-card:active,
    .qr-card:active {
        transform: scale(0.99);
    }
}

/* —— Botones —— */
.motion-press:active,
.creator-btn-primary:active,
.creator-btn-accent:active,
.creator-btn-soft:active,
.landing-btn-primary:active,
.landing-btn-secondary:active,
.dash-btn:active,
.market-btn-primary:active,
.market-search__submit:active,
.btn-primary:active,
.btn-primary--green:active,
.order-actions-btn:active {
    transform: translateY(1px) scale(0.98);
}

.creator-btn-primary,
.creator-btn-accent,
.landing-btn-primary,
.dash-btn--primary,
.market-btn-primary,
.market-search__submit,
.btn-primary--green {
    transition:
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out),
        background-color var(--motion-fast) var(--ease-out),
        opacity var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .landing-btn-primary:hover,
    .dash-btn--primary:hover,
    .market-btn-primary:hover,
    .btn-primary--green:hover:not(:disabled) {
        box-shadow: var(--motion-shadow-btn);
        transform: translateY(-2px);
    }

    .creator-btn-soft:hover,
    .landing-btn-secondary:hover,
    .dash-btn--soft:hover,
    .dash-btn--secondary:hover {
        background: rgba(15, 23, 42, 0.04);
    }
}

/* Loading en botones */
.ng-btn-loading,
.creator-btn-primary.is-loading,
.creator-btn-primary[data-form-save-btn].is-loading {
    pointer-events: none;
    position: relative;
}

.ng-btn-loading::after,
.creator-btn-primary.is-loading::after {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.35rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ng-spin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes ng-spin {
    to { transform: rotate(360deg); }
}

/* —— Inputs focus —— */
.input,
textarea,
select,
.market-search__input,
.landing-search-field input,
.publish-form input:not([type="checkbox"]):not([type="radio"]),
.publish-form textarea,
.publish-form select {
    transition:
        border-color var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out);
}

.input:focus,
textarea:focus,
select:focus,
.market-search__input:focus,
.landing-search-field input:focus {
    outline: none;
    border-color: rgba(14, 143, 102, 0.55);
    box-shadow: var(--motion-focus-ring);
}

.field-error .input,
.field-error textarea,
.field-error select,
.input.is-invalid,
textarea.is-invalid {
    border-color: rgba(220, 38, 38, 0.55);
    animation: ng-shake-soft var(--motion-base) var(--ease-out);
}

@keyframes ng-shake-soft {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* —— Modales (dialog nativo) —— */
dialog.ng-modal,
dialog[data-ng-modal],
.qr-order-modal,
.ws-modal__panel,
.favorite-login-modal__panel,
.store-location-modal__panel {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition:
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

dialog.ng-modal[open],
dialog[data-ng-modal][open],
dialog.ng-modal.ng-modal--open,
.qr-order-modal[open],
.ws-modal:not([hidden]) .ws-modal__panel,
.favorite-login-modal.is-open .favorite-login-modal__panel,
.store-location-modal.is-open .store-location-modal__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

dialog.ng-modal::backdrop,
dialog[data-ng-modal]::backdrop,
.qr-order-modal::backdrop {
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out);
}

dialog.ng-modal[open]::backdrop,
dialog[data-ng-modal][open]::backdrop,
.qr-order-modal[open]::backdrop {
    opacity: 1;
}

/* —— Tabs fluidos —— */
.ng-tabs,
.qr-section-tabs,
.qr-filters,
.market-tabs {
    position: relative;
}

.ng-tabs a,
.qr-section-tabs a,
.qr-filters a,
.market-tabs a {
    transition:
        color var(--motion-fast) var(--ease-out),
        background-color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

.ng-tab-panel {
    animation: ng-tab-fade var(--motion-base) var(--ease-out);
}

@keyframes ng-tab-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* —— Toasts globales —— */
.ng-toast-stack,
.seller-toast-stack {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.ng-toast,
.seller-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.32);
    border: 1px solid transparent;
    pointer-events: auto;
    animation: ng-toast-in var(--motion-base) var(--ease-out);
}

.ng-toast--success,
.seller-toast--success {
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}

.ng-toast--error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.2);
}

.ng-toast__text,
.seller-toast__text {
    flex: 1;
    min-width: 0;
}

.ng-toast__close,
.seller-toast__close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.ng-toast__close:hover,
.seller-toast__close:hover {
    opacity: 1;
}

.ng-toast--info,
.seller-toast--info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.2);
}

.ng-toast.is-leaving,
.seller-toast.is-leaving {
    animation: ng-toast-out var(--motion-fast) var(--ease-out) forwards;
}

@keyframes ng-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ng-toast-out {
    to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@media (max-width: 640px) {
    .ng-toast-stack,
    .seller-toast-stack {
        top: auto;
        bottom: 5.5rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

/* —— Empty states —— */
.motion-empty,
.market-empty,
.qr-empty,
.map-empty,
.cat-empty-card,
.landing-empty-state {
    animation: ng-fade-up var(--motion-slow) var(--ease-out) both;
}

/* —— Badge pulse (una vez al cargar) —— */
.motion-pulse-once {
    animation: ng-pulse-once 1.1s var(--ease-smooth) 1;
}

@keyframes ng-pulse-once {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(14, 143, 102, 0.12); }
}

/* —— Hero decorativo —— */
.hero-floating-card,
.landing-product-mockup {
    animation: ng-float-gentle 6s var(--ease-smooth) infinite alternate;
}

.hero-floating-card--2 { animation-delay: 0.8s; }
.hero-floating-card--3 { animation-delay: 1.6s; }
.hero-floating-card--4 { animation-delay: 2.4s; }

@keyframes ng-float-gentle {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-floating-card,
    .landing-product-mockup,
    .motion-float,
    .motion-pulse-pin,
    .map-pin,
    [data-hero-intro] .home-hero__image-wrap.motion-float {
        animation: none !important;
    }

    [data-hero-intro] [data-hero-item],
    [data-hero-intro].is-ready [data-hero-item] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    @keyframes ng-hero-float {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-4px) scale(1); }
    }
}

/* —— Glow suave (solo decorativo) —— */
.motion-glow-soft {
    box-shadow: 0 0 0 1px rgba(14, 143, 102, 0.08), 0 20px 50px -30px rgba(14, 143, 102, 0.35);
}

/* —— Mapa: pins con entrada suave —— */
@keyframes ng-marker-in {
    from { opacity: 0; transform: translateY(6px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.business-map-marker {
    animation: ng-marker-in var(--motion-base) var(--ease-out) both;
}

.business-map-marker.is-selected {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28);
}

.map-popup-card,
.mapboxgl-popup-content {
    animation: ng-scale-in var(--motion-base) var(--ease-out) both;
}

dialog.vendly-favorite-login-modal .vendly-favorite-login-modal__panel {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition:
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

dialog.vendly-favorite-login-modal[open] .vendly-favorite-login-modal__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}