/**
 * tartaruga-clip.css — la clip della tartaruga che si apre dal logo della
 * pagina iniziale (assets/js/tartaruga-clip.js).
 *
 * Il cerchio che si allarga è un clip-path animato dallo script; qui le
 * curve: apertura morbida, chiusura con una piccola rincorsa (la curva scende
 * sotto zero prima di stringersi), poi il rimbalzo elastico del logo.
 */

.tartaruga-clip {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    /* Sotto il logo l'acqua "si estende": dal verde scuro del marchio al blu della clip. */
    background: radial-gradient(circle at 50% 40%, rgba(17, 94, 110, .92), rgba(8, 30, 34, .96));
    opacity: 0;
    transition:
        clip-path .95s cubic-bezier(.22, .9, .3, 1),
        opacity .55s ease-out;
    cursor: pointer;
}
.tartaruga-clip[hidden] {
    display: none;   /* chiusa: niente sopra la pagina, nemmeno trasparente */
}
.tartaruga-clip.aperta {
    opacity: 1;
}
.tartaruga-clip.in-chiusura {
    opacity: 0;
    transition:
        clip-path .8s cubic-bezier(.6, -.3, .74, .05),
        opacity .8s cubic-bezier(.7, 0, .84, 0);
}

.tartaruga-clip-cornice {
    width: min(100%, 1100px, calc((100vh - 6rem) * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    transform: scale(.92);
    transition: transform 1s cubic-bezier(.34, 1.56, .64, 1);
    cursor: default;
}
.tartaruga-clip.verticale .tartaruga-clip-cornice {
    width: min(100%, 520px, calc((100vh - 6rem) * 9 / 16));
    aspect-ratio: 9 / 16;
}
.tartaruga-clip.aperta .tartaruga-clip-cornice {
    transform: scale(1);
}
.tartaruga-clip.in-chiusura .tartaruga-clip-cornice {
    transform: scale(.85);
    transition: transform .8s ease-in;
}
.tartaruga-clip-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0b2a30;
}

.tartaruga-clip-chiudi {
    position: absolute;
    top: max(.8rem, env(safe-area-inset-top));
    right: max(.8rem, env(safe-area-inset-right));
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.tartaruga-clip-chiudi:hover,
.tartaruga-clip-chiudi:focus-visible {
    background: rgba(255, 255, 255, .25);
    outline: 2px solid var(--c-menta, #3deaa8);
    outline-offset: 2px;
}

/* Con la clip aperta la pagina sotto non scorre. */
html.tartaruga-clip-attiva,
html.tartaruga-clip-attiva body {
    overflow: hidden;
}

/* Il logo che riceve la tartaruga di ritorno. */
.tartaruga-rimbalzo {
    animation: tartaruga-rimbalzo .7s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes tartaruga-rimbalzo {
    0%   { transform: scale(.6); }
    55%  { transform: scale(1.28); }
    80%  { transform: scale(.94); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .tartaruga-clip,
    .tartaruga-clip.in-chiusura {
        transition: opacity .3s linear;
    }
    .tartaruga-clip-cornice,
    .tartaruga-clip.aperta .tartaruga-clip-cornice,
    .tartaruga-clip.in-chiusura .tartaruga-clip-cornice {
        transform: none;
        transition: none;
    }
}