/**
 * HostingPE Motion & Interaction System 1.0
 * Public-site layer. Progressive enhancement only.
 */

:root {
    --hp-motion-instant: 100ms;
    --hp-motion-fast: 160ms;
    --hp-motion-normal: 240ms;
    --hp-motion-slow: 380ms;
    --hp-motion-distance-xs: 2px;
    --hp-motion-distance-sm: 6px;
    --hp-motion-distance-md: 10px;
    --hp-ease-standard: cubic-bezier(.20, .70, .20, 1);
    --hp-ease-enter: cubic-bezier(.21, .78, .28, 1);
    --hp-ease-exit: cubic-bezier(.42, 0, .85, .55);
    --hp-ease-emphasis: cubic-bezier(.18, .88, .32, 1.08);
    --hp-motion-update: rgba(11, 99, 229, .14);
    --hp-motion-success: rgba(16, 185, 129, .18);
}

/* Theme changes are limited to paint properties so layout remains stable. */
html.hp-motion-enabled .premium-site,
html.hp-motion-enabled .premium-site .header,
html.hp-motion-enabled .premium-site .mobile-menu,
html.hp-motion-enabled .premium-site .glass-card,
html.hp-motion-enabled .premium-site .feature-card,
html.hp-motion-enabled .premium-site .ladder-step,
html.hp-motion-enabled .premium-site .accordion-item,
html.hp-motion-enabled .premium-site #evaluation-form,
html.hp-motion-enabled .premium-site input,
html.hp-motion-enabled .premium-site select,
html.hp-motion-enabled .premium-site textarea {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: var(--hp-motion-normal);
    transition-timing-function: var(--hp-ease-standard);
}

/* Controls */
.premium-site .btn {
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: var(--hp-motion-fast);
    transition-timing-function: var(--hp-ease-standard);
}

.premium-site .btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(var(--hp-motion-distance-xs)) scale(.985);
    transition-duration: var(--hp-motion-instant);
}

.premium-site :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(59, 130, 246, .34);
    outline: 3px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .premium-site .hp-motion-interactive {
        transition-property: background-color, border-color, color, box-shadow, transform;
        transition-duration: var(--hp-motion-fast);
        transition-timing-function: var(--hp-ease-standard);
    }

    .premium-site .hp-motion-interactive:hover {
        transform: translateY(-3px);
    }

    /* Informational cards should not imply that they are clickable. */
    .premium-site .feature-card:not(a):not(button):not([role="button"]):hover {
        transform: none;
    }
}

/* Existing menu logic remains the single owner of the active state. */
.premium-site .mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform var(--hp-motion-normal) var(--hp-ease-exit),
        opacity var(--hp-motion-fast) var(--hp-ease-exit),
        visibility 0s linear var(--hp-motion-normal),
        background-color var(--hp-motion-normal) var(--hp-ease-standard),
        border-color var(--hp-motion-normal) var(--hp-ease-standard);
}

.premium-site .mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        transform var(--hp-motion-normal) var(--hp-ease-enter),
        opacity var(--hp-motion-fast) var(--hp-ease-enter),
        visibility 0s,
        background-color var(--hp-motion-normal) var(--hp-ease-standard),
        border-color var(--hp-motion-normal) var(--hp-ease-standard);
}

.premium-site .hamburger span {
    transition-property: transform, opacity, background-color;
    transition-duration: var(--hp-motion-normal);
    transition-timing-function: var(--hp-ease-standard);
}

.premium-site .accordion-header .icon,
.premium-site .accordion-content {
    transition-duration: var(--hp-motion-normal);
    transition-timing-function: var(--hp-ease-standard);
}

.premium-site .back-to-top {
    transition-property: opacity, visibility, transform, background-color, color, box-shadow;
    transition-duration: var(--hp-motion-fast);
    transition-timing-function: var(--hp-ease-standard);
}

/* Reveal states are enabled only after JS has prepared every target. */
html.hp-motion-enabled .premium-site [data-motion][data-motion-state="pending"] {
    opacity: 0;
    translate: 0 var(--hp-motion-distance-md);
    transition:
        opacity var(--hp-motion-normal) var(--hp-ease-enter),
        translate var(--hp-motion-normal) var(--hp-ease-enter),
        scale var(--hp-motion-normal) var(--hp-ease-enter);
    transition-delay: var(--hp-motion-delay, 0ms);
    will-change: opacity, translate;
}

html.hp-motion-enabled .premium-site [data-motion="fade"][data-motion-state="pending"],
html.hp-motion-enabled .premium-site [data-motion="hero"][data-motion-state="pending"] {
    translate: 0 var(--hp-motion-distance-sm);
}

html.hp-motion-enabled .premium-site [data-motion="scale"][data-motion-state="pending"] {
    translate: none;
    scale: .985;
}

html.hp-motion-enabled .premium-site [data-motion][data-motion-state="visible"] {
    transition: opacity var(--hp-motion-normal) var(--hp-ease-enter), translate var(--hp-motion-normal) var(--hp-ease-enter), scale var(--hp-motion-normal) var(--hp-ease-enter);
    transition-delay: var(--hp-motion-delay, 0ms);
    opacity: 1;
    translate: none;
    scale: 1;
    will-change: auto;
}

/* Hosting-specific acknowledgement pulse: state changed, values stay authoritative. */
.premium-site .hp-motion-value-updated {
    border-radius: .35em;
    animation: hp-motion-value-pulse var(--hp-motion-slow) var(--hp-ease-emphasis);
}

.premium-site .hp-motion-success {
    animation: hp-motion-success-pulse var(--hp-motion-slow) var(--hp-ease-emphasis);
}

@keyframes hp-motion-value-pulse {
    0%, 100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
    48% { background-color: var(--hp-motion-update); box-shadow: 0 0 0 4px var(--hp-motion-update); }
}

@keyframes hp-motion-success-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    48% { box-shadow: 0 0 0 5px var(--hp-motion-success); }
}

@media (prefers-reduced-motion: reduce) {
    .premium-site *, .premium-site *::before, .premium-site *::after {
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    html.hp-motion-enabled .premium-site [data-motion],
    html.hp-motion-enabled .premium-site [data-motion][data-motion-state="pending"],
    html.hp-motion-enabled .premium-site [data-motion][data-motion-state="visible"] {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        transition: none !important;
    }

    .premium-site .hp-motion-interactive:hover,
    .premium-site .btn:active:not(:disabled):not([aria-disabled="true"]) {
        transform: none !important;
    }

    .premium-site .mobile-menu,
    .premium-site .mobile-menu.active,
    .premium-site .hamburger span,
    .premium-site .accordion-header .icon,
    .premium-site .accordion-content,
    .premium-site .back-to-top {
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .premium-site .hp-motion-value-updated,
    .premium-site .hp-motion-success {
        animation: none !important;
    }
}