.logo-zone {
    position: relative;
    margin-bottom: var(--space-9);
}

.logo-anim {
    position: relative;
    width: 180px;
    height: 180px;
}

.logo-anim-frame {
    position: relative;
    width: 100%;
    height: 100%;
}

.logo-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-shutter { z-index: 1; }
.logo-dot { z-index: 2; }
.logo-text { z-index: 3; }

.logo-shutter img {
    opacity: 0;
    transform: scale(0.3) rotate(-180deg);
    filter: blur(10px);
}

.logo-dot img {
    opacity: 0;
    transform: scale(0);
}

.logo-text img {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    filter: blur(5px);
    clip-path: inset(0 100% 0 0);
}

.is-animating .logo-shutter img { animation: shutterEnter 0.9s var(--ease-bounce) forwards; }
.is-animating .logo-dot img { animation: dotEnter 0.7s var(--ease-bounce) 0.45s forwards; }
.is-animating .logo-text img { animation: textClipEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards; }

.anim-done .logo-shutter img { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); animation: shutterBreathe 5s ease-in-out infinite; }
.anim-done .logo-dot img { opacity: 1; transform: scale(1); animation: dotBreathe 5s ease-in-out infinite 0.5s; }
.anim-done .logo-text img { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); clip-path: inset(0 0% 0 0); }

.shutter-glow {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.6) 0%, rgba(var(--accent-rgb), 0.2) 40%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.is-animating .shutter-glow { animation: shutterGlow 1s ease-out 0.1s forwards; }

.dot-ring {
    position: absolute;
    inset: 36%;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.9);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

.is-animating .dot-ring { animation: dotRingExpand 0.9s ease-out 0.55s forwards; }

.logo-ambient {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.03) 40%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

.is-animating .logo-ambient { animation: fadeIn 1.5s ease-out 0.3s forwards; }
.anim-done .logo-ambient { opacity: 1; animation: ambientPulse 5s ease-in-out infinite; }


@media (max-width: 768px) {
    .logo-anim { width: 150px; height: 150px; }
    .logo-zone { margin-bottom: var(--space-8); }
}

@media (max-width: 480px) {
    .logo-anim { width: 130px; height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-shutter img,
    .logo-dot img,
    .logo-text img,
    .logo-ambient,
    .shutter-glow,
    .dot-ring {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}