:root {
  --bg: #000;
  --green: #24db24;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

.scene {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.stage {
  position: relative;
  width: min(98vw, 900px);
  height: min(95vh, 1120px);
}

.hand-sign {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-image {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(104vw, 840px);
  max-height: 98vh;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  background: transparent;
}

.hand-base {
  opacity: 0;
  filter: brightness(0.30) saturate(1);
  animation: handFadeIn 2200ms ease-out 3900ms forwards;
}

.hand-glow {
  opacity: 0;
  filter:
    brightness(0.72)
    drop-shadow(0 0 4px rgba(125,249,255,0.08))
    drop-shadow(0 0 12px rgba(125,249,255,0.06));
  animation:
    handGlowIn 2400ms ease-out 3900ms forwards,
    handHum 3200ms ease-in-out 6400ms infinite alternate;
}

.logo-shell {
  position: absolute;
  left: 50%;
  top: calc(59% + 12px);
  width: min(94vw, 700px);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.logo-shell::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(87,255,122,0.18) 0%,
    rgba(87,255,122,0.09) 38%,
    rgba(87,255,122,0.025) 62%,
    rgba(87,255,122,0) 78%
  );
  opacity: 0;
  animation:
    glowWarm 4200ms linear forwards,
    glowHum 3000ms ease-in-out 4200ms infinite alternate;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.08;
  background: transparent;
  animation:
    logoWarmup 4200ms linear forwards,
    logoHum 2800ms ease-in-out 4200ms infinite alternate;
}

/*
  Important: the logo intentionally has no CSS filter, blur, drop-shadow,
  or blend mode. Those effects caused iOS Safari to render the transparent
  PNG as a pale rectangular layer.
*/
@keyframes logoWarmup {
  0%   { opacity: 0.08; }
  6%   { opacity: 0.12; }
  11%  { opacity: 0.10; }
  18%  { opacity: 0.17; }
  24%  { opacity: 0.14; }
  32%  { opacity: 0.25; }
  39%  { opacity: 0.21; }
  48%  { opacity: 0.38; }
  55%  { opacity: 0.33; }
  65%  { opacity: 0.54; }
  72%  { opacity: 0.47; }
  80%  { opacity: 0.70; }
  86%  { opacity: 0.63; }
  91%  { opacity: 0.82; }
  93%  { opacity: 0.73; }
  95%  { opacity: 0.90; }
  96.5%{ opacity: 0.81; }
  98%  { opacity: 0.96; }
  99%  { opacity: 0.89; }
  100% { opacity: 1; }
}

@keyframes logoHum {
  0%   { opacity: 0.96; }
  45%  { opacity: 1; }
  52%  { opacity: 0.98; }
  100% { opacity: 1; }
}

@keyframes glowWarm {
  0%   { opacity: 0.01; }
  18%  { opacity: 0.025; }
  32%  { opacity: 0.05; }
  48%  { opacity: 0.08; }
  65%  { opacity: 0.12; }
  80%  { opacity: 0.16; }
  91%  { opacity: 0.20; }
  93%  { opacity: 0.15; }
  95%  { opacity: 0.22; }
  96.5%{ opacity: 0.17; }
  98%  { opacity: 0.24; }
  100% { opacity: 0.20; }
}

@keyframes glowHum {
  0%   { opacity: 0.17; }
  100% { opacity: 0.22; }
}

@keyframes handFadeIn {
  0%   { opacity: 0;   filter: brightness(0.18); }
  30%  { opacity: 0.09; filter: brightness(0.28); }
  55%  { opacity: 0.165; filter: brightness(0.34); }
  78%  { opacity: 0.24; filter: brightness(0.42); }
  100% { opacity: 0.30; filter: brightness(0.48); }
}

@keyframes handGlowIn {
  0%   { opacity: 0; }
  30%  { opacity: 0.06; }
  55%  { opacity: 0.12; }
  78%  { opacity: 0.18; }
  100% { opacity: 0.225; }
}

@keyframes handHum {
  0% {
    filter:
      brightness(0.70)
      drop-shadow(0 0 4px rgba(125,249,255,0.07))
      drop-shadow(0 0 14px rgba(125,249,255,0.06));
  }
  100% {
    filter:
      brightness(0.78)
      drop-shadow(0 0 6px rgba(125,249,255,0.09))
      drop-shadow(0 0 18px rgba(125,249,255,0.07));
  }
}

@media (max-width: 700px) {
  .stage {
    width: 100vw;
    height: 94vh;
  }

  .hero-image {
    width: min(108vw, 780px);
    top: 53%;
  }

  .logo-shell {
    top: calc(60% + 12px);
    width: min(96vw, 690px);
  }
}