@property --a1 { syntax: '<color>'; inherits: true; initial-value: #e0323c; }

:root { --hero: clamp(200px, min(52vh, 56.25vw), 560px); }

body { transition: --a1 1.6s ease; }

.stage { padding-top: calc(var(--hero) * .86); }

.scenes { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s 1.4s;
}
.layer.is-active { opacity: 1; visibility: visible; transition: opacity 1.4s ease, visibility 0s; }
.layer img, .layer video {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px);
  filter: brightness(calc(.92 + var(--beat) * .22)) saturate(calc(1 + var(--beat) * .25));
  transition: translate 1.2s var(--ease);
}
.layer.fit-top img, .layer.fit-top video { object-position: 50% 18%; }
.layer.pixel img { image-rendering: pixelated; }
.layer.is-active img { animation: drift 34s ease-in-out infinite alternate, settle 2s var(--ease); }
.layer.is-active video { animation: settle 2s var(--ease); }
.layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55));
}
.layer.light::after {
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, transparent 45%, rgba(0, 0, 0, .35)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .65));
}
.glow {
  position: absolute;
  z-index: 1;
  width: 46vmax;
  height: 46vmax;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 130, .55), rgba(255, 90, 60, .18) 35%, transparent 65%);
  mix-blend-mode: screen;
  opacity: calc(.25 + var(--beat) * 1.1);
  scale: calc(.9 + var(--beat) * .25);
}

#petals {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#petals.is-active { opacity: 1; }

@keyframes drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.12) translate(-1.5%, 1%); }
}
@keyframes settle { from { scale: 1.08; } to { scale: 1; } }