.ar-body { background: #bfe9ec; }

/* Painted undersea backdrop — full-bleed cover behind the transparent WebGL
   canvas. Layers (top → bottom): a light aqua gradient overlay, the image
   served from the R2 CDN, then the same image bundled locally as a fallback so
   the view still renders if the CDN hiccups. The base colour fills any
   letterbox on odd ratios and shows while the JPEG loads. */
.ar-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #bfe9ec;
  background-image:
    linear-gradient(180deg, rgba(232,250,251,0.0) 55%, rgba(250,244,224,0.35) 100%),
    url('https://pub-656c7c7371084a0a90e00454ccb23d01.r2.dev/assets/scene/underwater-v1.jpg'),
    url('../assets/scene/underwater.jpg');
  background-size: cover, cover, cover;
  background-position: center top, center bottom, center bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Landscape / short screens: the backdrop is a tall portrait painting, so
   bottom-anchoring blows up the seabed. Show the open-water middle instead —
   the WebGL decor row still supplies the floor accents. (Portrait phones +
   tablets keep the seabed pinned to the bottom above.) */
@media (orientation: landscape) {
  .ar-scene-bg { background-position: center top, center center, center center; }
}

/* Soft animated god-rays drifting across the scene for a touch of life. */
.ar-scene-bg__rays {
  position: absolute;
  inset: -10% -20%;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.22) 45%, transparent 52%),
    linear-gradient(75deg, transparent 60%, rgba(255,255,255,0.16) 67%, transparent 73%);
  mix-blend-mode: screen;
  animation: ar-rays 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ar-rays {
  from { transform: translateX(-4%) skewX(-2deg); opacity: 0.7; }
  to   { transform: translateX(4%)  skewX(2deg);  opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .ar-scene-bg__rays { animation: none; }
}

.ar {
  position: fixed;
  inset: 0;
  z-index: 1;            /* transparent canvas sits above the backdrop */
}

/* The Three.js canvas — full-bleed, transparent (backdrop shows through). */
.ar canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.ar__ui {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding:
    max(env(safe-area-inset-top, 0), 1rem)
    max(env(safe-area-inset-right, 0), 1rem)
    1rem
    max(env(safe-area-inset-left, 0), 1rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.ar__back,
.ar__hint,
.ar__mute,
.ar__feed { pointer-events: auto; }

.ar__back {
  width: 52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  touch-action: manipulation;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ar__hint {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: clamp(0.85rem, 3.6vw, 1rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 60%;
  text-align: center;
}

.ar__loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(180deg, var(--color-ocean) 0%, var(--color-ocean-deep) 100%);
  color: #fff;
  z-index: 20;
}

.ar__loading[hidden] { display: none !important; }