/* Five photographic material wreaths share a transparent 3 × 2 atlas.
   Wood / Fire / Earth — Metal / Water / empty. All motion is local to a coin. */
#home-dial .element-effect-shell {
  --element-material-atlas: url('element-materials-v2.webp');
  position: absolute; left: -48%; top: -48%; width: 196%; height: 196%;
  display: block; pointer-events: none; transform: translateZ(1px);
  border: 0; padding: 0; margin: 0;
}
#home-dial .element-effect-fire { left: -50%; top: -50%; width: 200%; height: 200%; }
#home-dial .element-effect-earth { left: -59%; top: -59%; width: 218%; height: 218%; }
.element-effect-wood { --material-position: 0% 0%; }
.element-effect-fire { --material-position: 50% 0%; }
.element-effect-earth { --material-position: 100% 0%; }
.element-effect-metal { --material-position: 0% 100%; }
.element-effect-water { --material-position: 50% 100%; }
#home-dial .element-effect-shell * { pointer-events: none; }
.element-material-guard {
  position: absolute; inset: 0; display: block;
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 47%, #000 50% 96%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent 0 47%, #000 50% 96%, transparent 100%);
}
.element-material, .element-material-light, .wood-living-material {
  position: absolute; inset: 0; display: block; pointer-events: none;
}
.element-material {
  background-image: var(--element-material-atlas);
  background-size: 300% 200%; background-position: var(--material-position);
  background-repeat: no-repeat;
}
.element-material-light {
  -webkit-mask-image: var(--element-material-atlas); mask-image: var(--element-material-atlas);
  -webkit-mask-size: 300% 200%; mask-size: 300% 200%;
  -webkit-mask-position: var(--material-position); mask-position: var(--material-position);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.element-natural-particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.element-motion-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
/* Keep the photographic fallback until the renderer has produced a frame. */
.element-effect-shell.material-motion-ready :is(.element-material, .element-material-light, .wood-living-material, .natural-fire-heat) { display: none; }
.element-effect-shell.material-motion-ready .element-natural-particles { z-index: 1; }

/* Flame photographs are divided into overlapping soft regions. Their roots
   stay attached while the crown and two sides breathe at different speeds. */
.fire-material-base { opacity: .35; }
.fire-material-crown {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 36%, #000b 48%, transparent 66%);
  mask-image: linear-gradient(to bottom, #000 0 36%, #000b 48%, transparent 66%);
  transform-origin: 50% 64%;
  animation: natural-flame-crown 1.82s -.4s ease-in-out infinite; animation-play-state: paused;
}
.fire-material-left {
  -webkit-mask-image: radial-gradient(ellipse 80% 78% at 4% 80%, #000 22%, #000d 51%, transparent 77%);
  mask-image: radial-gradient(ellipse 80% 78% at 4% 80%, #000 22%, #000d 51%, transparent 77%);
  transform-origin: 29% 76%;
  animation: natural-flame-left 2.17s -1.2s ease-in-out infinite; animation-play-state: paused;
}
.fire-material-right {
  -webkit-mask-image: radial-gradient(ellipse 80% 78% at 96% 80%, #000 22%, #000d 51%, transparent 77%);
  mask-image: radial-gradient(ellipse 80% 78% at 96% 80%, #000 22%, #000d 51%, transparent 77%);
  transform-origin: 71% 76%;
  animation: natural-flame-right 1.97s -.7s ease-in-out infinite; animation-play-state: paused;
}
.natural-fire-heat { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(ellipse at 50% 52%, #ff9c3a00 28%, #f88b341c 49%, #ef6c2014 64%, transparent 75%); animation: natural-fire-heat 2.6s ease-in-out infinite; animation-play-state: paused; }
.natural-ember { transform-box: fill-box; transform-origin: center; animation: natural-ember-rise 2.7s linear infinite; animation-play-state: paused; }
.ember-two { animation-duration: 3.2s; animation-delay: -.8s; }.ember-three { animation-duration: 2.4s; animation-delay: -1.7s; }.ember-four { animation-duration: 3.7s; animation-delay: -.4s; }
@keyframes natural-flame-crown { 0%,100% { transform: translateY(0) scale(.98,.93) skewX(-2deg); opacity: .82; } 29% { transform: translateY(-3%) scale(.95,1.09) skewX(3deg); opacity: 1; } 68% { transform: translateX(1.2%) scale(1.03,.99) skewX(-1deg); opacity: .9; } }
@keyframes natural-flame-left { 0%,100% { transform: rotate(-2deg) scale(1,.96); opacity: .85; } 43% { transform: rotate(2.6deg) scale(1.025,1.07); opacity: 1; } 75% { transform: rotate(-1deg) scale(.97,1.02); opacity: .9; } }
@keyframes natural-flame-right { 0%,100% { transform: rotate(2deg) scale(.98,.95); opacity: .89; } 51% { transform: rotate(-3deg) scale(1.02,1.08); opacity: 1; } }
@keyframes natural-fire-heat { 0%,100% { opacity: .55; } 46% { opacity: .95; } }
@keyframes natural-ember-rise { 0% { transform: translate(0,15px) scale(.65); opacity: 0; } 18% { opacity: .85; } 70% { opacity: .55; } 100% { transform: translate(6px,-24px) scale(.25); opacity: 0; } }

/* Liquid barely changes shape; drifting caustics and low ripples supply life. */
.water-material { transform-origin: 50% 72%; animation: natural-water-breathe 6.8s -1.9s ease-in-out infinite; animation-play-state: paused; }
.water-reflection { background: linear-gradient(118deg, transparent 33%, #c9f5ed00 41%, #d4ffff4a 48%, #b9e8e021 53%, transparent 65%); background-size: 280% 100%; animation: natural-water-reflection 8.7s -3.1s ease-in-out infinite; animation-play-state: paused; }
.natural-water-ripple { transform-box: view-box; transform-origin: 80px 126px; animation: natural-water-ripple 5.7s ease-out infinite; animation-play-state: paused; }
.ripple-two { animation-delay: -2.85s; }
.natural-drop { animation: natural-water-drop 5.1s ease-in-out infinite; animation-play-state: paused; }
.drop-two { animation-duration: 6.3s; animation-delay: -2.9s; }.drop-three { animation-duration: 4.8s; animation-delay: -1.3s; }
@keyframes natural-water-breathe { 0%,100% { transform: scale(1.003,.99); } 50% { transform: scale(.994,1.012) translateY(-.35%); } }
@keyframes natural-water-reflection { 0%,100% { background-position: 100% 0; opacity: .27; } 48% { background-position: 0 0; opacity: .65; } }
@keyframes natural-water-ripple { 0% { transform: scale(.72,.65); opacity: .32; } 68% { opacity: .15; } 100% { transform: scale(1.19,1.35); opacity: 0; } }
@keyframes natural-water-drop { 0%,100% { transform: translateY(6px); opacity: 0; } 25% { transform: translateY(-9px); opacity: .85; } 53% { transform: translateY(1px); opacity: .65; } 81% { transform: translateY(18px); opacity: 0; } }

/* Living leaves sway by less than a degree, with sunlight passing through. */
.wood-living-material { transform-origin: 50% 85%; animation: natural-foliage-sway 7.6s -2.3s ease-in-out infinite; animation-play-state: paused; }
.wood-dapple { background: radial-gradient(ellipse at 27% 23%, #edf3bc45, transparent 57%), radial-gradient(ellipse at 78% 66%, #d9e4ae22, transparent 44%); animation: natural-foliage-light 11.3s -4.1s ease-in-out infinite; animation-play-state: paused; }
@keyframes natural-foliage-sway { 0%,100% { transform: rotate(-.65deg) scale(.997,1); } 48% { transform: rotate(.85deg) scale(1.006,1.009); } }
@keyframes natural-foliage-light { 0%,100% { opacity: .22; } 41% { opacity: .7; } 68% { opacity: .38; } }

/* Four rigid photographed pieces levitate independently, even without WebGL. */
.earth-material { animation: natural-earth-lift 8.4s ease-in-out infinite; animation-play-state: paused; }
.earth-rock-one { clip-path: polygon(0 0,42% 0,53.2% 70%,0 70%); transform-origin: 15% 60%; --rock-x: -1.2%; --rock-lift: -8%; --rock-turn: 6deg; }
.earth-rock-two { clip-path: polygon(0 70%,53.2% 70%,58% 100%,0 100%); transform-origin: 34% 82%; --rock-x: -1.8%; --rock-lift: -9%; --rock-turn: -4deg; animation-duration: 9.4s; animation-delay: -2.1s; }
.earth-rock-three { clip-path: polygon(42% 0,100% 0,100% 62%,51.92% 62%); transform-origin: 84% 49%; --rock-x: 1.2%; --rock-lift: -9.5%; --rock-turn: 7deg; animation-duration: 7.7s; animation-delay: -3.2s; }
.earth-rock-four { clip-path: polygon(51.92% 62%,100% 62%,100% 100%,58% 100%); transform-origin: 74% 77%; --rock-x: 2%; --rock-lift: -8.5%; --rock-turn: -4.5deg; animation-duration: 8.7s; animation-delay: -5.5s; }
@keyframes natural-earth-lift { 0%,100% { transform: translate(0,-1%) rotate(0deg); } 50% { transform: translate(var(--rock-x),var(--rock-lift)) rotate(var(--rock-turn)); } }
.earth-warmth { background: linear-gradient(145deg, #f4dcb22a, transparent 56%); animation: natural-earth-light 14.7s -5.8s ease-in-out infinite; animation-play-state: paused; }
.natural-dust { animation: natural-earth-dust 4.8s ease-in-out infinite; animation-play-state: paused; }
.dust-two { animation-duration: 5.3s; animation-delay: -2.2s; }.dust-three { animation-duration: 4.2s; animation-delay: -3.1s; }.dust-four { animation-duration: 5.7s; animation-delay: -1.8s; }.dust-five { animation-duration: 4.9s; animation-delay: -4.2s; }
@keyframes natural-earth-light { 0%,100% { opacity: .2; } 50% { opacity: .5; } }
@keyframes natural-earth-dust { 0% { transform: translate(0,5px); opacity: 0; } 27% { opacity: .85; } 63% { opacity: .55; } 100% { transform: translate(-15px,-43px); opacity: 0; } }

/* Solid metal does not orbit. Narrow light moves over its actual reflections. */
.metal-material { transform: none; }
.metal-reflection { background: linear-gradient(112deg, transparent 42%, #eff7f100 46%, #f6ffff80 49%, #ffffff35 51%, transparent 55%); background-size: 310% 100%; animation: natural-metal-sweep 10.9s -3.8s ease-in-out infinite; animation-play-state: paused; }
.metal-edge-reflection { background: linear-gradient(18deg, transparent 45%, #d6e5e24d 49%, transparent 53%); background-size: 100% 270%; animation: natural-metal-edge 13.4s -7.2s ease-in-out infinite; animation-play-state: paused; }
@keyframes natural-metal-sweep { 0%,12% { background-position: 100% 0; opacity: .1; } 40% { opacity: .85; } 70%,100% { background-position: 0 0; opacity: .08; } }
@keyframes natural-metal-edge { 0%,100% { background-position: 0 100%; opacity: .13; } 50% { background-position: 0 0; opacity: .5; } }

body.compass-running #home-dial .element-effect-shell * { animation-play-state: running; }
body:not(.compass-running) #home-dial .element-effect-shell *,
body.scene-suspended #home-dial .element-effect-shell * { animation-play-state: paused !important; }
body.motion-paused #home-dial .element-effect-shell * { animation: none !important; transition: none !important; }
body.motion-paused #home-dial .element-effect-shell .natural-particle,
body.motion-paused #home-dial .element-effect-shell .natural-water-ripple { display: none; }
body.motion-paused #home-dial .element-material-light { opacity: .25; }
@media (max-width: 760px) {
  #home-dial .element-effect-shell { left: -46%; top: -46%; width: 192%; height: 192%; }
  #home-dial .element-effect-fire { left: -49%; top: -49%; width: 198%; height: 198%; }
  #home-dial .element-effect-earth { left: -52%; top: -52%; width: 204%; height: 204%; }
  .natural-particle { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  #home-dial .element-effect-shell * { animation: none !important; transition: none !important; }
  #home-dial .element-effect-shell .natural-particle,
  #home-dial .element-effect-shell .natural-water-ripple { display: none; }
  #home-dial .element-material-light { opacity: .25; }
}