/* ============================================================
   layout.css — Structural & Positional Rules
   Single Responsibility: owns layout, positioning, and
   z-index for all container elements.
   ============================================================ */

/* Ambient glow */
.glow {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(242, 172, 13, 0.10) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* Floating beans wrapper */
.beans-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Rings wrapper */
.rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 340px;
    height: 340px;
    border: 1px solid rgba(242, 172, 13, 0.28);
    animation: spin 28s linear infinite;
}

.ring-2 {
    width: 460px;
    height: 460px;
    border: 1px solid rgba(242, 172, 13, 0.16);
    animation: spin-rev 42s linear infinite;
}

.ring-3 {
    width: 580px;
    height: 580px;
    border: 1px solid rgba(242, 172, 13, 0.09);
    animation: spin 58s linear infinite;
}

.ring-4 {
    width: 710px;
    height: 710px;
    border: 1px solid rgba(242, 172, 13, 0.05);
    animation: spin-rev 75s linear infinite;
}

/* Gold dots on ring-1 and ring-2 */
.ring-1::before,
.ring-1::after,
.ring-2::before,
.ring-2::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold), 0 0 22px rgba(242, 172, 13, 0.45);
}

.ring-1::before {
    top: -3.5px;
    left: 50%;
    transform: translateX(-50%);
}

.ring-1::after {
    bottom: -3.5px;
    left: 50%;
    transform: translateX(-50%);
}

.ring-2::before {
    top: -3.5px;
    left: 50%;
    transform: translateX(-50%);
}

.ring-2::after {
    top: 50%;
    right: -3.5px;
    transform: translateY(-50%);
}

/* Main scene container */
.scene {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fade-in 2.4s ease forwards;
}

/* Steam container — anchored below the logo */
.steam-container {
    position: absolute;
    bottom: 44%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}

/* Footer note */
.footer-note {
    position: fixed;
    bottom: 60px;
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    color: rgba(242, 172, 13, 0.65);
    text-transform: uppercase;
    z-index: 20;
    animation: fade-in 3s 1.5s ease both;
}

.powered-by {
    position: fixed;
    bottom: 40px;
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    color: rgba(255, 255, 255, 0.20);
    text-transform: uppercase;
    z-index: 20;
    animation: fade-in 3s 1.5s ease both;
}

.powered-by a {
    color: rgba(255, 255, 255, 0.50);
    text-decoration-color: rgba(255, 255, 255, 0.50);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}