/* Illustration colour classes, generated from the --art-* tokens in tokens.css.
   Animations are transform/opacity only and stop under prefers-reduced-motion. */

.f-sky { fill: var(--art-sky); }
.f-sky-warm { fill: var(--art-sky-warm); }
.f-sun { fill: var(--art-sun); }
.f-ground { fill: var(--art-ground); }
.f-ground-dark { fill: var(--art-ground-dark); }
.f-wall { fill: var(--art-wall); }
.f-wall-dark { fill: var(--art-wall-dark); }
.f-water { fill: var(--art-water); }
.f-water-deep { fill: var(--art-water-deep); }
.f-ink { fill: var(--art-ink); }
.f-skin-a { fill: var(--art-skin-a); }
.f-skin-b { fill: var(--art-skin-b); }
.f-skin-c { fill: var(--art-skin-c); }
.f-hi-vis { fill: var(--art-hi-vis); }
.f-warning { fill: var(--art-warning); }
.f-cloth-a { fill: var(--art-cloth-a); }
.f-cloth-b { fill: var(--art-cloth-b); }
.f-cloth-c { fill: var(--art-cloth-c); }
.f-white { fill: var(--art-white); }
.f-berkut-dark { fill: var(--art-berkut-dark); }
.f-berkut-mid { fill: var(--art-berkut-mid); }
.f-berkut-gold { fill: var(--art-berkut-gold); }
.f-beak { fill: var(--art-beak); }
.f-irbis-grey { fill: var(--art-irbis-grey); }
.f-irbis-light { fill: var(--art-irbis-light); }
.f-irbis-dark { fill: var(--art-irbis-dark); }
.f-irbis-eye { fill: var(--art-irbis-eye); }
.f-nose { fill: var(--art-nose); }
.s-sky { stroke: var(--art-sky); }
.s-sky-warm { stroke: var(--art-sky-warm); }
.s-sun { stroke: var(--art-sun); }
.s-ground { stroke: var(--art-ground); }
.s-ground-dark { stroke: var(--art-ground-dark); }
.s-wall { stroke: var(--art-wall); }
.s-wall-dark { stroke: var(--art-wall-dark); }
.s-water { stroke: var(--art-water); }
.s-water-deep { stroke: var(--art-water-deep); }
.s-ink { stroke: var(--art-ink); }
.s-skin-a { stroke: var(--art-skin-a); }
.s-skin-b { stroke: var(--art-skin-b); }
.s-skin-c { stroke: var(--art-skin-c); }
.s-hi-vis { stroke: var(--art-hi-vis); }
.s-warning { stroke: var(--art-warning); }
.s-cloth-a { stroke: var(--art-cloth-a); }
.s-cloth-b { stroke: var(--art-cloth-b); }
.s-cloth-c { stroke: var(--art-cloth-c); }
.s-white { stroke: var(--art-white); }
.s-berkut-dark { stroke: var(--art-berkut-dark); }
.s-berkut-mid { stroke: var(--art-berkut-mid); }
.s-berkut-gold { stroke: var(--art-berkut-gold); }
.s-beak { stroke: var(--art-beak); }
.s-irbis-grey { stroke: var(--art-irbis-grey); }
.s-irbis-light { stroke: var(--art-irbis-light); }
.s-irbis-dark { stroke: var(--art-irbis-dark); }
.s-irbis-eye { stroke: var(--art-irbis-eye); }
.s-nose { stroke: var(--art-nose); }

.scene {
  display: block;
}

.scene [class*="anim-"] {
  transform-box: fill-box;
  transform-origin: center;
}

.anim-pulse { animation: art-pulse 3s var(--ease-in-out) infinite; }
.anim-heat { animation: art-heat 2.4s var(--ease-in-out) infinite; }
.anim-water { animation: art-water 4s var(--ease-in-out) infinite alternate; }
.anim-drip { animation: art-drip 1.4s var(--ease-in) infinite; }
.anim-blink { animation: art-blink 1.6s var(--ease-in-out) infinite; }
.anim-point { animation: art-point 2s var(--ease-in-out) infinite alternate; transform-origin: left center; }
.anim-lid { animation: art-lid 3.6s var(--ease-in-out) infinite; transform-origin: bottom center; }
.anim-roll { animation: art-roll 4s var(--ease-in-out) infinite; }
.anim-walk { animation: art-walk 5s var(--ease-in-out) infinite; }
.anim-fall { animation: art-fall 1.6s var(--ease-in) infinite; }
.anim-grow { animation: art-grow 3.2s var(--ease-in-out) infinite alternate; }
.anim-spin { animation: art-spin 1.4s linear infinite; }
.anim-slide { animation: art-slide 3.4s var(--ease-in-out) infinite alternate; }

@keyframes art-pulse { 0%, 100% { transform: scale(1); opacity: 0.28; } 50% { transform: scale(1.18); opacity: 0.12; } }
@keyframes art-heat { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-6px); opacity: 0.25; } }
@keyframes art-water { from { transform: translateY(0); } to { transform: translateY(14px); } }
@keyframes art-drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes art-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.08); } }
@keyframes art-point { from { transform: rotate(0deg); } to { transform: rotate(-10deg); } }
@keyframes art-lid { 0%, 35% { transform: scaleY(1); } 55%, 90% { transform: scaleY(0.12); } 100% { transform: scaleY(1); } }
@keyframes art-roll { 0%, 10% { transform: translateX(0); } 55%, 80% { transform: translateX(78px); } 100% { transform: translateX(0); } }
@keyframes art-fall { 0% { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(92px); opacity: 0; } }
@keyframes art-grow { from { transform: scaleX(0.7); } to { transform: scaleX(1.12); } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-slide { from { transform: translateX(0); } to { transform: translateX(14px); } }
@keyframes art-walk {
  0%, 8% { transform: translate(0, 0); }
  30% { transform: translate(84px, 0); }
  42% { transform: translate(104px, -28px); }
  62% { transform: translate(190px, -28px); }
  76% { transform: translate(210px, 0); }
  92%, 100% { transform: translate(210px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scene [class*="anim-"] { animation: none; }
}

/* ---------- staged scenes (ESG.art.stages): parts light up as the scene reaches their step ---------- */

.stage-art [data-reach] {
  opacity: 0.28;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.stage-art [data-from],
.stage-art [data-until],
.stage-art [data-flag] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.stage-art [data-on="true"] {
  opacity: 1;
}

.stg__flow {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0));
  transition: stroke-dashoffset var(--duration-slow) var(--ease-in-out);
}

.stg__dot {
  display: none;
}

@supports (offset-path: path("M0 0")) {
  .stg__dot {
    display: inline;
    offset-rotate: 0deg;
    offset-distance: calc(var(--p, 0) * 1%);
    transition: offset-distance var(--duration-slow) var(--ease-in-out);
  }
}

.meter__needle {
  transform-origin: 128px 100px;
  transform: rotate(var(--needle, 28deg));
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.meter[data-level="1"] { --needle: -62deg; }
.meter[data-level="2"] { --needle: -22deg; }
.meter[data-level="3"] { --needle: 28deg; }
.meter[data-level="4"] { --needle: 64deg; }