/* =========================================================
   THE CREATIVE STUDIO — ANIMATIONS
   Load after all other stylesheets:
   <link rel="stylesheet" href="animations.css">
   ========================================================= */

:root {
    --motion-fast: 160ms;
    --motion-normal: 260ms;
    --motion-slow: 520ms;
    --motion-long: 820ms;
    --motion-ease: cubic-bezier(.2, .75, .25, 1);
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --motion-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --motion-distance-sm: 10px;
    --motion-distance: 24px;
    --motion-distance-lg: 42px;
    --motion-primary: var(--primary, #1F73E8);
    --motion-primary-light: var(--primary-light, #4EA6FF);
    --motion-accent: var(--accent, #7BC4FF);
}

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance));
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(calc(var(--motion-distance) * -1));
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(calc(var(--motion-distance) * -1));
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(var(--motion-distance));
    }

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.94);
    }

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

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(.94);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(.82);
    }

    70% {
        opacity: 1;
        transform: scale(1.035);
    }

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

@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

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

@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

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

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

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

    50% {
        transform: scale(1.035);
        opacity: .88;
    }
}

@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(31, 115, 232, .32);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(31, 115, 232, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(31, 115, 232, 0);
    }
}

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

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

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

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

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

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

@keyframes bounceSoft {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

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

    60% {
        transform: translateY(-4px);
    }
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-7px);
    }

    40%,
    80% {
        transform: translateX(7px);
    }
}

@keyframes successCheck {
    0% {
        opacity: 0;
        transform: scale(.6) rotate(-18deg);
    }

    70% {
        opacity: 1;
        transform: scale(1.12) rotate(4deg);
    }

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

@keyframes progressGrow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes typingDots {
    0%,
    20% {
        opacity: .25;
        transform: translateY(0);
    }

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

    80%,
    100% {
        opacity: .25;
        transform: translateY(0);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate3d(22px, 0, 0) scale(.96);
    }

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

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(22px, 0, 0) scale(.96);
    }
}

@keyframes modalBackdropIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(7px);
    }
}

@keyframes modalContentIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.97);
    }

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

@keyframes accordionOpen {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

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

@keyframes underlineGrow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* =========================================================
   GLOBAL TRANSITIONS
   ========================================================= */

a,
button,
.btn,
.button-link,
input,
select,
textarea,
.card,
.service-card,
.about-card,
.why-card,
.process-step,
.portfolio-card,
.portfolio-item,
.pricing-card,
.addon-card,
.navigation-card,
.footer-column a,
.social-btn,
.social-icons a {
    transition:
        color var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-normal) var(--motion-ease),
        transform var(--motion-normal) var(--motion-ease),
        opacity var(--motion-fast) ease;
}

/* =========================================================
   ENTRANCE UTILITIES
   ========================================================= */

.animate-fade-in {
    animation: fadeIn var(--motion-slow) var(--motion-ease-out) both;
}

.animate-fade-in-up {
    animation: fadeInUp var(--motion-slow) var(--motion-ease-out) both;
}

.animate-fade-in-down {
    animation: fadeInDown var(--motion-slow) var(--motion-ease-out) both;
}

.animate-fade-in-left {
    animation: fadeInLeft var(--motion-slow) var(--motion-ease-out) both;
}

.animate-fade-in-right {
    animation: fadeInRight var(--motion-slow) var(--motion-ease-out) both;
}

.animate-zoom-in {
    animation: zoomIn var(--motion-slow) var(--motion-ease-out) both;
}

.animate-pop-in {
    animation: popIn var(--motion-slow) var(--motion-bounce) both;
}

.animate-slide-top {
    animation: slideInTop var(--motion-slow) var(--motion-ease-out) both;
}

.animate-slide-bottom {
    animation: slideInBottom var(--motion-slow) var(--motion-ease-out) both;
}

.animate-slide-left {
    animation: slideInLeft var(--motion-slow) var(--motion-ease-out) both;
}

.animate-slide-right {
    animation: slideInRight var(--motion-slow) var(--motion-ease-out) both;
}

.animate-float {
    animation: floatSoft 4s ease-in-out infinite;
}

.animate-pulse {
    animation: pulseSoft 2.4s ease-in-out infinite;
}

.animate-pulse-ring {
    animation: pulseRing 2s ease-out infinite;
}

.animate-bounce {
    animation: bounceSoft 1.8s ease infinite;
}

.animate-spin {
    animation: spin .9s linear infinite;
}

.animate-rotate-slow {
    animation: rotateSlow 14s linear infinite;
}

.animate-shake {
    animation: shake .45s ease both;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* ---------- Animation duration helpers ---------- */

.motion-fast {
    animation-duration: var(--motion-fast) !important;
}

.motion-normal {
    animation-duration: var(--motion-normal) !important;
}

.motion-slow {
    animation-duration: var(--motion-slow) !important;
}

.motion-long {
    animation-duration: var(--motion-long) !important;
}

/* ---------- Animation delay helpers ---------- */

.delay-1 {
    animation-delay: 80ms !important;
}

.delay-2 {
    animation-delay: 160ms !important;
}

.delay-3 {
    animation-delay: 240ms !important;
}

.delay-4 {
    animation-delay: 320ms !important;
}

.delay-5 {
    animation-delay: 400ms !important;
}

.delay-6 {
    animation-delay: 480ms !important;
}

/* =========================================================
   SCROLL-REVEAL SUPPORT
   Add .reveal to an element and .is-visible with JavaScript.
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition:
        opacity var(--motion-slow) var(--motion-ease-out),
        transform var(--motion-slow) var(--motion-ease-out);
    will-change: opacity, transform;
}

.reveal.reveal-left {
    transform: translateX(calc(var(--motion-distance-lg) * -1));
}

.reveal.reveal-right {
    transform: translateX(var(--motion-distance-lg));
}

.reveal.reveal-scale {
    transform: scale(.95);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-group > * {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition:
        opacity var(--motion-slow) var(--motion-ease-out),
        transform var(--motion-slow) var(--motion-ease-out);
}

.reveal-group.is-visible > * {
    opacity: 1;
    transform: none;
}

.reveal-group.is-visible > *:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-group.is-visible > *:nth-child(2) {
    transition-delay: 90ms;
}

.reveal-group.is-visible > *:nth-child(3) {
    transition-delay: 180ms;
}

.reveal-group.is-visible > *:nth-child(4) {
    transition-delay: 270ms;
}

.reveal-group.is-visible > *:nth-child(5) {
    transition-delay: 360ms;
}

.reveal-group.is-visible > *:nth-child(6) {
    transition-delay: 450ms;
}

.reveal-group.is-visible > *:nth-child(n + 7) {
    transition-delay: 520ms;
}

/* =========================================================
   HEADER AND NAVIGATION
   ========================================================= */

.site-header {
    animation: fadeInDown var(--motion-slow) var(--motion-ease-out) both;
}

.brand img {
    transform-origin: center;
}

.brand:hover img,
.brand:focus-visible img {
    transform: scale(1.035);
}

.nav-links > li > a {
    position: relative;
}

.nav-links > li > a:not(.button-link)::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 5px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--motion-normal) var(--motion-ease-out);
}

.nav-links > li > a:not(.button-link):hover::after,
.nav-links > li > a:not(.button-link):focus-visible::after,
.nav-links > li > a.active:not(.button-link)::after {
    transform: scaleX(1);
}

.dropdown-menu {
    transform-origin: top center;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
    animation: fadeInDown var(--motion-normal) var(--motion-ease-out) both;
}

#mobileMenuBtn,
#mobileMenuButton {
    transition:
        transform var(--motion-normal) var(--motion-ease),
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}

#mobileMenuBtn:hover,
#mobileMenuBtn:focus-visible,
#mobileMenuButton:hover,
#mobileMenuButton:focus-visible {
    transform: scale(1.04);
}

#mobileMenuBtn[aria-expanded="true"],
#mobileMenuButton[aria-expanded="true"] {
    transform: rotate(90deg);
}

.nav-links.active {
    animation: fadeInDown var(--motion-normal) var(--motion-ease-out) both;
}

/* =========================================================
   HERO SECTIONS
   ========================================================= */

.hero-content,
#pricing-hero .container,
#portfolio-hero .container,
#navigation-hero .container,
#agreement-hero .container,
#estimate-hero .container {
    animation: fadeInUp var(--motion-long) var(--motion-ease-out) both;
}

.hero-logo,
.cta-logo,
.banner-logo,
.contact-logo {
    animation: popIn var(--motion-long) var(--motion-bounce) both;
}

.hero-content h2,
#pricing-hero h1,
#portfolio-hero h1,
#navigation-hero h1,
#agreement-hero h1,
#estimate-hero h1 {
    animation: fadeInUp var(--motion-long) var(--motion-ease-out) 100ms both;
}

.hero-content p,
#pricing-hero p,
#portfolio-hero p,
#navigation-hero p,
#agreement-hero p,
#estimate-hero p {
    animation: fadeInUp var(--motion-long) var(--motion-ease-out) 180ms both;
}

.hero-buttons,
.cta-buttons {
    animation: fadeInUp var(--motion-long) var(--motion-ease-out) 260ms both;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
.button-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn::before,
.button-link::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    z-index: -1;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform: rotate(20deg);
    transition: left .55s var(--motion-ease-out);
}

.btn:hover::before,
.btn:focus-visible::before,
.button-link:hover::before,
.button-link:focus-visible::before {
    left: 135%;
}

.btn:hover,
.button-link:hover {
    transform: translateY(-2px);
}

.btn:active,
.button-link:active {
    transform: translateY(0) scale(.985);
}

/* =========================================================
   CARDS AND GRIDS
   ========================================================= */

.about-card,
.service-card,
.why-card,
.stat-card,
.process-step,
.portfolio-card,
.portfolio-item,
.pricing-card,
.addon-card,
.navigation-card,
.hours-card,
.portfolio-process-card,
.agreement-card,
.estimate-card {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.about-card:hover,
.service-card:hover,
.why-card:hover,
.process-step:hover,
.portfolio-card:hover,
.portfolio-item:hover,
.pricing-card:hover,
.addon-card:hover,
.navigation-card:hover,
.hours-card:hover,
.portfolio-process-card:hover {
    transform: translateY(-5px);
}

.about-grid > *,
.services-grid > *,
.why-grid > *,
.stats-grid > *,
.process-grid > *,
.portfolio-grid > *,
.hours-grid > *,
.pricing-grid > *,
.addon-grid > *,
.portfolio-gallery > *,
.portfolio-process-grid > *,
.navigation-grid > * {
    animation: fadeInUp var(--motion-slow) var(--motion-ease-out) both;
}

.about-grid > *:nth-child(2),
.services-grid > *:nth-child(2),
.why-grid > *:nth-child(2),
.stats-grid > *:nth-child(2),
.process-grid > *:nth-child(2),
.portfolio-grid > *:nth-child(2),
.hours-grid > *:nth-child(2),
.pricing-grid > *:nth-child(2),
.addon-grid > *:nth-child(2),
.portfolio-gallery > *:nth-child(2),
.portfolio-process-grid > *:nth-child(2),
.navigation-grid > *:nth-child(2) {
    animation-delay: 80ms;
}

.about-grid > *:nth-child(3),
.services-grid > *:nth-child(3),
.why-grid > *:nth-child(3),
.stats-grid > *:nth-child(3),
.process-grid > *:nth-child(3),
.portfolio-grid > *:nth-child(3),
.hours-grid > *:nth-child(3),
.pricing-grid > *:nth-child(3),
.addon-grid > *:nth-child(3),
.portfolio-gallery > *:nth-child(3),
.portfolio-process-grid > *:nth-child(3),
.navigation-grid > *:nth-child(3) {
    animation-delay: 160ms;
}

.about-grid > *:nth-child(4),
.services-grid > *:nth-child(4),
.why-grid > *:nth-child(4),
.stats-grid > *:nth-child(4),
.process-grid > *:nth-child(4),
.portfolio-grid > *:nth-child(4),
.hours-grid > *:nth-child(4),
.pricing-grid > *:nth-child(4),
.addon-grid > *:nth-child(4),
.portfolio-gallery > *:nth-child(4),
.portfolio-process-grid > *:nth-child(4),
.navigation-grid > *:nth-child(4) {
    animation-delay: 240ms;
}

.about-grid > *:nth-child(n + 5),
.services-grid > *:nth-child(n + 5),
.why-grid > *:nth-child(n + 5),
.stats-grid > *:nth-child(n + 5),
.process-grid > *:nth-child(n + 5),
.portfolio-grid > *:nth-child(n + 5),
.hours-grid > *:nth-child(n + 5),
.pricing-grid > *:nth-child(n + 5),
.addon-grid > *:nth-child(n + 5),
.portfolio-gallery > *:nth-child(n + 5),
.portfolio-process-grid > *:nth-child(n + 5),
.navigation-grid > *:nth-child(n + 5) {
    animation-delay: 320ms;
}

/* =========================================================
   PORTFOLIO
   ========================================================= */

.portfolio-item img,
.portfolio-card img {
    transition:
        transform .45s var(--motion-ease-out),
        filter var(--motion-normal) ease;
}

.portfolio-item:hover img,
.portfolio-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.05);
}

.filter-btn {
    transform-origin: center;
}

.filter-btn:hover,
.filter-btn:focus-visible {
    transform: translateY(-1px) scale(1.015);
}

.filter-btn.active,
.filter-btn[aria-pressed="true"] {
    animation: popIn var(--motion-normal) var(--motion-bounce) both;
}

.portfolio-empty.show {
    animation: fadeInUp var(--motion-slow) var(--motion-ease-out) both;
}

/* =========================================================
   PRICING
   ========================================================= */

.pricing-card.featured-plan {
    animation: fadeInUp var(--motion-slow) var(--motion-ease-out) both;
}

.popular {
    animation: pulseRing 2.4s ease-out infinite;
}

.price {
    transition: transform var(--motion-normal) var(--motion-bounce);
}

.pricing-card:hover .price {
    transform: scale(1.035);
}

.pricing-card-body li::before {
    animation: successCheck var(--motion-normal) var(--motion-bounce) both;
}

/* =========================================================
   FORMS
   ========================================================= */

.order-step.active,
.form-card,
.section-card,
.booking-section,
.feedback-section,
.referral-section,
.support-section,
.change-request-section,
.payment-card {
    animation: fadeInUp var(--motion-slow) var(--motion-ease-out) both;
}

form input:not([type="checkbox"]):not([type="radio"]),
form select,
form textarea {
    transition:
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        transform var(--motion-fast) ease;
}

form input:not([type="checkbox"]):not([type="radio"]):focus,
form select:focus,
form textarea:focus {
    transform: translateY(-1px);
}

.choice,
.feedback-choice,
.support-choice,
.change-choice,
.estimate-decision-option,
.service-card {
    transition:
        transform var(--motion-normal) var(--motion-ease),
        border-color var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        box-shadow var(--motion-normal) var(--motion-ease);
}

.choice:has(input:checked),
.feedback-choice:has(input:checked),
.support-choice:has(input:checked),
.change-choice:has(input:checked),
.estimate-decision-option:has(input:checked),
.service-card:has(input:checked) {
    animation: popIn var(--motion-normal) var(--motion-bounce) both;
}

.drop-zone.dragover,
.upload-zone.dragover,
.support-upload-zone.dragover,
.change-upload-zone.dragover {
    animation: pulseSoft 1s ease-in-out infinite;
}

.form-status.success,
.form-message.success,
.booking-form-status.success,
.feedback-form-status.success,
.referral-form-status.success,
.support-form-status.success,
.change-form-status.success,
.payment-status.success,
.agreement-form-status.success,
.estimate-form-status.success {
    animation: fadeInUp var(--motion-normal) var(--motion-ease-out) both;
}

.form-status.error,
.form-message.error,
.booking-form-status.error,
.feedback-form-status.error,
.referral-form-status.error,
.support-form-status.error,
.change-form-status.error,
.payment-status.error,
.agreement-form-status.error,
.estimate-form-status.error {
    animation:
        fadeIn var(--motion-normal) ease both,
        shake .42s ease 1;
}

.confirmation,
.agreement-completed-box,
.estimate-completed-box {
    animation: zoomIn var(--motion-slow) var(--motion-bounce) both;
}

.confirmation-icon {
    animation: successCheck var(--motion-slow) var(--motion-bounce) both;
}

/* =========================================================
   FAQ / ACCORDIONS
   ========================================================= */

.faq-question::after {
    transition:
        transform var(--motion-normal) var(--motion-ease),
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}

.faq-question[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.faq-question[aria-expanded="true"] + .faq-answer,
.faq-answer[aria-hidden="false"] {
    animation: accordionOpen var(--motion-normal) var(--motion-ease-out) both;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal:not(.hidden),
#portfolioModal:not(.hidden),
#imageViewer:not(.hidden) {
    animation: modalBackdropIn var(--motion-normal) ease both;
}

.modal:not(.hidden) .modal-content,
#portfolioModal:not(.hidden) .modal-content,
#imageViewer:not(.hidden) .modal-content {
    animation: modalContentIn var(--motion-slow) var(--motion-ease-out) both;
}

.close-modal:hover,
.close-modal:focus-visible {
    transform: rotate(7deg) scale(1.045);
}

.close-modal:active {
    transform: rotate(0deg) scale(.97);
}

/* =========================================================
   TOASTS AND NOTICES
   ========================================================= */

.toast,
.toast-message,
.toast-item {
    animation: toastIn var(--motion-normal) var(--motion-ease-out) both;
}

.toast.removing,
.toast-message.removing,
.toast-item.removing {
    animation: toastOut var(--motion-normal) var(--motion-ease-in-out) both;
}

.notice,
.form-status,
.form-message {
    transform-origin: left center;
}

/* =========================================================
   PROGRESS, SPINNERS, AND SKELETONS
   ========================================================= */

.progress-bar,
.progress-fill,
.step-progress-fill {
    transform-origin: left center;
    animation: progressGrow var(--motion-slow) var(--motion-ease-out) both;
}

.spinner,
.agreement-spinner,
.estimate-spinner,
.loading-spinner {
    animation: spin .9s linear infinite;
}

.skeleton,
.skeleton-line,
.skeleton-card {
    background:
        linear-gradient(
            90deg,
            #eef2f7 25%,
            #f8fafc 38%,
            #eef2f7 63%
        );
    background-size: 400% 100%;
    animation: shimmer 1.45s linear infinite;
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: typingDots 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 140ms;
}

.typing-dots span:nth-child(3) {
    animation-delay: 280ms;
}

/* =========================================================
   COUNTERS AND STATISTICS
   ========================================================= */

.counter,
.stat-card h2 {
    animation: popIn var(--motion-slow) var(--motion-bounce) both;
}

.stat-card:hover h2 {
    transform: scale(1.06);
}

/* =========================================================
   FOOTER
   ========================================================= */

#site-footer .footer-column {
    animation: fadeInUp var(--motion-slow) var(--motion-ease-out) both;
}

#site-footer .footer-column:nth-child(2) {
    animation-delay: 80ms;
}

#site-footer .footer-column:nth-child(3) {
    animation-delay: 160ms;
}

#site-footer .footer-column:nth-child(4) {
    animation-delay: 240ms;
}

#site-footer .footer-column:nth-child(5) {
    animation-delay: 320ms;
}

#site-footer a {
    position: relative;
}

#site-footer a:not(.footer-logo)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-normal) var(--motion-ease-out);
}

#site-footer a:hover::after,
#site-footer a:focus-visible::after {
    transform: scaleX(1);
}

.footer-logo {
    transition: transform var(--motion-normal) var(--motion-bounce);
}

.footer-logo:hover {
    transform: scale(1.035);
}

/* =========================================================
   BACK TO TOP
   ========================================================= */

#backToTop.show {
    animation: popIn var(--motion-normal) var(--motion-bounce) both;
}

#backToTop:hover,
#backToTop:focus-visible {
    transform: translateY(-3px);
}

#backToTop:active {
    transform: translateY(0) scale(.96);
}

/* =========================================================
   HOVER EFFECT UTILITIES
   ========================================================= */

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-scale:hover {
    transform: scale(1.035);
}

.hover-glow:hover {
    box-shadow: 0 18px 42px rgba(31, 115, 232, .18);
}

.hover-float:hover {
    animation: floatSoft 1.8s ease-in-out infinite;
}

/* =========================================================
   MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 900px) {
    .nav-links > li > a:not(.button-link)::after {
        display: none;
    }

    .nav-links.active > li {
        animation: fadeInUp var(--motion-normal) var(--motion-ease-out) both;
    }

    .nav-links.active > li:nth-child(2) {
        animation-delay: 50ms;
    }

    .nav-links.active > li:nth-child(3) {
        animation-delay: 100ms;
    }

    .nav-links.active > li:nth-child(4) {
        animation-delay: 150ms;
    }

    .nav-links.active > li:nth-child(5) {
        animation-delay: 200ms;
    }

    .nav-links.active > li:nth-child(6) {
        animation-delay: 250ms;
    }

    .nav-links.active > li:nth-child(7) {
        animation-delay: 300ms;
    }
}

@media (max-width: 760px) {
    .about-grid > *,
    .services-grid > *,
    .why-grid > *,
    .stats-grid > *,
    .process-grid > *,
    .portfolio-grid > *,
    .hours-grid > *,
    .pricing-grid > *,
    .addon-grid > *,
    .portfolio-gallery > *,
    .portfolio-process-grid > *,
    .navigation-grid > *,
    #site-footer .footer-column {
        animation-delay: 0ms !important;
    }

    .hero-logo,
    .cta-logo,
    .banner-logo,
    .contact-logo {
        animation-duration: var(--motion-slow);
    }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    .about-card:hover,
    .service-card:hover,
    .why-card:hover,
    .process-step:hover,
    .portfolio-card:hover,
    .portfolio-item:hover,
    .pricing-card:hover,
    .addon-card:hover,
    .navigation-card:hover,
    .hours-card:hover,
    .portfolio-process-card:hover,
    .btn:hover,
    .button-link:hover {
        transform: none;
    }

    .portfolio-item:hover img,
    .portfolio-card:hover img {
        transform: none;
        filter: none;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .reveal,
    .reveal-group > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .animate-float,
    .animate-pulse,
    .animate-pulse-ring,
    .animate-bounce,
    .animate-spin,
    .animate-rotate-slow,
    .animate-gradient,
    .popular,
    .spinner,
    .agreement-spinner,
    .estimate-spinner,
    .loading-spinner,
    .skeleton,
    .skeleton-line,
    .skeleton-card,
    .typing-dots span {
        animation: none !important;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .reveal,
    .reveal-group > * {
        opacity: 1 !important;
    }
}