.home-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 1.5rem;
}
.home-case-card { display: block; min-width: 0; color: #fff; }
.home-case-media {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: 1.75rem;
    background: #161616;
    aspect-ratio: 16 / 9;
}
.home-case-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-case-card:focus-visible { outline: 2px solid #67c6ff; outline-offset: 8px; border-radius: 1.75rem; }

/* Position, entry/exit and water deformation have separate layers so they
   can move together without replacing each other's transforms. */
.custom-cursor-pill {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 44px;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
    will-change: transform;
}
.custom-cursor-pill.is-visible,
.custom-cursor-pill.is-leaving { visibility: visible; }
.cursor-bubble { width: 100%; height: 100%; transform-origin: 50% 65%; }
.is-visible .cursor-bubble { animation: caseBubbleIn 680ms both; }
.is-leaving .cursor-bubble { animation: caseBubbleOut 380ms both; }
/* Opacity on an ancestor creates a backdrop root and prevents the glass
   from blurring the video. Fade the glass and text individually instead. */
.custom-cursor-pill.is-visible .header-glass-layer,
.custom-cursor-pill.is-visible .cursor-text-window { animation: caseGlassFadeIn 260ms both; }
.custom-cursor-pill.is-leaving .header-glass-layer,
.custom-cursor-pill.is-leaving .cursor-text-window { animation: caseGlassFadeOut 380ms both; }
.cursor-water-shape.matte-transparent {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    isolation: isolate;
    border-radius: 999px;
    transform: scale(var(--water-x, 1), var(--water-y, 1));
    transform-origin: center;
    will-change: transform;
    /* Glass comes entirely from the navigation's shared header-glass-layer.
       Its current theme tokens are copied on pointer entry. */
    color: var(--c-content);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.cursor-water-shape .header-glass-layer { border-radius: inherit; }
.cursor-text-window { position: relative; z-index: 1; overflow: hidden; margin-inline: 21px; width: 100%; }
.cursor-marquee-track { display: flex; width: max-content; white-space: nowrap; font-size: .85rem; font-weight: 500; animation: cursorMarquee 7s linear infinite; }
@keyframes cursorMarquee { to { transform: translateX(-50%); } }
@keyframes caseBubbleOut {
    0% { transform: translateY(0) scale(1); }
    26% { transform: translateY(-2px) scale(1.06, .88); }
    58% { transform: translateY(5px) scale(.78, 1.1); }
    100% { transform: translateY(15px) scale(.3, .55); }
}
@keyframes caseGlassFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes caseGlassFadeOut { 0%, 26% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 639px) {
    .home-case-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .home-case-media { border-radius: 1.25rem; }
}
@media (hover: none), (pointer: coarse) { .custom-cursor-pill { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .cursor-marquee-track { animation: none; }
    .is-visible .cursor-bubble { animation: none; opacity: 1; }
    .is-leaving .cursor-bubble { animation: none; opacity: 0; }
    .custom-cursor-pill .header-glass-layer,
    .custom-cursor-pill .cursor-text-window { animation: none !important; }
    .cursor-water-shape { transform: none !important; }
}