/*
 * cover-flow — traducción del CSS module de Arc (registry/components/cover-flow/cover-flow.module.css).
 * Mismas variables, mismos valores. Las cartas se posicionan con transform por JS (kit/motion/motion.js);
 * aquí no hay transición en esas propiedades, para no pelear con el muelle.
 */
.aui-cover-flow {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--space-4);
    container-type: inline-size;
    color: var(--foreground);
    font-family: var(--font-body);
    letter-spacing: var(--tracking-body);
}

/*
 * La superficie de agarre y el suelo. Las cartas se apoyan en una misma línea, al fondo de su marco;
 * el origen de la perspectiva está en esa línea, así que cualquier carta, girada o no, toca el suelo a
 * la misma altura y las sombras de contacto quedan alineadas. Un gesto vertical sigue haciendo scroll
 * de la página; uno lateral mueve el raíl.
 */
.aui-cover-flow-stage {
    --flow-card: clamp(148px, 31cqw, 228px);
    --flow-height: calc(var(--flow-card) * 1.25);
    --flow-radius: calc(var(--flow-card) * .085);
    --flow-top: 8px;
    --flow-mirror: calc(var(--flow-height) * .15);
    --flow-floor: calc(var(--flow-mirror) + 12px);
    --flow-contact: .36;
    --flow-ambient: .14;
    --flow-reflect: .28;
    --flow-contact-k: .62;
    --flow-veil: oklch(0% 0 0 / .62);
    position: relative;
    display: grid;
    height: calc(var(--flow-top) + var(--flow-height) + var(--flow-floor));
    perspective: calc(var(--flow-card) * 3.4);
    perspective-origin: 50% calc(var(--flow-top) + var(--flow-height));
    overflow-x: clip;
    overflow-y: visible;
    place-items: center;
    cursor: grab;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.aui-cover-flow-stage[data-dragging] { cursor: grabbing; }
.aui-cover-flow-sizer { width: var(--flow-card); height: 0; visibility: hidden; grid-area: 1 / 1; }

/* La capa que se mueve. Sin box-shadow, filter ni overflow propios: un movimiento en 3D es un transform
   puro para el compositor. */
.aui-cover-flow-card {
    position: absolute;
    top: var(--flow-top);
    left: calc(50% - var(--flow-card) / 2);
    width: var(--flow-card);
    height: var(--flow-height);
    cursor: pointer;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.aui-cover-flow-card[data-active] { cursor: inherit; }

/* Sombras preempastadas como gradientes, pintadas una vez: una elevación suave detrás de la carta y un
   contacto ceñido y oscuro donde toca el suelo. */
.aui-cover-flow-ambient {
    position: absolute;
    inset: 6% -3% -4%;
    background: radial-gradient(closest-side, oklch(0% 0 0 / var(--flow-ambient)), oklch(0% 0 0 / calc(var(--flow-ambient) * .4)) 55%, transparent);
    pointer-events: none;
}
.aui-cover-flow-contact {
    position: absolute;
    top: calc(100% - 7px);
    right: 5%;
    left: 5%;
    height: 16px;
    background: radial-gradient(closest-side, oklch(0% 0 0 / calc(var(--flow-contact) * var(--flow-contact-k))), oklch(0% 0 0 / calc(var(--flow-contact) * var(--flow-contact-k) * .35)) 60%, transparent);
    pointer-events: none;
}

/* Un espejo corto sobre un suelo brillante, que se apaga bastante antes de la leyenda. */
.aui-cover-flow-reflection {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    left: 0;
    height: var(--flow-mirror);
    overflow: hidden;
    border-radius: var(--flow-radius) var(--flow-radius) 0 0;
    pointer-events: none;
    will-change: opacity;
    -webkit-mask-image: linear-gradient(oklch(0% 0 0 / var(--flow-reflect)), transparent 88%);
    mask-image: linear-gradient(oklch(0% 0 0 / var(--flow-reflect)), transparent 88%);
}
.aui-cover-flow-reflection .aui-cover-flow-image { bottom: auto; height: var(--flow-height); border-radius: 0; transform: scaleY(-1); }

/*
 * La cara no tiene recorte de overflow propio: la imagen, el velo y el filo redondean su propia
 * esquina por separado. Una capa compuesta bajo un recorte redondeado dentro de un transform 3D obliga
 * a repintar cada cuadro, así que aquí ninguna lo lleva.
 */
.aui-cover-flow-face { position: absolute; inset: 0; border-radius: var(--flow-radius); background: var(--surface-muted); }
.aui-cover-flow-face::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 8%, transparent); content: ""; pointer-events: none; }
.aui-cover-flow-image { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--flow-radius); object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Las cartas laterales se oscurecen hacia el negro en los dos temas, nunca hacia el blanco. */
.aui-cover-flow-veil, .aui-cover-flow-edge { position: absolute; inset: 0; border-radius: var(--flow-radius); pointer-events: none; will-change: opacity; }
.aui-cover-flow-veil { background: var(--flow-veil); }

.aui-cover-flow-footer { display: grid; justify-items: center; gap: var(--space-3); padding-inline: var(--space-4); }
/* Todas las leyendas comparten una misma celda, así su altura nunca cambia al entregarse unas a otras. */
.aui-cover-flow-caption { display: grid; width: 100%; min-height: 3rem; justify-items: center; text-align: center; }
.aui-cover-flow-caption-item { display: grid; justify-items: center; align-content: start; gap: 2px; grid-area: 1 / 1; will-change: opacity, transform; }
.aui-cover-flow-title { margin: 0; color: var(--foreground); font-size: var(--text-lg); font-weight: 500; line-height: 1.3; }
.aui-cover-flow-subtitle { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }

/* Reset estructural SEGURO para el único <button> del componente (los puntos de posición): nada de
   padding/border/background aquí, cada regla de abajo los fija por su cuenta — ver ../share-sheet. */
.aui-cover-flow-tick:not(#aui) { box-sizing: border-box !important; font-family: inherit !important; margin: 0 !important; appearance: none; -webkit-appearance: none; }
:where(.aui-cover-flow) .aui-cover-flow-tick { border: 0; background: none; padding: 0; }

/* Un punto por carta, a 16px. El trazo acompaña al raíl incluso a media carrera de un lanzamiento. */
.aui-cover-flow-ticks { position: relative; display: flex; height: 24px; align-items: center; }
.aui-cover-flow-tick { position: relative; width: 16px; height: 24px; cursor: pointer; }
.aui-cover-flow-tick::before { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 22%, transparent); content: ""; transition: background-color var(--duration-fast) var(--ease-standard); }
.aui-cover-flow-thumb { position: absolute; top: 50%; left: 2px; width: 12px; height: 5px; margin-top: -2.5px; border-radius: var(--radius-pill); background: var(--foreground); pointer-events: none; will-change: transform; }

.aui-cover-flow-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
    .aui-cover-flow-tick:hover::before { background: color-mix(in oklab, var(--foreground) 45%, transparent); }
}

/* Estrecho: una carta frontal más grande con una sola vecina a cada lado, y sin reflejo — el contacto
   solo ya basta para anclarlas al suelo. */
@container (max-width: 520px) {
    .aui-cover-flow-stage { --flow-card: clamp(148px, 54cqw, 228px); --flow-floor: 22px; --flow-contact-k: 1; }
    .aui-cover-flow-reflection { display: none; }
}

.aui-cover-flow[data-reduced] .aui-cover-flow-stage { cursor: default; }
:root[data-theme="dark"] .aui-cover-flow-stage { --flow-contact: .66; --flow-ambient: .34; --flow-reflect: .18; --flow-veil: oklch(0% 0 0 / .9); }