/* fun puppy fun — fullscreen dog shuffle */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  /* kill tap highlight + text selection on mobile */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  cursor: pointer;
}

/* ---------- stage: two layers that crossfade ---------- */

#stage {
  position: fixed;
  inset: 0;
  /* dvh keeps it correct when mobile browser chrome hides/shows */
  height: 100dvh;
  width: 100vw;
}

.layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 480ms ease-in-out;
  will-change: opacity;
}

.layer.visible { opacity: 1; }

/* the media itself — "fit aspect to browser": whole frame always visible,
   never cropped, letterboxed against black */
.layer img,
.layer video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Video controls sit in a bottom strip. Clicks there must reach the
   controls instead of advancing the shuffle — app.js guards that zone. */
.layer video {
  outline: none;
}

.layer video::-webkit-media-controls-enclosure {
  border-radius: 0;
}

/* ---------- name caption (Willow / Taffy only) ---------- */

#caption {
  position: fixed;
  bottom: max(6vh, 44px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 30;

  padding: 7px 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;

  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);

  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 600ms ease, transform 600ms ease;
}

#caption.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- first-visit hint ---------- */

#hint {
  position: fixed;
  top: max(4vh, 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;

  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

#hint.show { opacity: 1; }

/* ---------- loader ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 500ms ease;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.paw {
  font-size: 46px;
  animation: pulse 1.3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* ---------- error / noscript ---------- */

#noscript,
.fatal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #fff;
  background: #000;
  font-size: 16px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .layer, #caption, #hint, #loader { transition-duration: 1ms; }
  .paw { animation: none; opacity: 0.7; }
}