/* src/components/jr/scene/scene.css — SJ2 Scene, the painted plate.
   Every value transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Scene.dc.html.

   Her integration rules, verbatim, and all five are load-bearing:
     CSS background on the scene container (never an <img>, never a screenshot), cover + the
     manifest focal position, solid manifest fallback colour, no global dark overlay, and every
     card / character / chrome element stays a live element layered above. */

.jr-scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  background-color: #afd6f0;
}

/* One plate. The colour and the focal point are per-plate, set inline from her manifest
   values in scene.js; everything a plate shares is here. */
.jr-scene-plate {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The chosen world paints OVER the plate, same cover rules (owner decision, 6 Sept). */
.jr-scene-world { z-index: 1; }

/* ---------------------------------------------------------------- the welcome plate */
/* Welcome is the one plate she draws rather than photographs: five washes, in this order. */
.jr-scene-welcome-base { position: absolute; inset: 0; background: #fbf8f1; }

.jr-scene-welcome-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(128% 82% at 50% -20%, #dcf0f0 0%, rgba(220, 240, 240, .55) 44%, rgba(220, 240, 240, 0) 72%);
}

.jr-scene-welcome-sun {
  position: absolute;
  left: -14%;
  top: -22%;
  width: 58%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 241, 206, .78) 0%, rgba(255, 241, 206, 0) 68%);
}

.jr-scene-welcome-mist {
  position: absolute;
  right: -16%;
  top: 6%;
  width: 52%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(197, 229, 229, .6) 0%, rgba(197, 229, 229, 0) 70%);
}

.jr-scene-welcome-ground {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -16%;
  height: 56%;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: radial-gradient(120% 100% at 50% 0%, #f5efe1 0%, #ece3d0 100%);
}

.jr-scene-welcome-horizon {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 23%;
  height: 2px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(35, 50, 44, .07) 0%, rgba(35, 50, 44, 0) 100%);
}

/* ---------------------------------------------------------------- ambience */
.jr-scene-particles { position: absolute; inset: 0; z-index: 2; }

.sj2-particle {
  position: absolute;
  border-radius: 60% 20% 60% 20%;
}

/* HER KEYFRAME, OPACITY AND ALL, and the one on this side of the app that keeps its fade.
   The transform-only rule exists so an ENTRANCE cannot leave a page invisible in a hidden tab.
   This is the opposite case: a drifting leaf is a decoration that has to fade in at the top of
   its path and out at the bottom, or it pops in and out of existence at the edge of the frame.
   It is aria-hidden, it is a loop, and no content depends on it. Named in
   tools/audit/rules_audit.mjs beside lsnStarUp, never silent. */
@keyframes sj2-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .8; }
  100% { transform: translate3d(-170px, 98px, 0) rotate(220deg); opacity: 0; }
}

.jr-particle-a {
  left: 62%;
  top: 16%;
  width: 17px;
  height: 11px;
  background: rgba(120, 182, 86, .7);
  animation: sj2-drift 17s linear infinite;
}

.jr-particle-b {
  left: 79%;
  top: 26%;
  width: 13px;
  height: 9px;
  background: rgba(255, 206, 92, .7);
  animation: sj2-drift 22s linear infinite 4s;
}

.jr-particle-c {
  left: 48%;
  top: 10%;
  width: 11px;
  height: 8px;
  background: rgba(120, 182, 86, .55);
  animation: sj2-drift 26s linear infinite 9s;
}

/* Her own reduced-motion rule for the particles: they stop where they are, at a readable
   opacity, rather than vanishing. */
@media (prefers-reduced-motion: reduce) {
  .sj2-particle { animation: none !important; opacity: .4 !important; }
}