/*** View Transitions ***/

/* Cross-document transitions between pages (Chrome 126+, Safari 18.2+; others just navigate) */
@view-transition {
    navigation: auto;
}

:root {
    --vt-duration: 450ms;
    --vt-easing: cubic-bezier(0.5, 0, 0, 1);
}

::view-transition-group(*) {
    animation-duration: var(--vt-duration);
    animation-timing-function: var(--vt-easing);
}

/* Page: fade + short slide, up when opening a case, down when going home */
::view-transition-old(root) {
    animation: vt-fade-out 250ms ease both;
}

::view-transition-new(root) {
    animation: vt-slide-in var(--vt-duration) var(--vt-easing) both;
}

html:active-view-transition-type(to-home)::view-transition-new(root) {
    --vt-offset: -24px;
}

@keyframes vt-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-slide-in {
    from {
        opacity: 0;
        transform: translateY(var(--vt-offset, 24px));
    }
}

/* Shared elements (card -> case header, loader name -> home title):
   scale uniformly from the top-left corner instead of stretching the text */
::view-transition-old(case-title),
::view-transition-new(case-title),
::view-transition-old(case-chips),
::view-transition-new(case-chips),
::view-transition-old(site-name),
::view-transition-new(site-name) {
    height: 100%;
    object-fit: contain;
    object-position: left top;
}

/* the clicked card is captured in its resting state, not mid-hover */
.vt-source > .chips,
.vt-source > span {
    transform: none !important;
    transition: none !important;
}

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

/*** Typography ***/
.title-xl,
h1 {
    font-family: var(--font-family-title);
    font-style: normal;
    font-weight: 700;
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-sm);
    color: var(--on-surface);
    margin: 0;
    padding: 0;
}

h2 {
    font-family: var(--font-family-title);
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-size-xl);
    color: var(--on-surface);
    margin: 0;
    padding: 0;
}

.title-md,
h3 {
    font-family: var(--font-family-title);
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-size-lg);
    color: var(--on-surface);
    margin: 0;
    padding: 0;
}

.title-sm,
h4 {
    font-family: var(--font-family-title);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size-md);
    color: var(--on-surface);
    margin: 0;
    padding: 0;
}

.title-xs,
h5 {
    font-family: var(--font-family-body);
    font-style: normal;
    font-weight: 700;
    font-size: var(--font-size-sm);
    margin: 0;
    padding: 0;
}

.body-sm {
    font-family: var(--font-family-body);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size-sm);
}

.body-xs {
    font-family: var(--font-family-body);
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-size-xs);
}

/*** Surfaces ***/

.bg-surface {
    background-color: var(--surface);
    color: var(--on-surface);
}

.bg-surface-highest {
    background-color: var(--surface-container-highest);
    color: var(--on-surface-variant);
}

.on-surface-variant {
    color: var(--on-surface-variant);
}

/*** Media ***/

/* width/height attributes give images their size before they load (reserves space,
   lets the blurred placeholder show). Images whose width comes from CSS/layout
   (fixed height, stretched flex items) opt back into width: auto below. */
img {
    height: auto;
}

.iso-grid img,
.case-2 img,
.lets-connect > section img,
.result-1 img,
.r2 img {
    width: auto;
}

/* <picture> only picks the format (AVIF / WebP); layout works as if the <img> were a direct child */
picture {
    display: contents;
}

picture > source {
    display: none;
}

/* Blurred placeholder (tiny inline image) shown until the real image loads */
.blur-up {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.blur-up.is-loaded {
    background-image: none !important;
}

video {
    height: auto;
}

/*** Icons (inline Phosphor SVGs) ***/

.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/*** Case number badge (first chip of a case) ***/

.chips > .case-number {
    color: var(--primary);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--primary);
    font-weight: 700;
}

/*** Back to home link (case pages header) ***/

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    align-self: flex-start;
    min-height: 44px;
    margin-bottom: var(--spacing-sm);
    color: var(--on-surface-variant);
}

.back-link .icon {
    font-size: 20px;
    transition: transform 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .back-link:hover .icon {
        transform: translateX(-4px);
    }
}