:root {
    /* --- Master Control Variables --- */
    /* This system ensures all relationships you described are mathematically enforced. */

    /* 1. The Frame (Foreground Mask) Position and Size */
    --frame-top: 10%;
    --frame-height: 80%;
    --frame-bottom: calc(var(--frame-top) + var(--frame-height)); /* = 90% */
    --frame-left: 15%;
    --frame-width: 70%;

    /* 2. End Cap Size (The reference for all other interior elements) */
    --end-cap-height: 40%;
    --end-cap-width: 15%;

    /* 3. Bar Size (Height is 50% of End Cap, Width is calculated to fit) */
    --bar-height: calc(var(--end-cap-height) / 2);
    --inner-width: calc(100% - (2 * var(--end-cap-width)));
    --bar-width: calc(var(--inner-width) / 4);
}

body {
    margin: 0; padding: 0; display: flex;
    justify-content: center; align-items: center;
    height: 100vh; background-color: #1a1a1a;
    overflow: hidden;
}

.animation-wrapper {
    width: 100%; height: 100vh;
    display: flex; justify-content: center; align-items: center;
}

.animation-bounds {
    /* CRITICAL FIX: This container will now always fit inside the viewport */
    width: 95vw;
    aspect-ratio: 2 / 1;
    max-height: 95vh;
    position: relative;
}

.logo-animation {
    position: relative;
    width: 100%; height: 100%;
    /* CRITICAL FIX: This ensures nothing is ever seen outside the frame */
    overflow: hidden;
}

.logo-animation img {
    position: absolute;
    width: auto; height: auto; /* Base reset */
}

/* --- LAYER DEFINITIONS --- */

/* The Frame / Foreground Mask */
.layer-z14 {
    left: var(--frame-left); top: var(--frame-top);
    width: var(--frame-width); height: var(--frame-height);
    z-index: 14;
}

/* The End Caps */
.layer-z13, .layer-z2 {
    width: var(--end-cap-width); height: var(--end-cap-height);
    top: calc(var(--frame-top) + (var(--frame-height) / 2) - (var(--end-cap-height) / 2));
    z-index: 13;
}
.layer-z13 { left: var(--frame-left); }
.layer-z2 { right: var(--frame-left); }

/* The Inner Background */
.layer-z1 {
    left: calc(var(--frame-left) + var(--end-cap-width));
    top: calc(var(--frame-top) + (var(--frame-height) / 2) - (var(--end-cap-height) / 2));
    width: var(--inner-width); height: var(--end-cap-height);
    z-index: 1;
}

/* The Moving Bars */
.layer-z12, .layer-z10, .layer-z8, .layer-z6,
.layer-z11, .layer-z9, .layer-z7, .layer-z5 {
    height: var(--bar-height); width: var(--bar-width);
}

/* STARTING POSITIONS: At the precise midline of the frame */
.layer-z12, .layer-z10, .layer-z8, .layer-z6 { top: calc(var(--frame-top) + (var(--frame-height) / 2) - var(--bar-height)); }
.layer-z11, .layer-z9, .layer-z7, .layer-z5 { top: calc(var(--frame-top) + (var(--frame-height) / 2)); }

/* STARTING horizontal positions for the UNBROKEN block */
.layer-z12, .layer-z11 { left: calc(var(--frame-left) + var(--end-cap-width)); }
.layer-z10, .layer-z9 { left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width)); }
.layer-z8,  .layer-z7 { left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width) * 2); }
.layer-z6,  .layer-z5 { left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width) * 3); }

/* Apply Animations */
.layer-z12 { z-index: 12; animation: z12Move 2s ease-out 0.1s forwards; }
.layer-z10 { z-index: 10; animation: z10Move 2s ease-out 0.2s forwards; }
.layer-z8  { z-index: 8;  animation: z8Move  2s ease-out 0.3s forwards; }
.layer-z6  { z-index: 6;  animation: z6Move  2s ease-out 0.5s forwards; }
.layer-z11 { z-index: 11; animation: z11Move 2s ease-out 0.1s forwards; }
.layer-z9  { z-index: 9;  animation: z9Move  2s ease-out 0.2s forwards; }
.layer-z7  { z-index: 7;  animation: z7Move  2s ease-out 0.3s forwards; }
.layer-z5  { z-index: 5;  animation: z5Move  2s ease-out 0.5s forwards; }

/* Center Chrome Logos */
.layer-z3, .layer-z4 {
    left: var(--frame-left); top: var(--frame-top);
    width: var(--frame-width); height: var(--frame-height);
}
.layer-z3 { z-index: 3; animation: fadeOut 2s ease-out 1.5s forwards; }
.layer-z4 { z-index: 4; opacity: 0; animation: fadeIn 2s ease-out 1.5s forwards; }

/* --- KEYFRAME ANIMATIONS --- */
/* Final positions are calculated to be UNBROKEN and FLUSH with the frame edges */
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Top bars retract to the TOP of the frame */
@keyframes z12Move { from { opacity: 1; } to { top: var(--frame-top); left: calc(var(--frame-left) + var(--end-cap-width)); opacity: 1; } }
@keyframes z10Move { from { opacity: 1; } to { top: var(--frame-top); left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width)); opacity: 1; } }
@keyframes z8Move  { from { opacity: 1; } to { top: var(--frame-top); left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width) * 2); opacity: 1; } }
@keyframes z6Move  { from { opacity: 1; } to { top: var(--frame-top); left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width) * 3); opacity: 1; } }

/* Bottom bars retract to the BOTTOM of the frame */
@keyframes z11Move { from { opacity: 1; } to { top: calc(var(--frame-bottom) - var(--bar-height)); left: calc(var(--frame-left) + var(--end-cap-width)); opacity: 1; } }
@keyframes z9Move  { from { opacity: 1; } to { top: calc(var(--frame-bottom) - var(--bar-height)); left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width)); opacity: 1; } }
@keyframes z7Move  { from { opacity: 1; } to { top: calc(var(--frame-bottom) - var(--bar-height)); left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width) * 2); opacity: 1; } }
@keyframes z5Move  { from { opacity: 1; } to { top: calc(var(--frame-bottom) - var(--bar-height)); left: calc(var(--frame-left) + var(--end-cap-width) + var(--bar-width) * 3); opacity: 1; } }