/* Hero Logo Container */
#hero-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 475px;
    height: 475px;
    max-width: 90vw;
    max-height: 90vw;
    /* Remove clip/bg from here, move to .hero-mask */

    /* Variables for perspective */
    --refW: 500px;
    --refH: 500px;
    /* Increased to allow elements outside? No, keep context */
    --sceneScale: 1;

    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-mask {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
    /* Behind layer 9 but holds background */
}

.hero-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;

    /* Animation Input Vars */
    --px: 0px;
    --py: 0px;
    --lx: 0px;
    /* Local Offset X */
    --ly: 0px;
    /* Local Offset Y */

    transform: translate(calc(-50% + var(--lx) + var(--px)), calc(-50% + var(--ly) + var(--py)));
    pointer-events: none;
    will-change: transform;
}

/* Background Layer (Calque 0) */
.hero-layer-0 {
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.hero-layer-1 {
    z-index: 20;
}

.hero-layer-2 {
    z-index: 10;
}

/* Top Layer (Calque 9) - Outside Mask */
.hero-layer-9 {
    z-index: 100;
    top: auto;
    bottom: -10px;
    --ly: 0px;
}

/* Bubbles Arc */
.hero-layer-4,
.hero-layer-5,
.hero-layer-6,
.hero-layer-7,
.hero-layer-8 {
    z-index: 150;
    /* Above everything */
    top: 50%;
    left: 50%;
    width: 60px;
    height: auto;
}

/* Left-most Orange */
.hero-layer-4 {
    --lx: -180px;
    --ly: -120px;
}

/* Mid-left Blue */
.hero-layer-5 {
    --lx: -100px;
    --ly: -200px;
}

/* Center Green (Top) */
.hero-layer-6 {
    --lx: 0px;
    --ly: -230px;
}

/* Mid-right Yellow */
.hero-layer-7 {
    --lx: 100px;
    --ly: -200px;
}

/* Right-most Red */
.hero-layer-8 {
    --lx: 180px;
    --ly: -120px;
}

/* --- Form Overrides for New Logo --- */
/* We keep this here to override main.css positioning for the form on this specific logo */
#hero-login-form {
    top: 60%;
    /* Adjusted for new logo */
    z-index: 200;
}

/* Minified State */
#hero-container.minified {
    top: 10px !important;
    left: 10px !important;

    /* Resize instead of scale to avoid large bounding box issues */
    width: 150px;
    /* height: 120px !important; */
    transform: none !important;

    transform-origin: top left !important;
    opacity: 1;
    pointer-events: auto;
    z-index: 1 !important;
    height: initial;
}

/* Hide everything except Layer 9 in minified mode */
#hero-container.minified .hero-mask,
#hero-container.minified .hero-layer-4,
#hero-container.minified .hero-layer-5,
#hero-container.minified .hero-layer-6,
#hero-container.minified .hero-layer-7,
#hero-container.minified .hero-layer-8 {
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Reposition Layer 9 to be the main icon */
#hero-container.minified .hero-layer-9 {
    top: 0 !important;
    left: 0 !important;
    bottom: auto;
    /* Override normal transform calc to simple top-left alignment */
    transform: none !important;
    width: 100%;
    /* Ensure it fits the small container */
    height: auto;
    transition: all 0.8s ease;
}