/* ---- Base & Layout ---- */
:root{
  /* radial grey gradient: inner very light -> outer medium light grey */
  --g0:#f2f3f5;
  --g1:#eaecf0;
  --g2:#d6d9de;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: radial-gradient(circle at 50% 40%, var(--g0) 0%, var(--g1) 45%, var(--g2) 100%);
  color:#1f2328;
  overflow:hidden;
}

#stage{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 1200px;
}

.stack{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:min(4vh, 36px);
  /* 18:9 monitor: cap width to 33% of viewport width */
  width:min(33vw, 1200px);
}

.layer{
  will-change: transform;
  user-select:none;
  pointer-events:none;
}

/* SVG (back) should be the wider base line */
.svg{
  width:100%;
  height:auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.25)) drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

/* PNG sits above, but visually 'closer' (stronger movement) and narrower */
.png{
  width:33%;              /* 33% of SVG width */
  height:auto;
  filter: drop-shadow(0 28px 80px rgba(0,0,0,.30)) drop-shadow(0 10px 28px rgba(0,0,0,.22));
}

/* Accessibility fallback text */
.noscript{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:.9rem; opacity:.7;
}

/* Small screens */
@media (max-width: 640px){
  .stack{ width:min(80vw, 560px); }
  .png{ width:40%; } /* keep reasonable relation on tiny screens */
}