:root {
  --pad: clamp(16px, 6dvh, 72px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gold: #e7b64a;
}

html, body { margin: 0; height: 100%; background: #4a070d; }
body { display: grid; place-items: center; overflow: hidden; box-sizing: border-box; padding-block: var(--pad); }

.stage {
  position: relative;
  width: min(100vw, (100dvh - 2 * var(--pad)) * 16 / 9);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
  --fx: 1;            /* particle size multiplier, read by main.js too */
  --spot: 50.1% 71%;  /* where the intro spotlight lands: the mic */
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Layers: positions are each layer's bounding box on the 2560x1440 artboard */
.layer { position: absolute; display: block; pointer-events: none; }
.layer img { display: block; width: 100%; height: auto; }
img.layer  { height: auto; }
.bg        { inset: 0; width: 100%; }
.title     { left: 20.4688%; top: 7.9861%;  width: 53.7891%; }
.platform  { left: 0;        top: 84.2361%; width: 99.9609%; }
.mic       { left: 47.3438%; top: 53.2639%; width: 5.4688%;  transform-origin: 50% 100%; }
.rabbit    { left: 22.8125%; top: 57.0139%; width: 15.7813%; transform-origin: 50% 100%; }
.bear      { left: 74.7656%; top: 35.9028%; width: 22.2656%; transform-origin: 100% 40%; }
.curtain-l { left: 0;        top: 0;        width: 31.0547%; transform-origin: 0 0; }
.curtain-r { left: 69.1406%; top: 0;        width: 30.8203%; transform-origin: 100% 0; }
.logo      { left: 78.75%;   top: 5.4861%;  width: 17.9688%; pointer-events: auto; }

/* ---------- Intro: spotlight on the mic, then the lights come up ---------- */
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.lights {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--spot),
    rgb(255 240 200 / 0.14) 0%, transparent var(--r), rgb(14 0 4 / 0.94) calc(var(--r) * 1.35 + 0.1%));
  animation: lights 2.4s linear 0.3s both;
}
@keyframes lights {
  0%   { --r: 0%;   animation-timing-function: var(--ease-out); }
  14%  { --r: 19%; }
  46%  { --r: 19%;  animation-timing-function: var(--ease-in-out); }
  75%  { opacity: 1; }
  100% { --r: 115%; opacity: 0; }  /* fade the warm spotlight tint out, no jump on removal */
}

.title img { clip-path: inset(0 100% 0 0); animation: write 1.7s var(--ease-in-out) 1.4s both; }
@keyframes write { to { clip-path: inset(0 0 0 0); } }

.rabbit { animation: hop-in 1.1s linear 1.7s both; }
@keyframes hop-in {
  0%   { transform: translate(-150%, 0); opacity: 0; animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
  8%   { opacity: 1; }
  25%  { transform: translate(-104%, -14%); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  50%  { transform: translate(-55%, 0) scale(1.05, 0.94); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
  75%  { transform: translate(-22%, -10%); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  90%  { transform: translate(0, 0) scale(1.05, 0.94); }
  100% { transform: none; opacity: 1; }
}

.bear { animation: peek-in 1s var(--ease-out) 2.4s both; }
@keyframes peek-in {
  0%   { transform: translateX(60%) rotate(10deg); }
  60%  { transform: translateX(-2%) rotate(-6deg); }
  82%  { transform: rotate(2deg); }
  100% { transform: none; }
}

.logo { animation: drop-in 0.7s var(--ease-out) 2.9s both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-18%); } }

/* ---------- Idle loops ---------- */
.sweep { transform-origin: 50% 100%; animation: sweep 0.7s ease-in-out 2.9s infinite alternate; }
@keyframes sweep { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

.dust {
  position: absolute; left: 62%; top: 86%;
  width: 7%; aspect-ratio: 1; margin: -3.5% 0 0 -3.5%;
  border-radius: 50%; background: rgb(236 214 182 / 0.85); filter: blur(1px);
  opacity: 0; animation: puff 1.4s var(--ease-out) 2.9s infinite;
}
.dust:nth-of-type(2) { --dx: 220%; animation-delay: 3.6s; }
.dust:nth-of-type(3) { --dx: -160%; animation-delay: 3.25s; width: 5%; }
@keyframes puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 120%), -90%) scale(1.8); }
}

.peek { transform-origin: 100% 40%; animation: peekaboo 9s ease-in-out 5s infinite; }
@keyframes peekaboo {
  0%, 62%  { transform: none; }
  68%, 76% { transform: translateX(56%) rotate(6deg); }
  84%      { transform: translateX(-2%) rotate(-7deg); }
  90%      { transform: rotate(3deg); }
  96%, 100% { transform: none; }
}

.curtain-l { animation: sway-l 5s ease-in-out infinite alternate; }
.curtain-r { animation: sway-r 5.6s ease-in-out -2s infinite alternate; }
@keyframes sway-l { from { transform: skewX(0deg); } to { transform: skewX(-1.1deg); } }
@keyframes sway-r { from { transform: skewX(0deg); } to { transform: skewX(1.1deg); } }

/* Gold gloss that runs over the lettering, masked to the letter shapes */
.shine {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url(../img/layers/comingsoon-1280.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../img/layers/comingsoon-1280.webp) 0 0 / 100% 100% no-repeat;
}
.gloss {
  position: absolute; top: 0; bottom: 0; left: 0; width: 28%;
  background: linear-gradient(100deg, transparent, rgb(255 251 228 / 0.9), transparent);
  transform: translateX(-120%) skewX(-12deg);
  animation: gloss 7s var(--ease-in-out) 3.2s infinite;
}
@keyframes gloss {
  0%        { transform: translateX(-120%) skewX(-12deg); }
  20%, 100% { transform: translateX(460%) skewX(-12deg); }
}

/* Hold everything on its first frame until the layers are decoded */
.js .stage:not(.ready) *,
.js .stage:not(.ready) { animation-play-state: paused; }

/* ---------- Interaction ---------- */
.hot {
  position: absolute; padding: 0; border: 0; background: none;
  border-radius: 40%; cursor: pointer;
}
.hot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hot-rabbit { left: 23.5%; top: 57.5%; width: 14%;  height: 37%; }
.hot-mic    { left: 45.1%; top: 53%;   width: 10%;  height: 36%; }
.hot-bear   { left: 75%;   top: 36%;   width: 13.5%; height: 29%; }

.mic img, .rabbit img, .bear img, .logo img { transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .stage:has(.hot-bear:hover) .bear img     { transform: translateX(-2%) rotate(-2deg); }
  .stage:has(.hot-rabbit:hover) .rabbit img { transform: scale(1.03); transform-origin: 50% 100%; }
  .stage:has(.hot-mic:hover) .mic img       { transform: rotate(-3deg); transform-origin: 50% 100%; }
  .logo:hover img { transform: translateY(-3%) scale(1.02); }
}

.bubble {
  position: absolute; margin: 0; padding: 0.55em 0.95em;
  font: 700 clamp(11px, 1.7cqw, 24px) / 1.15 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  color: #7a0f18; background: #fff8ec; border-radius: 1.2em;
  box-shadow: 0 0.35em 1.2em rgb(0 0 0 / 0.35);
  white-space: nowrap; pointer-events: none; z-index: 2;
  opacity: 0; transform: scale(0.9) translateY(6%);
  transform-origin: var(--origin);
  transition: opacity 160ms ease-out, transform 260ms var(--pop);
}
.bubble::after {
  content: ""; position: absolute; bottom: -0.35em; width: 0.8em; height: 0.8em;
  background: inherit; transform: rotate(45deg); border-radius: 0.15em;
}
.bubble.show { opacity: 1; transform: none; }
.bubble:empty { visibility: hidden; }
.bubble-rabbit { left: 27%;  bottom: 43%; --origin: 0 100%; }
.bubble-rabbit::after { left: 1.1em; }
.bubble-mic    { left: 51.5%; bottom: 46%; --origin: 0 100%; }
.bubble-mic::after { left: 1.1em; }
.bubble-bear   { right: 19%; bottom: 58%; --origin: 100% 100%; }
.bubble-bear::after { right: 1.1em; }

.spark, .note { position: absolute; pointer-events: none; font-style: normal; z-index: 2; }
.spark {
  width: calc(2.2cqw * var(--fx)); aspect-ratio: 1; margin: calc(-1.1cqw * var(--fx)) 0 0 calc(-1.1cqw * var(--fx));
  background: linear-gradient(135deg, #fff6c8, var(--gold) 60%, #b8862b);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.note {
  z-index: 1;  /* behind the speech bubbles */
  font: calc(3.6cqw * var(--fx))/1 serif; color: #fff7e0; margin: -0.5em 0 0 -0.3em;
  text-shadow: 0 0.04em 0.08em rgb(70 0 10 / 0.7), 0 0 0.35em rgb(255 205 110 / 0.9);
}

/* Warm light that follows the pointer (desktop only, switched on from JS) */
.glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle 22cqw at var(--mx, 50%) var(--my, 50%), rgb(255 226 160 / 0.4), transparent);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity 400ms ease;
}
.glow.on { opacity: 1; }

/* ---------- Portrait: the same layers rearranged for a tall screen ----------
   The stage fills the screen height (side bars only when wider than 9:16).
   Props share one scale, 1 artboard px = 0.0891cqw, and stand on the platform via
   bottom offsets in cqw, so they stay on the floor whatever the phone's shape.
   The curtains stretch to full height and meet at the top, so the title and logo
   sit in front of them. */
@media (max-aspect-ratio: 4/5) {
  body { padding-block: 0; }
  .stage { width: min(100vw, 100dvh * 9 / 16); height: 100dvh; aspect-ratio: auto; --fx: 2; --spot: 50% calc(100% - 37cqw); }

  img.bg     { height: 100%; object-fit: cover; }
  .logo      { left: 24.61%;  top: 3%;      width: 50.77%; }
  .title     { left: 3%;      top: 12.5%;   width: 94%; z-index: 1; }
  .platform  { left: -64%;    top: auto; bottom: 0;     width: 228%; }
  .mic       { left: 43.75%;  top: auto; bottom: 14.3cqw; width: 12.5%; }
  .rabbit    { left: 17%;     top: auto; bottom: 6.4cqw;  width: 36%; }  /* clear of the curtain, whose tail reaches 16% */
  .bear      { left: 60%;     top: 49.5%;   width: 50.8%; }
  img.curtain-l { left: -19.4%; width: 72%; height: 100%; }
  img.curtain-r { left: auto; right: -19.4%; width: 72%; height: 100%; }

  .hot-rabbit { left: 19%;  top: auto; bottom: 8cqw;  width: 27%; height: 45cqw; }
  .hot-mic    { left: 46%;  top: auto; bottom: 14cqw; width: 14%; height: 46cqw; }
  .hot-bear   { left: 60%;  top: 49.5%; width: 30%; height: 38cqw; }

  .bubble        { font-size: clamp(12px, 3.8cqw, 20px); }
  .bubble-rabbit { left: 16%; bottom: 56cqw; }
  .bubble-mic    { left: 50%; bottom: 62cqw; translate: -50% 0; --origin: 50% 100%; }
  .bubble-mic::after { left: calc(50% - 0.4em); }
  .bubble-bear   { right: 31%; bottom: auto; top: calc(49.5% + 5cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before { animation: none !important; }
  .title img { clip-path: none; }
  .lights { display: none; }
  .stage { animation: fade 600ms ease both; }
  .bubble { transform: none; }
}
@keyframes fade { from { opacity: 0; } }