:root { --loader-bg: #ffffff; --loader-navy: #2A3772; --loader-red: #DA3834; }

#cp-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: var(--loader-bg);
    z-index: 99999;
    transition: opacity .5s ease;
}

#cp-loader.cp-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

.cp-logo {
    width: min(560px, 82vw);
    height: auto;
    overflow: visible;
}

.disc, .house, .waves, .word, .sub {
    transform-box: fill-box;
    transform-origin: center;
}

/* stato iniziale */
.disc  { clip-path: circle(0% at 50% 50%); }
.house { clip-path: inset(100% 0 0 0); }
.waves { clip-path: inset(0 100% 0 0); }
.word  { clip-path: inset(0 100% 0 0); }
.sub   { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(2px); }

/* FASE 1: icona */
#cp-loader.play .ring  { animation: cpRingDraw .72s ease-out forwards,
                                    cpRingFade .30s ease forwards .72s; }
#cp-loader.play .disc  { animation: cpIris   .55s cubic-bezier(.22,1,.36,1) forwards .42s; }
#cp-loader.play .house { animation: cpRise   .52s cubic-bezier(.34,1.45,.5,1) forwards .80s; }
#cp-loader.play .waves { animation: cpBrush  .55s cubic-bezier(.3,1,.4,1)    forwards 1.12s; }

/* FASE 2: testi */
#cp-loader.play .word  { animation: cpWrite  .85s cubic-bezier(.22,1,.36,1) forwards 1.62s; }
#cp-loader.play .sub   { animation: cpSubIn  .60s cubic-bezier(.22,1,.36,1) forwards 2.30s; }

@keyframes cpRingDraw { to { stroke-dashoffset: 0 } }
@keyframes cpRingFade { to { opacity: 0 } }
@keyframes cpIris     { from { clip-path: circle(0% at 50% 50%) } to { clip-path: circle(80% at 50% 50%) } }
@keyframes cpRise     { from { clip-path: inset(100% 0 0 0) }    to { clip-path: inset(0 0 0 0) } }
@keyframes cpBrush    { from { clip-path: inset(0 100% 0 0) }    to { clip-path: inset(0 0 0 0) } }
@keyframes cpWrite    { from { clip-path: inset(0 100% 0 0) }    to { clip-path: inset(0 0 0 0) } }
@keyframes cpSubIn    {
    0%   { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(2px) }
    100% { clip-path: inset(0 0 0 0);    opacity: 1; transform: translateY(0) }
}

/* pallini */
.cp-dots { display: flex; gap: 11px; }
.cp-dots span {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--loader-navy);
    animation: cpBounce 1.1s ease-in-out infinite;
}
.cp-dots span:nth-child(2) { background: var(--loader-red); animation-delay: .16s; }
.cp-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes cpBounce {
    0%, 80%, 100% { transform: translateY(0);     opacity: .35 }
    40%            { transform: translateY(-10px); opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
    .ring { opacity: 0; }
    .disc, .house, .waves, .word, .sub { clip-path: none; opacity: 1; transform: none; }
    .cp-dots span { animation: none; opacity: .6; }
}