body {
    background-color: red;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.smile-text {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-size: 10vw;
    font-weight: bold;
    color: white;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

canvas {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 280px;
    z-index: 9999;
}
video{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 280px;
    z-index: 9998;
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 999999;
}

/* Background path (the rail) */
.track {
  fill: #e0e0e0; /* light gray */
  opacity: 0.7;
}

/* Moving bar (progress indicator) */
.trolley {
  fill: #000; /* black progress */
  transition: width 0.3s ease-in-out;
}

/* Optional: progress failure or completion states */
.trolley.failed {
  fill: red;
}

.trolley.complete {
  fill: #00b894; /* green when done */
}

/* Track: full-screen */
img.track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: contain; /* show full SVG within viewport */
    pointer-events: none; /* do not block interactions */
    z-index: 1;
}

/* Trolley: smaller overlay */
img.trolley {
    position: absolute;
    top: 0;
    left: 0;
    width: 30vw;
    height: 30vh;
    object-fit: contain; /* show full SVG within viewport */
    pointer-events: none; /* do not block interactions */
    z-index: 2;
    transition: left 0.1s linear, top 0.1s linear;
}

/* Two guys image */
img.two-guys {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25vw;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}

/* Lever images - both at same position */
img.lever {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25vw;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.2s ease-in-out;
}

/* Hidden state for levers */
img.lever.hidden {
    opacity: 0;
    pointer-events: none;
}