:root{ --w: 420px; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000;
  display:flex; align-items:center; justify-content:center;
  font-family: system-ui, Arial, sans-serif;
}
.stage{
  position:relative; overflow:hidden; width:100%; max-width:var(--w); aspect-ratio:9/16;
  border-radius:16px; box-shadow:0 18px 46px rgba(0,0,0,.45);
}

/* Layers */
.sky{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.city{ position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; object-position: bottom; }

/* Clouds */
.clouds{
  --tile: none;
  position:absolute; left:0; right:0; top:40px; height:200px; pointer-events:none; opacity:.9;
  background-image: var(--tile);
  background-repeat: repeat-x;
  background-size: contain;
  animation: clouds 110s linear infinite;
}
.clouds.fast{ top:40px; opacity:.75; animation-duration: 72s; }
@keyframes clouds{ from{ background-position:0 0 } to{ background-position:-1600px 0 } }

/* Crane & swing */

/* Crane head and triangular ropes */
.crane-head{
  position:absolute; left:50%; transform:translateX(-50%);
  top:16px; width:16%; height:auto; pointer-events:none;
}
.ropes{
  position:absolute; left:50%; top:70px; width:0; height:0; pointer-events:none;
}
.rope{
  position:absolute; left:-1px; width:3px; height:120px; background:#444;
  box-shadow: 0 0 2px rgba(0,0,0,.25);
  transform-origin: top;
}
.rope.l{ transform: rotate(18deg); }
.rope.r{ transform: rotate(-18deg); }



.crane{
  z-index: 9999;
  pointer-events: none;
 position:absolute; left:50%; transform:translateX(-50%); top:0px; width:76%; height:auto; pointer-events:none; }
.top-block{
  position:absolute; left:50%; transform:translateX(-50%); top:0; width:75%;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
  transform-origin: 50% 0; /* pivot at the top center, no hook/ropes */
}
.swing{ animation: swing 4.2s ease-in-out infinite; }
@keyframes swing{
  0%{ transform: translateX(-50%) rotate(5deg) }
  50%{ transform: translateX(-50%) rotate(-5.5deg) }
  100%{ transform: translateX(-50%) rotate(5deg) }
}

/* CTA */
.cta{
  ;
  position:absolute; left:50%; transform:translateX(-50%); bottom:195px;
  width:240px; height:56px; display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-weight:900; font-size:18px; letter-spacing:2px;
  border-radius:14px; border:3px solid #7f0000;
  background:linear-gradient(#ff5252,#e53935);
  box-shadow: 0 10px 16px rgba(0,0,0,.35);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.pulse{ animation:pulse 1.1s ease-in-out infinite }
@keyframes pulse{
  0%{ transform:translateX(-50%) scale(1) }
  50%{ transform:translateX(-50%) scale(1.18) }
  100%{ transform:translateX(-50%) scale(1) }
}

/* Fallback */
@media (prefers-reduced-motion: reduce){
  .swing,.clouds,.pulse{ animation:none !important }
}


/* Button Glow Effect */

.glow {
  
}



@keyframes glow {
  0%   { box-shadow: 0 10px 16px rgba(0,0,0,.35),
                  0 0 30px rgba(255, 235, 59, 0.7),
                  0 0 60px rgba(255, 213, 79, 0.5); }
  50%  { box-shadow: 0 10px 16px rgba(0,0,0,.35),
                  0 0 60px rgba(255, 235, 59, 1),
                  0 0 120px rgba(255, 213, 79, 0.85); }
  100% { box-shadow: 0 10px 16px rgba(0,0,0,.35),
                  0 0 30px rgba(255, 235, 59, 0.7),
                  0 0 60px rgba(255, 213, 79, 0.5); }
}

  50%  { box-shadow: 0 10px 16px rgba(0,0,0,.35), 0 0 60px rgba(255,23,68,1),     0 0 120px rgba(255,23,68,0.85); }
  100% { box-shadow: 0 10px 16px rgba(0,0,0,.35), 0 0 30px rgba(255,23,68,0.75), 0 0 60px rgba(255,23,68,0.45); }
}
  50%  { box-shadow: 0 0 40px rgba(255,23,68,1), 0 0 80px rgba(255,23,68,0.8); }
  100% { box-shadow: 0 0 20px rgba(255,23,68,0.7), 0 0 40px rgba(255,23,68,0.5); }
}

  50%  { box-shadow: 0 0 25px rgba(229,57,53,0.9), 0 0 40px rgba(229,57,53,0.6); }
  100% { box-shadow: 0 0 10px rgba(229,57,53,0.5), 0 0 20px rgba(229,57,53,0.3); }
}

/* Combined animation */


/* Ensure both animations run together */

/* Ensure both animations run together */
.pulse.glow {
  animation: pulse 1.3s ease-in-out infinite, glow 1.6s ease-in-out infinite !important;
}


/* FINAL OVERRIDE: force both animations */

/* SYNC: pulse and glow run in lockstep */
.cta.pulse.glow {
  animation: pulse 1.2s ease-in-out infinite, glow 1.2s ease-in-out infinite !important;
  will-change: transform, box-shadow;
}