/* Isolated particle hero: the image remains the no-script/error fallback. */
.hero-container { width: 100%; min-width: 0; }
.hero-image.logo-scene {
    width: 100%; max-width: 440px; aspect-ratio: 1; min-width: 0;
    margin-inline: auto; isolation: isolate; animation: none;
    perspective: 950px;
}
.logo-halo {
    position: absolute; inset: 2%; border-radius: 50%;
    background: radial-gradient(circle, rgba(67, 198, 207, .19), rgba(49, 132, 202, .07) 48%, transparent 71%);
    filter: blur(12px); pointer-events: none;
}
.logo-orbit {
    position: absolute; inset: 9%; border: 1px solid rgba(18, 108, 161, .12);
    border-radius: 50%; transform: rotate(-28deg) scaleY(.91); pointer-events: none;
}
.logo-orbit::after {
    content: ''; position: absolute; inset: -7%; border: 1px solid rgba(30, 151, 169, .06); border-radius: inherit;
}
.logo-float, .logo-plane { position: absolute; inset: 0; }
.logo-float { animation: logoDrift 7s ease-in-out infinite; }
.logo-plane { transform: rotateX(var(--logo-x, 0deg)) rotateY(var(--logo-y, 0deg)); }
.hero-image.logo-scene .particle-logo {
    position: absolute; width: 72%; height: 72%; max-width: none; inset: 14%;
    border-radius: 50%; box-shadow: 0 24px 55px -25px rgba(0, 29, 71, .4);
    object-fit: contain; transform: none; transition: none; opacity: 1;
}
.logo-scene.is-particle-ready .particle-logo { opacity: var(--logo-reveal, 0); }
.logo-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.soap-bubble {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(77, 167, 190, .23);
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0 6%, rgba(168,232,237,.12) 24%, transparent 57%, rgba(83,176,206,.12) 85%, rgba(255,255,255,.7));
    box-shadow: inset 2px 2px 8px rgba(255,255,255,.9), 0 5px 16px rgba(20,105,151,.04);
    animation: soapDrift 8s ease-in-out infinite;
}
.soap-bubble-one { width: 46px; height: 46px; top: 13%; left: 13%; }
.soap-bubble-two { width: 25px; height: 25px; top: 29%; right: 7%; animation-delay: -3s; }
.soap-bubble-three { width: 62px; height: 62px; bottom: 12%; right: 12%; animation-delay: -5s; }
.soap-bubble-four { width: 19px; height: 19px; bottom: 25%; left: 6%; animation-delay: -1s; }
.logo-scene:not(.is-running) .logo-float,
.logo-scene:not(.is-running) .soap-bubble { animation-play-state: paused; }
@keyframes logoDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes soapDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 767px) {
    .hero-image.logo-scene { max-width: min(280px, 80vw); aspect-ratio: 1; margin: 0 auto 12px; }
    .soap-bubble-three { width: 36px; height: 36px; }
    .soap-bubble-one { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .logo-scene .logo-float, .logo-scene .soap-bubble { animation: none; }
    .logo-scene .logo-plane { transform: none; }
    .logo-scene .logo-particles { display: none; }
    .hero-image.logo-scene .particle-logo { opacity: 1; }
}