/* Fælles bevægelsessprog på de offentlige sider */
.motion-ready .motion-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .56s var(--motion-smooth),
        transform .56s var(--motion-smooth);
    transition-delay: calc(var(--motion-order, 0) * 55ms);
    will-change: opacity, transform;
}

.motion-ready .motion-reveal.motion-from-left {
    transform: translateX(-22px);
}

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

.page-hero-enter {
    animation: page-hero-enter .56s var(--motion-smooth) both;
}

/* Fælles kort-hover til både offentlige sider og CMS */
.surface-hover-card {
    transition: border-color .2s ease, box-shadow .24s ease;
}

/* Bevar både indlæsningens reveal og kortets hover uden forsinkelse. */
.motion-ready .motion-reveal.surface-hover-card {
    transition:
        opacity .56s var(--motion-smooth),
        transform .56s var(--motion-smooth),
        border-color .2s ease,
        box-shadow .24s ease;
    transition-delay:
        calc(var(--motion-order, 0) * 55ms),
        calc(var(--motion-order, 0) * 55ms),
        0s,
        0s;
}

.surface-hover-card:hover,
.surface-hover-card:focus-visible,
.surface-hover-card:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 16px 32px rgba(10, 4, 21, .16);
    outline: 0;
}

.surface-hover-card-media {
    transition: transform .32s var(--motion-smooth), filter .24s ease;
}

.surface-hover-card:hover .surface-hover-card-media,
.surface-hover-card:focus-visible .surface-hover-card-media,
.surface-hover-card:focus-within .surface-hover-card-media {
    transform: scale(1.012);
    filter: saturate(1.025);
}

.brand-logo img,
.admin-login-logo img,
.series-nav a,
.repair-card,
.repair-card-image,
.price-switch,
.faq-list details,
.faq-list summary span,
.site-footer nav a,
.footer-brand .brand-logo {
    transition-duration: .24s;
    transition-timing-function: var(--motion-smooth);
}

.brand-logo,
.admin-login-logo {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.brand-logo::before,
.admin-login-logo::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -5px;
    border-radius: 24%;
    background: transparent;
    box-shadow:
        0 0 11px 3px rgba(9, 123, 149, .42),
        0 0 23px 6px rgba(92, 48, 214, .24);
    opacity: 0;
    pointer-events: none;
    transform: scale(.72);
    transition: opacity .24s ease, transform .32s var(--motion-smooth);
}

.admin-login-logo::before {
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-brand) 12%, #5C30D6 88%);
    box-shadow: none;
    filter: blur(3px);
}

.brand-logo img,
.admin-login-logo img {
    position: relative;
    z-index: 1;
    transition-property: transform;
}

.brand-logo:hover::before,
.brand-logo:focus-visible::before,
.admin-login-logo:hover::before {
    opacity: 1;
    transform: scale(1);
}

.brand-logo:hover img,
.brand-logo:focus-visible img,
.admin-login-logo:hover img {
    transform: translateY(-2px) scale(1.025);
}

.nav-dropdown-menu:not([hidden]) {
    animation: menu-enter .2s var(--motion-smooth) both;
    transform-origin: top right;
}

.series-nav a {
    transition-property: transform, box-shadow, background-color;
}

.series-nav a:hover,
.series-nav a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(9, 123, 149, .24);
}

.repair-card {
    transition-property: transform, box-shadow;
}

.repair-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(10, 4, 21, .22);
}

.repair-card-image {
    transition-property: transform, filter;
    transform-origin: center;
}

.repair-card:hover .repair-card-image {
    transform: scale(1.012);
    filter: saturate(1.035);
}

.repair-details[open] .repair-content,
.faq-list details[open] > p {
    animation: details-enter .36s var(--motion-smooth) both;
}

.repair-details[open] tbody tr {
    animation: row-enter .34s var(--motion-smooth) both;
}

.repair-details[open] tbody tr:nth-child(2) { animation-delay: 35ms; }
.repair-details[open] tbody tr:nth-child(3) { animation-delay: 70ms; }
.repair-details[open] tbody tr:nth-child(4) { animation-delay: 105ms; }
.repair-details[open] tbody tr:nth-child(5) { animation-delay: 140ms; }
.repair-details[open] tbody tr:nth-child(n+6) { animation-delay: 175ms; }

.faq-list details {
    transition-property: transform, box-shadow, border-color;
}

.faq-list details:hover,
.faq-list details:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 15px 34px rgba(10, 4, 21, .16);
}

.faq-list summary span {
    display: inline-block;
    transition-property: transform, color;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
    color: var(--color-brand);
}

.site-footer nav a {
    transition-property: transform, color;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
    transform: translateX(4px);
}

@keyframes menu-enter {
    from { opacity: 0; transform: translateY(-7px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes details-enter {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

@keyframes row-enter {
    from { opacity: 0; transform: translateX(-7px); }
    to { opacity: 1; transform: none; }
}

@keyframes page-hero-enter {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: none; }
}

/* Administration: kortere og mere funktionelle bevægelser */
.admin-motion-ready .admin-motion-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .36s ease, transform .36s var(--motion-smooth);
    transition-delay: calc(var(--admin-motion-order, 0) * 35ms);
}

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

.auth-only .admin-login {
    animation: admin-login-enter .45s var(--motion-smooth) both;
}

.admin-dashboard-grid > a,
.admin-form-section,
.admin-category-card-list,
.admin-table tbody tr {
    transition: transform .2s var(--motion-smooth), box-shadow .2s ease, background-color .2s ease;
}

.admin-dashboard-grid > a:hover,
.admin-dashboard-grid > a:focus-visible,
.admin-category-card-list:hover {
    transform: translateY(-3px);
}

.admin-table tbody tr:hover {
    background: #f5fafb;
}

@keyframes admin-login-enter {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .motion-ready .motion-reveal,
    .motion-ready .motion-reveal.motion-from-left,
    .motion-ready .motion-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .page-hero-enter {
        animation: none;
    }

    .admin-motion-ready .admin-motion-reveal,
    .admin-motion-ready .admin-motion-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .surface-hover-card,
    .surface-hover-card-media {
        transition: none;
    }

    .surface-hover-card:hover .surface-hover-card-media,
    .surface-hover-card:focus-visible .surface-hover-card-media,
    .surface-hover-card:focus-within .surface-hover-card-media {
        transform: none;
        filter: none;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}