/* ==========================================================================
   Home page product tiles
   One spotlight panel followed by a grid of product banners.
   ========================================================================== */

.tiles {
    --tile-gap: clamp(0.7rem, 1vw, 1.1rem);
    --tile-radius: clamp(12px, 1.4vw, 22px);

    display: grid;
    gap: var(--tile-gap);
    width: min(112rem, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 2.4vw, 2.6rem) clamp(1rem, 2.4vw, 2.6rem) clamp(3rem, 6vw, 5rem);
}

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--tile-radius);
    background: #000;
    text-decoration: none;
}

/* ------------------------------------------------------------- spotlight -- */

.tile--spotlight {
    display: grid;
    place-items: center;
    min-height: min(78svh, 46rem);
    isolation: isolate;
    text-align: center;
}

.tile__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.78) 100%);
}

.tile__copy {
    display: grid;
    justify-items: center;
    gap: clamp(1rem, 1.8vw, 1.6rem);
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.tile__logo {
    width: min(26rem, 62vw);
    height: auto;
}

.tile__tagline {
    max-width: 34ch;
    margin: 0;
    color: #e9e9ef;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
}

.tile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

.tile__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.tile__button:hover { transform: translateY(-2px); }

.tile__button--primary {
    background: linear-gradient(135deg, #35b6ff, #1567f5);
    color: #fff;
    box-shadow: 0 12px 34px rgba(21, 103, 245, 0.35);
}

.tile__button--primary:hover { color: #fff; }

.tile__button--ghost {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    backdrop-filter: blur(12px);
}

.tile__button--ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

/* --------------------------------------------------------------- banners -- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr));
    gap: var(--tile-gap);
}

.tile--product,
.tile--media {
    aspect-ratio: 2 / 1;
}

/* A product with footage of its own: the same idea as the spotlight, at the
   size of a grid tile. */
.tile--media {
    display: grid;
    place-items: center;
    isolation: isolate;
    text-align: center;
}

.tile--media .tile__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 42%, rgba(0, 0, 0, 0.72) 100%);
}

.tile__copy--compact {
    gap: clamp(0.6rem, 1.1vw, 0.95rem);
    padding: clamp(1.25rem, 3vw, 2.25rem);
}

.tile__tagline--compact {
    max-width: 30ch;
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 500;
}

.tile__logo--compact {
    width: min(21rem, 52%);
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.55));
}

.tile--media .tile__button {
    padding: 0.58rem 1.2rem;
    font-size: 0.92rem;
}

.tile__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tile--product:hover .tile__art { transform: scale(1.03); }

.tile__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .tile__art,
    .tile__button { transition: none; }

    .tile__button:hover { transform: none; }
}

/* ==========================================================================
   Drifting gradient mesh
   Five wide, soft colour fields on near black, each blended with screen and
   drifting on its own long, deliberately unrelated period, so the composition
   never lands in the same place twice. Grain on top keeps it from reading as
   a flat computed gradient. Everything animates by transform alone.
   ========================================================================== */

.mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #03040a 0%, #020308 55%, #010205 100%);
}

/* Vignette: pulls the edges down so the tiles keep the eye in the middle. */
.mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
}

/* The mesh and the grain are positioned layers at z-index 0, so anything that
   should sit on top of them has to be positioned too: a static element paints
   underneath a positioned one regardless of document order. */
main,
.footer {
    position: relative;
    z-index: 1;
}

.mesh__blob {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(90px);
    will-change: transform;
}

.mesh__blob--1 {
    top: -32%;
    left: -22%;
    width: 92vmax;
    height: 70vmax;
    background: radial-gradient(ellipse, rgba(21, 103, 245, 0.26), transparent 66%);
    animation: mesh-drift-1 19s ease-in-out infinite;
}

.mesh__blob--2 {
    top: -14%;
    right: -26%;
    width: 74vmax;
    height: 88vmax;
    background: radial-gradient(ellipse, rgba(53, 182, 255, 0.2), transparent 66%);
    animation: mesh-drift-2 23s ease-in-out infinite;
}

.mesh__blob--3 {
    bottom: -34%;
    left: 6%;
    width: 100vmax;
    height: 66vmax;
    background: radial-gradient(ellipse, rgba(94, 132, 196, 0.15), transparent 64%);
    animation: mesh-drift-3 29s ease-in-out infinite;
}

.mesh__blob--4 {
    right: -18%;
    bottom: -26%;
    width: 84vmax;
    height: 82vmax;
    background: radial-gradient(ellipse, rgba(16, 38, 92, 0.34), transparent 68%);
    animation: mesh-drift-4 31s ease-in-out infinite;
}

.mesh__blob--5 {
    top: 16%;
    left: 22%;
    width: 70vmax;
    height: 58vmax;
    background: radial-gradient(ellipse, rgba(150, 198, 255, 0.08), transparent 62%);
    animation: mesh-drift-5 37s ease-in-out infinite;
}

@keyframes mesh-drift-1 {
    33% { transform: translate(34%, 22%) rotate(38deg) scale(1.25); }
    66% { transform: translate(12%, 40%) rotate(-22deg) scale(0.92); }
}

@keyframes mesh-drift-2 {
    33% { transform: translate(-30%, 30%) rotate(-34deg) scale(1.18); }
    66% { transform: translate(-46%, 4%) rotate(24deg) scale(0.95); }
}

@keyframes mesh-drift-3 {
    33% { transform: translate(28%, -34%) rotate(30deg) scale(1.22); }
    66% { transform: translate(-16%, -14%) rotate(-28deg) scale(1); }
}

@keyframes mesh-drift-4 {
    33% { transform: translate(-38%, -26%) rotate(-30deg) scale(1.15); }
    66% { transform: translate(-10%, -44%) rotate(26deg) scale(0.9); }
}

@keyframes mesh-drift-5 {
    33% { transform: translate(-34%, 32%) rotate(42deg) scale(1.35); }
    66% { transform: translate(26%, 18%) rotate(-18deg) scale(1.1); }
}

.mesh-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.13;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ light mode -- */

[data-theme="light"] .mesh,
[data-theme="light"] .mesh-grain {
    display: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mesh,
    :root:not([data-theme="dark"]) .mesh-grain {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mesh__blob { animation: none; }
}

/* The sections below the tiles carry their own panels, which would hide the
   background entirely. On this page they let it through instead. */

main .section.quick-links,
main .section.quick-links .section-block {
    background: transparent;
}

main .quick-link-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
}

[data-theme="light"] main .section.quick-links,
[data-theme="light"] main .quick-link-card {
    background: revert;
    border-color: revert;
    backdrop-filter: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) main .section.quick-links,
    :root:not([data-theme="dark"]) main .quick-link-card {
        background: revert;
        border-color: revert;
        backdrop-filter: none;
    }
}