/* Premium motion — Lapin Manuaaliterapia */

:root {
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --duration-fast: 0.22s;
    --duration-mid: 0.38s;
    --duration-slow: 0.55s;
    --shadow-hover: 0 12px 40px rgba(74, 159, 212, 0.18);
    --shadow-lift: 0 20px 48px rgba(30, 51, 72, 0.12);
}

@media (prefers-reduced-motion: no-preference) {
    body {
        animation: page-fade-in 0.55s var(--ease-out-soft) both;
    }
}

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

/* —— Buttons —— */
.ice-button {
    transition:
        background var(--duration-mid) ease,
        transform var(--duration-fast) var(--ease-out-expo),
        box-shadow var(--duration-mid) ease,
        filter var(--duration-fast) ease;
}

@media (hover: hover) {
    .ice-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(74, 159, 212, 0.38);
        filter: brightness(1.03);
    }

    .ice-button:active {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 4px 14px rgba(74, 159, 212, 0.28);
        transition-duration: 0.1s;
    }
}

a.rounded-full.font-medium[class*="border"],
main a.border[class*="border-secondary"] {
    transition:
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        transform var(--duration-fast) var(--ease-out-expo),
        box-shadow var(--duration-mid) ease;
}

@media (hover: hover) {
    a.rounded-full.font-medium[class*="border"]:hover,
    main a.border[class*="border-secondary"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(110, 184, 232, 0.15);
    }

    a.rounded-full.font-medium[class*="border"]:active,
    main a.border[class*="border-secondary"]:active {
        transform: translateY(0) scale(0.99);
    }
}

/* —— Navigation —— */
nav.fixed {
    transition:
        background-color var(--duration-mid) ease,
        border-color var(--duration-mid) ease,
        box-shadow var(--duration-mid) ease;
}

.nav-bar-brand {
    transition: transform var(--duration-fast) var(--ease-out-expo);
}

@media (hover: hover) {
    .nav-bar-brand:hover {
        transform: scale(1.02);
    }

    .nav-bar-brand:hover img {
        filter: brightness(1.05);
    }
}

.nav-bar-brand img {
    transition: filter var(--duration-mid) ease, opacity var(--duration-fast) ease;
}

nav a:not(.ice-button),
nav button:not(.ice-button) {
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.nav-dropdown-panel a {
    transition:
        color var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        padding-left var(--duration-fast) var(--ease-out-soft);
}

@media (hover: hover) {
    .nav-dropdown-panel a:hover {
        padding-left: 1.35rem;
    }
}

#mobile-menu a,
#mobile-menu button {
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

/* —— Links —— */
main a.text-secondary,
main a.font-label-caps.text-secondary,
main a.inline-flex.text-secondary {
    transition:
        color var(--duration-fast) ease,
        gap var(--duration-mid) var(--ease-out-expo),
        transform var(--duration-fast) var(--ease-out-expo);
}

@media (hover: hover) {
    main a.text-secondary:hover,
    main a.font-label-caps.text-secondary:hover,
    main a.inline-flex.text-secondary:hover {
        transform: translateX(3px);
    }

    main a.text-secondary:hover .material-symbols-outlined,
    main a.font-label-caps.text-secondary:hover .material-symbols-outlined {
        transform: translateX(2px);
    }
}

main a.text-secondary .material-symbols-outlined,
main a.font-label-caps .material-symbols-outlined {
    transition: transform var(--duration-mid) var(--ease-out-expo);
}

footer a {
    transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

footer a:hover {
    opacity: 1;
}

.privacy-prose a.text-secondary {
    transition: color var(--duration-fast) ease, gap var(--duration-mid) ease;
}

/* —— Glass panels & CTA —— */
main .glass-panel,
.error-page__panel {
    transition:
        box-shadow var(--duration-mid) var(--ease-out-soft),
        border-color var(--duration-mid) ease,
        transform var(--duration-mid) var(--ease-out-expo);
}

@media (hover: hover) {
    main .glass-panel:hover,
    #ajanvaraus .glass-panel:hover,
    .error-page__panel:hover {
        transform: translateY(-3px);
        box-shadow:
            0 8px 32px rgba(74, 159, 212, 0.14),
            0 24px 56px rgba(30, 51, 72, 0.1);
        border-color: rgba(110, 184, 232, 0.55);
    }
}

.cookie-service {
    transition:
        transform var(--duration-mid) var(--ease-out-expo),
        box-shadow var(--duration-mid) ease,
        border-color var(--duration-mid) ease;
}

@media (hover: hover) {
    .cookie-service:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(30, 51, 72, 0.08);
    }
}

/* —— Trust & stats —— */
@media (hover: hover) {
    .grid.grid-cols-1.md\:grid-cols-3.gap-12 > .flex.flex-col.items-center:hover .material-symbols-outlined {
        transform: scale(1.08);
        color: #4a9fd4;
    }

    main .p-6.border-l.border-outline-variant\/30:hover {
        transform: translateX(4px);
        border-left-color: rgba(110, 184, 232, 0.65);
    }
}

.grid.grid-cols-1.md\:grid-cols-3.gap-12 .material-symbols-outlined,
main .p-6.border-l {
    transition:
        transform var(--duration-mid) var(--ease-out-expo),
        color var(--duration-fast) ease,
        border-color var(--duration-mid) ease;
}

/* —— Hero (subtle image drift on large screens) —— */
@media (hover: hover) and (min-width: 768px) {
    #etusivu:hover .absolute.inset-0.z-0 img {
        transform: scale(1.06);
    }
}

#etusivu .absolute.inset-0.z-0 img {
    transition: transform 1.2s var(--ease-out-expo);
}

.hero-content {
    transition:
        box-shadow var(--duration-slow) var(--ease-out-soft),
        border-color var(--duration-mid) ease;
}

@media (hover: hover) {
    #etusivu:hover .hero-content {
        box-shadow:
            0 8px 40px rgba(30, 51, 72, 0.14),
            0 0 0 1px rgba(255, 255, 255, 0.85) inset;
    }
}

/* —— Service page heroes —— */
@media (hover: hover) and (min-width: 768px) {
    main#sisalto > header.relative:hover img {
        transform: scale(1.04);
    }
}

main#sisalto > header.relative img {
    transition: transform 0.9s var(--ease-out-expo), opacity var(--duration-mid) ease;
}

/* —— Price rows (subtle highlight) —— */
@media (hover: hover) {
    ul[aria-label*="hinnasto"] li:hover {
        background: rgba(110, 184, 232, 0.06);
        border-radius: 0.25rem;
    }
}

ul[aria-label*="hinnasto"] li {
    transition: background-color var(--duration-fast) ease;
}

/* —— Homepage slogan cards —— */
.slogan-card {
    transition:
        transform var(--duration-mid) var(--ease-out-expo),
        box-shadow var(--duration-mid) ease;
}

@media (hover: hover) {
    .slogan-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 36px rgba(74, 159, 212, 0.12);
    }
}

/* —— Testimonial controls (refine) —— */
@media (hover: hover) {
    .testimonial-carousel__card.is-active:hover {
        box-shadow:
            0 6px 20px rgba(74, 159, 212, 0.12),
            0 28px 60px rgba(30, 51, 72, 0.16);
    }
}

/* —— Focus (motion-aware) —— */
a:focus-visible,
button:focus-visible {
    transition: outline-offset var(--duration-fast) ease;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }

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