/**
 * PetClínicas — Motion Design Premium (Sprint 7.2D)
 * Tokens: 180 / 220 / 250 / 450–600ms · transform/opacity only
 */

:root {
    --pc-motion-fast: 180ms;
    --pc-motion-base: 220ms;
    --pc-motion-header: 250ms;
    --pc-motion-med: 450ms;
    --pc-motion-slow: 600ms;
    --pc-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pc-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pc-motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --pc-primary: #003845;
    --pc-orange: #FF6B00;
}

/* —— Reveal —— */
.pc-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity var(--pc-motion-med) var(--pc-motion-ease),
        transform var(--pc-motion-med) var(--pc-motion-ease);
    will-change: opacity, transform;
}
.pc-reveal.is-revealed {
    opacity: 1;
    transform: none;
}
.pc-reveal-child {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity var(--pc-motion-med) var(--pc-motion-ease),
        transform var(--pc-motion-med) var(--pc-motion-ease);
    transition-delay: var(--pc-reveal-delay, 0ms);
}
.pc-reveal-child.is-revealed {
    opacity: 1;
    transform: none;
}

/* —— Cards / hover —— */
html.pc-motion-hover-on .pc-motion-card {
    transition:
        transform var(--pc-motion-base) var(--pc-motion-ease),
        box-shadow var(--pc-motion-base) var(--pc-motion-ease),
        border-color var(--pc-motion-fast) var(--pc-motion-ease-soft);
}
html.pc-motion-hover-on .pc-motion-card:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 16px 36px rgba(0, 56, 69, 0.1);
}
html.pc-motion-hover-on .pc-motion-cta {
    transition:
        transform var(--pc-motion-fast) var(--pc-motion-ease),
        box-shadow var(--pc-motion-fast) var(--pc-motion-ease),
        background var(--pc-motion-fast) var(--pc-motion-ease-soft);
}
html.pc-motion-hover-on .pc-motion-cta:hover {
    transform: translate3d(0, -1px, 0);
}

/* Blog / content cards — image zoom + title underline */
.pc-motion-card .pc-blog-card__media,
.pc-blog-card .pc-blog-card__media,
[data-motion="blog-card"] img {
    transition: transform var(--pc-motion-slow) var(--pc-motion-ease);
    transform-origin: center;
}
html.pc-motion-hover-on .pc-motion-card:hover .pc-blog-card__media,
html.pc-motion-hover-on .pc-blog-card:hover .pc-blog-card__media,
html.pc-motion-hover-on [data-motion="blog-card"]:hover img {
    transform: scale(1.04);
}
.pc-blog-card__title,
[data-motion="blog-card"] h3,
#conteudos .pc-card h3 {
    transition: color var(--pc-motion-base) var(--pc-motion-ease-soft);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition:
        color var(--pc-motion-base) var(--pc-motion-ease-soft),
        background-size var(--pc-motion-base) var(--pc-motion-ease);
}
html.pc-motion-hover-on .pc-blog-card:hover .pc-blog-card__title,
html.pc-motion-hover-on [data-motion="blog-card"]:hover h3,
html.pc-motion-hover-on #conteudos .pc-card:hover h3 {
    color: var(--pc-orange);
    background-size: 100% 2px;
}

/* TOC active */
.pc-blog-toc a,
[data-motion="toc"] a {
    transition: color var(--pc-motion-fast) var(--pc-motion-ease-soft), border-color var(--pc-motion-fast) ease;
    border-left: 2px solid transparent;
    padding-left: 10px;
}
.pc-blog-toc a.is-active,
[data-motion="toc"] a.is-active {
    color: var(--pc-orange);
    border-left-color: var(--pc-orange);
    font-weight: 600;
}

/* —— Header align 250ms —— */
.pc-header-shell .pc-header--premium,
.pc-header-shell .pc-header__inner,
.pc-header-shell .pc-logo__image {
    transition-duration: var(--pc-motion-header) !important;
}

/* —— WhatsApp: delay appear, bounce, pulse 30s —— */
.pc-wa-float--motion {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.96);
    pointer-events: none;
    transition:
        opacity var(--pc-motion-med) var(--pc-motion-ease),
        transform var(--pc-motion-med) var(--pc-motion-ease);
}
.pc-wa-float--motion.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.pc-wa-float--motion.is-bounce .pc-wa-float__link {
    animation: pc-wa-bounce 650ms var(--pc-motion-ease) 1;
}
.pc-wa-float--motion.is-pulse .pc-wa-float__link {
    animation: pc-wa-pulse 2.2s var(--pc-motion-ease-soft) infinite;
}
.pc-wa-float--motion.is-pulse-done .pc-wa-float__link {
    animation: none;
}

@keyframes pc-wa-bounce {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    40% { transform: translate3d(0, -8px, 0) scale(1.04); }
    70% { transform: translate3d(0, 2px, 0) scale(0.98); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes pc-wa-pulse {
    0%, 100% { box-shadow: 0 18px 40px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 18px 40px rgba(37, 211, 102, 0.35), 0 0 0 12px rgba(37, 211, 102, 0.18); }
}

/* —— Cookie banner slide + backdrop —— */
.pc-cookie--motion {
    transition:
        opacity var(--pc-motion-med) var(--pc-motion-ease),
        transform var(--pc-motion-med) var(--pc-motion-ease);
}
.pc-cookie--motion.is-open {
    animation: pc-cookie-slide-in var(--pc-motion-med) var(--pc-motion-ease);
}
@keyframes pc-cookie-slide-in {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
body.pc-cookie-backdrop::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 10025;
    background: rgba(0, 56, 69, 0.28);
    pointer-events: none;
    animation: pc-cookie-fade-in var(--pc-motion-base) var(--pc-motion-ease-soft);
}
@keyframes pc-cookie-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* —— Login premium: focus glow, eye, ripple —— */
html.pc-motion-glow-on .pc-auth__input:focus {
    border-color: var(--pc-orange);
    box-shadow:
        0 0 0 3px rgba(255, 107, 0, 0.2),
        0 0 18px rgba(255, 107, 0, 0.12);
    transition: border-color var(--pc-motion-fast) ease, box-shadow var(--pc-motion-base) var(--pc-motion-ease);
}
.pc-auth__eye {
    transition: color var(--pc-motion-fast) ease, background var(--pc-motion-fast) ease, transform var(--pc-motion-fast) var(--pc-motion-ease);
}
.pc-auth__eye:hover {
    transform: translateY(-50%) scale(1.06);
}
.pc-auth__btn {
    position: relative;
    overflow: hidden;
}
.pc-auth__btn.pc-motion-cta::after,
.pc-motion-cta.pc-auth__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--pc-ripple-x, 50%) var(--pc-ripple-y, 50%), rgba(255, 255, 255, 0.35), transparent 55%);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--pc-motion-med) ease, transform var(--pc-motion-slow) var(--pc-motion-ease);
    pointer-events: none;
}
.pc-auth__btn.pc-motion-cta:active::after,
.pc-motion-cta.pc-auth__btn:active::after {
    opacity: 1;
    transform: scale(1.6);
    transition-duration: var(--pc-motion-fast);
}

/* —— Modals / drawer —— */
.pc-drawer-enter { transition: transform var(--pc-motion-header) var(--pc-motion-ease) !important; }
.pc-drawer-leave { transition: transform var(--pc-motion-fast) var(--pc-motion-ease) !important; }
[data-motion="modal"],
.pc-modal {
    transition: opacity var(--pc-motion-base) var(--pc-motion-ease), transform var(--pc-motion-base) var(--pc-motion-ease);
}

/* —— Footer link soft —— */
.pc-footer a {
    transition: color var(--pc-motion-fast) var(--pc-motion-ease-soft), opacity var(--pc-motion-fast) ease;
}

/* —— Mobile lite (heavy off by default) —— */
html.pc-motion-mobile-lite .pc-wa-float--motion.is-pulse .pc-wa-float__link {
    animation: none;
}
html.pc-motion-mobile-lite .pc-reveal {
    transform: translate3d(0, 8px, 0);
}
html.pc-motion-particles-off .pc-hero__particles,
html.pc-motion-particles-off [data-pc-hero-particles] {
    display: none !important;
    animation: none !important;
}
html.pc-motion-cards-off .pc-hero__floats {
    animation: none !important;
}

/* —— Accessibility: reduced motion —— */
@media (prefers-reduced-motion: reduce) {
    .pc-reveal,
    .pc-reveal-child,
    .pc-cookie--motion,
    .pc-wa-float--motion,
    .pc-motion-card,
    .pc-motion-cta,
    .pc-auth__btn::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .pc-wa-float--motion.is-bounce .pc-wa-float__link,
    .pc-wa-float--motion.is-pulse .pc-wa-float__link {
        animation: none !important;
    }
    body.pc-cookie-backdrop::before {
        animation: none;
        opacity: 0.2;
    }
    .pc-reveal-child { opacity: 1; }
}

html.pc-reduced-motion .pc-reveal,
html.pc-reduced-motion .pc-reveal-child,
body.pc-reduced-motion .pc-reveal,
body.pc-reduced-motion .pc-reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
html.pc-reduced-motion .pc-wa-float--motion,
body.pc-reduced-motion .pc-wa-float--motion {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
}
html.pc-reduced-motion .pc-wa-float--motion.is-bounce .pc-wa-float__link,
html.pc-reduced-motion .pc-wa-float--motion.is-pulse .pc-wa-float__link,
body.pc-reduced-motion .pc-wa-float--motion.is-bounce .pc-wa-float__link,
body.pc-reduced-motion .pc-wa-float--motion.is-pulse .pc-wa-float__link {
    animation: none !important;
}
html.pc-motion-off .pc-reveal,
html.pc-motion-off .pc-reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}