/* Arena scene: the player's animated page backdrop on every journey page (arena-scene.js). Linked by
   templates/journey/_base.html.
   Below the veil: the champion art (filtered once into a canvas) drifting in a slow Ken Burns, and a bank of mist.
   Above the veil: light shafts from above the crest (still), the octagonal floor ring, still, in perspective with an
   energy ripple, and the embers. Only transform and opacity animate. The lite scene (content pages) keeps the art
   still and leaves out the floor and mist. */

.sc-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sc-scene--lit {
  z-index: 2;
}

.sc-scene__far {
  position: absolute;
  inset: -5%;
}

.sc-scene__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--j-ease);
  animation: sc-kenburns 46s ease-in-out infinite alternate;
}

.sc-scene__art.is-loaded {
  opacity: 1;
}

@keyframes sc-kenburns {
  from { transform: scale(1.02) translate3d(-1.4%, 0.8%, 0); }
  to { transform: scale(1.13) translate3d(1.6%, -1.4%, 0); }
}

/* Mist: a tileable canvas texture twice the viewport wide, slid left by one tile per loop, breathing slowly. */
.sc-scene__mist {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -6%;
  height: 58%;
  overflow: hidden;
  animation: sc-mist-breathe 13s ease-in-out infinite alternate;
}

.sc-scene__mist i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: sc-mist 80s linear infinite;
}

@keyframes sc-mist {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes sc-mist-breathe {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* Light shafts: a fan of soft beams (one canvas texture) from a point above the crest. They hold still on purpose:
   animated, this one large layer cost a quarter of the frame rate in software compositing (measured: 44 against 58
   fps); still, it is painted together with the floor and costs nothing per frame. The art, mist and embers move
   through them, which reads as moving light. */
.sc-scene__shafts {
  position: absolute;
  top: -6%;
  left: 50%;
  width: 92vw;
  height: 84vh;
  margin-left: -46vw;
  background-size: 100% 100%;
}

/* The arena floor: an octagonal ring seen in perspective under the hero (still: nothing turns), with a
   ripple of light running outwards across it. */
.sc-scene__floor {
  --floor: min(1700px, 130vw);
  position: absolute;
  top: 80%;
  left: 50%;
  width: var(--floor);
  height: var(--floor);
  margin: calc(var(--floor) / -2) 0 0 calc(var(--floor) / -2);
  transform: perspective(1600px) rotateX(76deg);
}

.sc-scene__ring {
  position: absolute;
  inset: 0;
}

.sc-scene__ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sc-scene__wall {
  fill: none;
  stroke: rgba(var(--j-gold-rgb), 0.24);
  stroke-width: 3;
}

.sc-scene__wall--inner {
  stroke: rgba(var(--j-gold-rgb), 0.18);
  stroke-width: 2;
}

.sc-scene__runes {
  fill: none;
  stroke: rgba(var(--j-gold-rgb), 0.26);
  stroke-width: 18;
  stroke-dasharray: 0.8 4.2;
}

.sc-scene__ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(var(--j-gold-200-rgb), 0.8);
  stroke-width: 5;
  opacity: 0;
  animation: sc-ripple 8s var(--j-ease-out) infinite;
}

@keyframes sc-ripple {
  0% { opacity: 0; transform: scale(0.3); }
  10% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.15); }
}

/* Embers: a few dozen small sparks (arena-scene.js sets each one's --x, --y, --h, --s, --rise, --sway, --dx, --dl).
   The outer element rises and fades in and out; the inner one sways and flickers. Transform and opacity only. */
.sc-scene__embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sc-ember {
  position: absolute;
  top: var(--y);
  left: var(--x);
  animation: sc-ember-rise var(--rise) linear var(--dl) infinite;
}

.sc-ember b {
  display: block;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--j-gold-100), rgba(var(--j-gold-200-rgb), 0.7) 45%, rgba(var(--j-gold-rgb), 0) 100%);
  box-shadow: 0 0 calc(var(--s) * 2) rgba(var(--j-gold-rgb), 0.55);
  animation: sc-ember-sway var(--sway) ease-in-out var(--dl) infinite alternate;
}

.sc-ember--pale b {
  background: radial-gradient(closest-side, rgba(var(--j-light-rgb), 1), rgba(var(--j-ember-200-rgb), 0.6) 45%, rgba(var(--j-ember-200-rgb), 0) 100%);
  box-shadow: 0 0 calc(var(--s) * 2) rgba(var(--j-ember-200-rgb), 0.4);
}

.sc-ember--deep b {
  background: radial-gradient(closest-side, rgba(var(--j-gold-200-rgb), 1), rgba(var(--j-gold-rgb), 0.6) 45%, rgba(var(--j-gold-rgb), 0) 100%);
}

@keyframes sc-ember-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: 0.9; }
  70% { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(0, calc(var(--h) * -1), 0); }
}

@keyframes sc-ember-sway {
  0% { transform: translate3d(calc(var(--dx) * -1), 0, 0); opacity: 1; }
  50% { opacity: 0.55; }
  100% { transform: translate3d(var(--dx), 0, 0); opacity: 1; }
}

/* Lite scene (dashboard, Deep Dive, Wrap: panels cover most of it): still art, no floor ring or mist. */
.j-backdrop--scene-lite .sc-scene__floor,
.j-backdrop--scene-lite .sc-scene__mist {
  display: none;
}

.j-backdrop--scene-lite .sc-scene__art {
  animation: none;
  transform: scale(1.06);
}

/* The header's backdrop blur would re-blur the moving scene under it every frame; its gradient is nearly opaque, so
   pages with the scene drop the blur. */
.j-body:has(.j-backdrop--scene) .j-topbar,
.j-body:has(.j-backdrop--scene) .st-subbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Paused by the viewer or hidden tab: every layer holds its frame. */
.j-backdrop.is-paused *,
.j-backdrop.is-paused *::before,
.j-backdrop.is-paused *::after {
  animation-play-state: paused !important;
}

.sc-scene-toggle {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--j-line-control);
  background: rgba(var(--j-ink-rgb), 0.72);
  color: var(--j-muted);
  cursor: pointer;
  transition: border-color var(--j-dur-fast) var(--j-ease-std), color var(--j-dur-fast) var(--j-ease-std);
}

.sc-scene-toggle:hover {
  border-color: var(--j-gold-300);
  color: var(--j-gold-100);
}

.sc-scene-toggle .j-i {
  width: 14px;
  height: 14px;
}

.sc-scene__art.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .sc-scene__embers {
    display: none;
  }
}