/* Public landing composition; the archived preview retains its own controls. */
/* Soft projected shadows stay behind every object, including the clipped mascot. */
body[data-view="floating"] .draggable::before {
  left: 41%; right: auto; top: var(--shadow-y, 91%);
  width: calc(var(--shadow-width, 90%) * 1.16); height: 25%;
  z-index: 0;
  background: radial-gradient(ellipse, rgba(30, 76, 119, .42) 0%, rgba(42, 93, 140, .26) 32%, rgba(61, 110, 154, .10) 58%, transparent 80%);
  filter: blur(10px);
  transform: translateX(-50%) rotate(-12deg);
  animation: object-shadow-float var(--duration, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
body[data-view="floating"] .draggable:nth-child(2n)::before { animation-name: object-shadow-reverse; }
body[data-view="floating"] .draggable[data-object="car"] { --shadow-y: 87%; --shadow-width: 100%; }
body[data-view="floating"] .draggable[data-object="coffee"] { --shadow-y: 93%; --shadow-width: 70%; }
body[data-view="floating"] .draggable[data-object="candlestick"] { --shadow-y: 94%; --shadow-width: 45%; }
body[data-view="floating"] .draggable[data-object="mascot"] { --shadow-y: 95%; --shadow-width: 92%; }
body[data-view="floating"] .draggable[data-object="solana"] { --shadow-y: 84%; --shadow-width: 86%; }
body[data-view="floating"] .draggable .object-art img.object-image {
  filter: drop-shadow(0 7px 10px rgba(23, 63, 98, .13));
}
body.motion-paused .draggable::before,
body.page-hidden .draggable::before,
body[data-view="floating"] .draggable.is-held::before { animation-play-state: paused; }
@keyframes object-shadow-float {
  0%, 100% { transform: translateX(-50%) rotate(-12deg) scale(1.06, 1.08); opacity: .76; }
  50% { transform: translateX(-50%) rotate(-12deg) scale(.93, .9); opacity: 1; }
}
@keyframes object-shadow-reverse {
  0%, 100% { transform: translateX(-50%) rotate(-12deg) scale(.93, .9); opacity: 1; }
  50% { transform: translateX(-50%) rotate(-12deg) scale(1.06, 1.08); opacity: .76; }
}
@media (max-width: 600px) {
  body[data-view="floating"] .draggable::before { filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="floating"] .draggable::before { animation: none; opacity: .9; }
}
/* One clear soundtrack control, with a generous touch target. */
body[data-view="floating"] .scene-actions { flex-shrink: 0; }
body[data-view="floating"] #toggle-music {
  min-height: 46px; min-width: 157px; padding: 11px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid rgba(87, 130, 165, .25);
  background: rgba(255, 255, 255, .85); color: #15395c;
  box-shadow: 0 4px 18px rgba(35, 85, 126, .09);
  font-size: 12px; font-weight: 650; line-height: 1.2;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
body[data-view="floating"] #toggle-music:hover { background: #fff; border-color: #64b7d7; }
body[data-view="floating"] #toggle-music:focus-visible { outline: 3px solid #0798c7; outline-offset: 4px; }
body[data-view="floating"] #toggle-music[data-state="playing"] {
  background: #e7f8ff; border-color: #88cce3; box-shadow: 0 4px 20px rgba(26, 143, 181, .13);
}
#toggle-music .music-speaker { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#toggle-music .music-waves, #toggle-music[aria-pressed="true"] .music-slash { display: none; }
#toggle-music[aria-pressed="true"] .music-waves { display: block; }
#toggle-music .music-level { width: 14px; height: 16px; display: flex; align-items: center; gap: 2px; color: #00a4cf; }
#toggle-music .music-level i { width: 3px; height: 3px; background: currentColor; border-radius: 2px; opacity: .5; }
#toggle-music[data-state="playing"] .music-level i { height: 13px; opacity: 1; animation: music-level .85s ease-in-out infinite alternate; }
#toggle-music[data-state="playing"] .music-level i:nth-child(2) { animation-delay: -.55s; }
#toggle-music[data-state="playing"] .music-level i:nth-child(3) { animation-delay: -.2s; }
@keyframes music-level { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  #toggle-music[data-state="playing"] .music-level i { animation: none; }
  #toggle-music[data-state="playing"] .music-level i:nth-child(2) { height: 8px; }
}
body.page-hidden #toggle-music .music-level i { animation-play-state: paused; }
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
/* Safari paints outside the content viewport from the root/page background.
   Keep those safe-area/browser edges near-white instead of a separate blue band. */
html { color-scheme: light; background: #f8fcff; }
body[data-view="floating"] { background: #f8fcff; }
/* Objects move around the central content; movement enforces its keep-out areas. */
body[data-view="floating"] .objects { z-index: 14; }
/* Keep labels, soft shadows and particle accents beneath readable center copy. */
body[data-view="floating"] .center-copy { z-index: 15; }
body[data-view="floating"] .draggable {
  pointer-events: none;
  left: 0; top: 0;
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%);
  --bob-x: 9px; --bob-y: 16px; --bob-angle: 3deg;
}
body[data-view="floating"] .draggable.is-held,
body[data-view="floating"] .draggable.is-gliding { will-change: transform; }
body[data-view="floating"] .draggable.is-held .object-drift { animation-play-state: paused; }
body[data-view="floating"] .object-drift { animation-name: balloon-float; }
body[data-view="floating"] .draggable:nth-child(2n) .object-drift { animation-name: balloon-float-reverse; }
/* The mascot's original space above the wordmark stays protected. */
body[data-view="floating"] .draggable[data-object="mascot"] { --bob-x: 5px; --bob-y: 10px; }
body[data-view="floating"] .object-hit { position: absolute; pointer-events: auto; z-index: 3; cursor: inherit; }
body[data-view="floating"] { min-height: 0; }
body[data-view="floating"] #sr-status { position: fixed; top: 0; left: 0; margin: 0; }
body[data-view="floating"] .world {
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  width: 100%;
}
body[data-view="floating"] .site-header .wordmark { pointer-events: none; }
body[data-view="floating"] .site-footer {
  bottom: max(19px, env(safe-area-inset-bottom));
  flex-direction: row;
  gap: 18px;
}
body[data-view="floating"] .interaction-hint {
  display: block;
  margin: 0;
  line-height: 1.6;
  pointer-events: none;
}
body[data-view="floating"] .interaction-hint strong { font-weight: 500; }
body[data-view="floating"] .connect-status {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(320px, 94%);
  margin: 15px 0 0;
  transform: translateX(-50%);
  color: #46677f;
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  body[data-view="floating"] .world { min-height: 0; }
  body[data-view="floating"] .site-footer { left: 20px; right: 20px; gap: 8px; flex-direction: column; }
  body[data-view="floating"] .interaction-hint { max-width: none; font-size: 8px; text-align: center; }
  body[data-view="floating"] #toggle-music { min-width: 150px; min-height: 44px; padding: 10px 14px; font-size: 11px; }
  body[data-view="floating"] .connect-status { margin-top: 13px; max-width: 250px; font-size: 10px; }
}
@media (max-height: 700px) {
  body[data-view="floating"] .site-header { height: 72px; }
  body[data-view="floating"] .center-copy .hero-brand { width: clamp(210px, 23vw, 300px); margin-bottom: 17px; }
  body[data-view="floating"] .center-copy .hero-brand img { max-height: 78px; }
  body[data-view="floating"] .center-copy h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.075; }
  body[data-view="floating"] .center-copy .connect-button { height: 48px; margin-top: 20px; }
  body[data-view="floating"] .center-copy .join-steps { margin-top: 20px; }
  body[data-view="floating"] .site-footer { bottom: max(10px, env(safe-area-inset-bottom)); }
  body[data-view="floating"] .connect-status { margin-top: 10px; }
}
@media (max-height: 520px) {
  body[data-view="floating"] .site-header { height: 54px; }
  body[data-view="floating"] .wordmark { font-size: 23px; }
  body[data-view="floating"] .coming { font-size: 7px; letter-spacing: 1.7px; }
  body[data-view="floating"] .center-copy { top: 49%; }
  body[data-view="floating"] .center-copy .hero-brand { width: 160px; margin-bottom: 12px; }
  body[data-view="floating"] .center-copy .hero-brand img { max-height: 45px; }
  body[data-view="floating"] .center-copy h1 { font-size: 28px; line-height: 1.05; letter-spacing: -1px; }
  body[data-view="floating"] .center-copy .connect-button { height: 44px; min-width: 190px; margin-top: 14px; font-size: 13px; }
  body[data-view="floating"] .center-copy .join-steps { margin-top: 14px; font-size: 8px; }
  body[data-view="floating"] .center-copy .join-steps b { font-size: 8px; }
  body[data-view="floating"] .connect-status { font-size: 9px; margin-top: 8px; }
}

/* Phone artwork stays substantial with a smaller, but still buoyant, idle float. */
@media (max-width: 600px) {
  body[data-view="floating"] .draggable { --bob-x: 4px; --bob-y: 7px; --bob-angle: 2deg; }
  body[data-view="floating"] .draggable[data-object="mascot"] { --bob-x: 2px; --bob-y: 4px; }
}
@media (max-width: 600px) and (min-height: 521px) {
  body[data-view="floating"] .center-copy { top: 48%; }
  body[data-view="floating"] .center-copy .hero-brand { margin-bottom: 14px; }
  body[data-view="floating"] .center-copy .connect-button { height: 48px; margin-top: 17px; }
  body[data-view="floating"] .center-copy .join-steps { margin-top: 17px; }
}
@keyframes balloon-float {
  0%, 100% { transform: translate3d(0, calc(-1 * var(--bob-y)), 0) rotate(calc(-1 * var(--bob-angle))); }
  50% { transform: translate3d(var(--bob-x), var(--bob-y), 0) rotate(var(--bob-angle)); }
}
@keyframes balloon-float-reverse {
  0%, 100% { transform: translate3d(0, var(--bob-y), 0) rotate(var(--bob-angle)); }
  50% { transform: translate3d(calc(-1 * var(--bob-x)), calc(-1 * var(--bob-y)), 0) rotate(calc(-1 * var(--bob-angle))); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="floating"] .object-drift,
  body[data-view="floating"] .draggable:nth-child(2n) .object-drift { animation: none; }
  body[data-view="floating"] .draggable.is-held,
  body[data-view="floating"] .draggable.is-gliding { will-change: auto; }
}