/* Cross-document zoom transitions (home <-> service pages) */
@view-transition {
    navigation: auto;
}

.vt-hero { view-transition-name: service-hero; }
.vt-title { view-transition-name: service-title; }
.vt-icon { view-transition-name: service-icon; }

/* When leaving from a clicked card, only that card carries the names */
.vt-leaving .vt-hero,
.vt-leaving .vt-title,
.vt-leaving .vt-icon {
    view-transition-name: none;
}

::view-transition-group(*) {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

::view-transition-group(service-hero) {
    border-radius: 24px;
    overflow: hidden;
}

::view-transition-old(service-hero),
::view-transition-new(service-hero) {
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

::view-transition-image-pair(service-icon) {
    isolation: auto;
}

::view-transition-old(service-icon),
::view-transition-new(service-icon) {
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
}

/* Entering a service page: the home page zooms past the camera */
html.page-service::view-transition-old(root) {
    animation: vt-dive-out 0.75s cubic-bezier(0.7, 0, 0.84, 0) both;
}

html.page-service::view-transition-new(root) {
    animation: vt-dive-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Back to home: the service page shrinks away */
html.page-index::view-transition-old(root) {
    animation: vt-back-out 0.7s cubic-bezier(0.7, 0, 0.84, 0) both;
}

html.page-index::view-transition-new(root) {
    animation: vt-back-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes vt-dive-out {
    to { transform: scale(1.25); opacity: 0; filter: blur(8px); }
}

@keyframes vt-dive-in {
    from { transform: scale(0.88); opacity: 0; }
}

@keyframes vt-back-out {
    to { transform: scale(0.86); opacity: 0; filter: blur(8px); }
}

@keyframes vt-back-in {
    from { transform: scale(1.12); opacity: 0; }
}

/* Fallback for browsers without cross-document view transitions */
.vt-overlay {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(181, 222, 124, 0.25), transparent 55%),
        linear-gradient(135deg, #1a2847 0%, #0b1530 60%, #070d1c 100%);
    border: 1px solid rgba(181, 222, 124, 0.35);
}

html.vt-fallback.page-service body {
    animation: vt-page-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes vt-page-in {
    from { opacity: 0; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    html.vt-fallback.page-service body {
        animation: none;
    }
}