/* The hat and Oreo are a viewport overlay, never a new page section. */
.magic-reveal {
  --magic-rabbit-y: 320px;
  --magic-ear-left-y: 0px;
  --magic-ear-right-y: 0px;
  --magic-paws-y: 85px;
  --magic-tilt: 0deg;
  --magic-light: .08;
  --magic-finish: 0;
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: clip;
  pointer-events: none;
  visibility: hidden;
}
.magic-reveal.is-visible { visibility: visible; }
.oreo-corner {
  --oreo-rise: 105%;
  --oreo-zoom: 1;
  position: absolute;
  inset: 0;
  overflow: clip;
}
.oreo-scene {
  position: absolute;
  left: max(4px, env(safe-area-inset-left, 0px));
  bottom: max(4px, env(safe-area-inset-bottom, 0px));
  width: min(clamp(124px, 15vw, 190px), 28svh);
  aspect-ratio: 490 / 575;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255,254,250,.85), rgba(232,223,245,.34) 57%, transparent 78%);
  transform-origin: left bottom;
  transform: translateY(var(--oreo-rise)) scale(var(--oreo-zoom));
}
.oreo-character {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 490 / 575;
  overflow: hidden;
}
.magic-rig { transform-origin: 320px 580px; transform: rotate(var(--magic-tilt)); }
.magic-rabbit { transform: translateY(var(--magic-rabbit-y)); }
.magic-ear-left { transform: translateY(var(--magic-ear-left-y)); }
.magic-ear-right { transform: translateY(var(--magic-ear-right-y)); }
.magic-paws { transform: translateY(var(--magic-paws-y)); }
.magic-glow, .magic-opening-light { opacity: var(--magic-light); }
.magic-sparks {
  opacity: calc(var(--magic-finish) * .5);
  transform-origin: 320px 290px;
  transform: scale(calc(.94 + var(--magic-finish) * .06));
}
@media (prefers-reduced-motion: reduce) {
  .magic-reveal .oreo-scene,
  .magic-reveal .magic-rig,
  .magic-reveal .magic-rabbit,
  .magic-reveal .magic-ear,
  .magic-reveal .magic-paws,
  .magic-reveal .magic-sparks { transform: none; }
  .magic-reveal .magic-sparks { opacity: .5; }
  .magic-reveal .magic-glow,
  .magic-reveal .magic-opening-light { opacity: .7; }
}