/*
 * clip.css — Clip in loop (236:438-445). Spec: 01-home.md §4. Riquadro 1344x756 radius 20 con lo
 * spezzone a coprire; bottone centrato: cerchio 204 con bordo tratteggiato 11 ciano, icona play e
 * etichetta. Il gradiente viola sotto il riquadro (Figma 236:386) e' il fondo della sezione.
 */
.site-main > .clip {
    background: linear-gradient(
        180deg,
        rgba(81, 37, 128, 0) 25%,
        var(--color-purple-deep) 70%
    );
    padding-bottom: 0;
}
.clip__frame {
    position: relative;
    aspect-ratio: 1344 / 756;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-purple-deep);
}
.clip__loop {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 24px;
    overflow: hidden;
    opacity: 0.6;
}
.clip__play {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2xs);
    width: clamp(120px, 14vw, 204px);
    aspect-ratio: 1;
    color: var(--color-ink-inverse);
}
.clip__play-ring {
    position: absolute;
    inset: 0;
    /* border: clamp(6px, 0.8vw, 11px) dashed var(--color-cyan); */
    border-radius: 50%;
    transition: transform var(--dur-header) var(--ease-in-out);
}
.clip__play:hover .clip__play-ring {
    transform: rotate(12deg) scale(1.03);
}
.clip__play-icon {
    width: clamp(14px, 1.5vw, 22px);
    height: auto;
}
.clip__play-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}
.clip__full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.clip__frame.is-playing .clip__play,
.clip__frame.is-playing .clip__loop {
    display: none;
}