.victory-show[data-world="alphabet"] {
  --vx-sky: #456296;
  --vx-deep: #171e47;
  --vx-accent: #ffd77d;
}
.victory-show[data-world="animaux"] {
  --vx-sky: #4b866e;
  --vx-deep: #173d3c;
  --vx-accent: #d8f9a1;
}
.victory-show[data-world="saisons"] {
  --vx-sky: #658bbd;
  --vx-deep: #263e69;
  --vx-accent: #ffebb0;
}

.vx-post-world text, .vx-wild-world text, .vx-nature-world text {
  font-family: Nunito, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 900;
}

.vx-post-envelope, .vx-post-star, .vx-post-proof, .vx-post-delivered, .vx-post-flag,
.vx-post-sparks, .vx-wild-book, .vx-wild-star, .vx-wild-picture, .vx-wild-cover,
.vx-wild-fireflies, .vx-wild-fronds, .vx-wild-label, .vx-wild-paw-a, .vx-wild-paw-b,
.vx-nature-star, .vx-nature-badge, .vx-nature-flake, .vx-nature-orb,
.vx-nature-sky-sparks, .vx-nature-blooms {
  transform-box: fill-box;
  transform-origin: center;
}

.vx-post-envelope { animation: vx-post-flight 5s cubic-bezier(.33, .74, .34, 1) both; }
.vx-post-trail { opacity: .46; animation: vx-post-dash 5s ease-out both; }
.vx-post-slot-light { animation: vx-post-slot 5s ease-in-out both; }
.vx-post-flag { animation: vx-post-flag 5s ease-in-out both; transform-origin: left center; }
.vx-post-delivered { animation: vx-post-receipt 5s cubic-bezier(.25, .78, .26, 1.13) both; }
.vx-post-proof { opacity: 0; animation: vx-post-proof 5s ease-out both; }
.vx-post-sparks { animation: vx-learning-sparks 5s ease-in-out both; }
.vx-post-star { animation: vx-post-mascot 5s cubic-bezier(.31, .73, .33, 1.13) both; }

@keyframes vx-post-flight {
  0% { opacity: 0; transform: translate(-116px, 43px) rotate(-15deg) scale(.66); }
  14% { opacity: 1; transform: translate(-12px, -5px) rotate(-7deg) scale(1); }
  27% { opacity: 1; transform: translate(8px, -20px) rotate(4deg) scale(1.03); }
  40% { opacity: 1; transform: translate(112px, -100px) rotate(14deg) scale(.86); }
  52% { opacity: 1; transform: translate(234px, -55px) rotate(18deg) scale(.6); }
  61% { opacity: 1; transform: translate(302px, 25px) rotate(0deg) scale(.34, .21); }
  66%, 100% { opacity: 0; transform: translate(305px, 31px) rotate(0deg) scale(.12, .03); }
}
@keyframes vx-post-dash {
  0% { opacity: 0; stroke-dashoffset: 110; }
  22% { opacity: .68; }
  59% { opacity: .58; stroke-dashoffset: 0; }
  74%, 100% { opacity: .27; stroke-dashoffset: -22; }
}
@keyframes vx-post-slot {
  0%, 54% { opacity: .42; }
  63% { opacity: 1; }
  71% { opacity: .55; }
  77% { opacity: 1; }
  87%, 100% { opacity: .82; }
}
@keyframes vx-post-receipt {
  0%, 65% { opacity: 0; transform: translateY(-24px) rotate(-6deg) scale(.79); }
  73% { opacity: 1; transform: translateY(3px) rotate(2deg) scale(1.05); }
  83%, 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes vx-post-proof {
  0%, 72% { opacity: 0; transform: translateY(19px) scale(.82); }
  86%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vx-post-flag {
  0%, 65% { transform: rotate(0deg); }
  73% { transform: rotate(-13deg); }
  81% { transform: rotate(9deg); }
  89% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}
@keyframes vx-post-mascot {
  0% { transform: translate(-24px, 20px) rotate(-10deg) scale(.85); }
  20% { transform: translate(0, 0) rotate(-3deg) scale(1); }
  49% { transform: translate(4px, -7px) rotate(6deg) scale(1.02); }
  64% { transform: translate(6px, 5px) rotate(6deg) scale(1.02, .95); }
  79% { transform: translate(0, -23px) rotate(-9deg) scale(1.09); }
  89% { transform: translate(1px, 2px) rotate(6deg) scale(.98); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

.vx-wild-fronds { animation: vx-wild-fronds 5s ease-in-out both; }
.vx-wild-book { animation: vx-wild-arrival 5s cubic-bezier(.24, .81, .37, 1.03) both; }
.vx-wild-cover {
  opacity: 0;
  transform-origin: 0 56%;
  animation: vx-wild-open 5s cubic-bezier(.45, .01, .42, 1) both;
}
.vx-wild-picture { animation: vx-wild-reveal 5s cubic-bezier(.3, .74, .35, 1.06) both; }
.vx-wild-label { animation: vx-wild-label 5s cubic-bezier(.24, .78, .28, 1.1) both; }
.vx-wild-paw-a { animation: vx-wild-stamp 5s cubic-bezier(.26, .7, .24, 1.06) both; }
.vx-wild-paw-b { animation: vx-wild-stamp-two 5s cubic-bezier(.26, .7, .24, 1.06) both; }
.vx-wild-fireflies { animation: vx-learning-sparks 5s ease-in-out both; }
.vx-wild-star { animation: vx-wild-mascot 5s cubic-bezier(.29, .71, .39, 1.08) both; }

@keyframes vx-wild-fronds {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  28% { transform: translateY(4px) rotate(-2deg); }
  68% { transform: translateY(-4px) rotate(1deg); }
}
@keyframes vx-wild-arrival {
  0% { opacity: 0; transform: translateY(45px) rotate(-5deg) scale(.94); }
  17% { opacity: 1; transform: translateY(-6px) rotate(2deg) scale(1.015); }
  29%, 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes vx-wild-open {
  0%, 24% { opacity: 1; transform: scaleX(1) rotate(0deg); }
  41% { opacity: 1; transform: scaleX(.42) rotate(-9deg); }
  53% { opacity: .46; transform: scaleX(.04) rotate(-13deg); }
  57%, 100% { opacity: 0; transform: scaleX(.02) rotate(-14deg); }
}
@keyframes vx-wild-reveal {
  0%, 39% { opacity: 0; transform: translateY(15px) rotate(6deg) scale(.78); }
  57% { opacity: 1; transform: translateY(-18px) rotate(-5deg) scale(1.05); }
  71%, 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes vx-wild-label {
  0%, 55% { opacity: 0; transform: translateY(-11px) scale(.91); }
  70% { opacity: 1; transform: translateY(3px) scale(1.035); }
  81%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vx-wild-stamp {
  0%, 59% { opacity: 0; transform: scale(1.55) rotate(-14deg); }
  68% { opacity: 1; transform: scale(.97) rotate(-3deg); }
  77%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes vx-wild-stamp-two {
  0%, 69% { opacity: 0; transform: scale(1.44) rotate(10deg); }
  79% { opacity: 1; transform: scale(.96) rotate(3deg); }
  87%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes vx-wild-mascot {
  0% { opacity: 0; transform: translate(-27px, 16px) rotate(-12deg); }
  19% { opacity: 1; transform: translate(0, 0) rotate(-3deg); }
  47% { opacity: 1; transform: translate(9px, -7px) rotate(7deg); }
  67% { opacity: 1; transform: translate(4px, 1px) rotate(3deg); }
  82% { opacity: 1; transform: translate(0, -24px) rotate(-7deg) scale(1.075); }
  94%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.vx-nature-layer { opacity: 0; }
.vx-nature-layer.vx-nature-rest { opacity: 1; }
.vx-nature-layer[data-phase="0"] { --phase-delay: 0s; }
.vx-nature-layer[data-phase="1"] { --phase-delay: 1.17s; }
.vx-nature-layer[data-phase="2"] { --phase-delay: 2.37s; }
.vx-nature-layer[data-phase="3"] { --phase-delay: 3.57s; }
.vx-nature-year .vx-nature-layer[data-phase="0"] { animation: vx-nature-first 5s ease-in-out both; }
.vx-nature-year .vx-nature-layer[data-phase="1"] { animation: vx-nature-second 5s ease-in-out both; }
.vx-nature-year .vx-nature-layer[data-phase="2"] { animation: vx-nature-third 5s ease-in-out both; }
.vx-nature-year .vx-nature-layer[data-phase="3"] { animation: vx-nature-last 5s ease-in-out both; }
.vx-nature-moment .vx-nature-layer { animation: vx-nature-moment 5s ease-out both; }
.vx-nature-year .vx-nature-badge {
  animation: vx-nature-badge .58s cubic-bezier(.24, .71, .41, 1.13) both;
  animation-delay: calc(.68s + var(--phase) * 1.13s);
}
.vx-nature-moment .vx-nature-badge {
  animation: vx-nature-badge .67s cubic-bezier(.24, .71, .41, 1.13) both;
  animation-delay: 2.4s;
}
.vx-nature-year .vx-nature-flake {
  animation: vx-nature-drift 1.2s ease-out both;
  animation-delay: calc(var(--phase-delay) + var(--i) * .052s);
}
.vx-nature-moment .vx-nature-flake {
  animation: vx-nature-drift 1.6s ease-out 2 both;
  animation-delay: calc(.65s + var(--i) * .11s);
}
.vx-nature-year .vx-nature-orb {
  animation: vx-nature-glow 1s ease-in-out both;
  animation-delay: calc(var(--phase-delay) + .05s);
}
.vx-nature-moment .vx-nature-orb {
  animation: vx-nature-glow 1.6s ease-in-out 2 both;
  animation-delay: .6s;
}
.vx-nature-sky-sparks { animation: vx-learning-sparks 5s ease-in-out both; }
.vx-nature-star { animation: vx-nature-mascot 5s cubic-bezier(.27, .75, .4, 1.12) both; }

@keyframes vx-nature-first {
  0%, 23% { opacity: 1; }
  29%, 100% { opacity: 0; }
}
@keyframes vx-nature-second {
  0%, 22% { opacity: 0; }
  28%, 47% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes vx-nature-third {
  0%, 46% { opacity: 0; }
  52%, 71% { opacity: 1; }
  77%, 100% { opacity: 0; }
}
@keyframes vx-nature-last {
  0%, 70% { opacity: 0; }
  77%, 100% { opacity: 1; }
}
@keyframes vx-nature-moment {
  0% { opacity: .8; filter: saturate(.74); }
  26% { opacity: 1; filter: saturate(1.08); }
  85%, 100% { opacity: 1; filter: saturate(1); }
}
@keyframes vx-nature-badge {
  0% { opacity: 0; transform: translateY(14px) scale(.78); }
  76% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vx-nature-drift {
  0% { opacity: 0; transform: translate(-16px, -30px) rotate(-20deg) scale(.5); }
  25%, 68% { opacity: .91; }
  100% { opacity: 0; transform: translate(24px, 56px) rotate(25deg) scale(1.06); }
}
@keyframes vx-nature-glow {
  0%, 100% { transform: scale(1); }
  58% { transform: scale(1.19); }
}
@keyframes vx-nature-mascot {
  0% { opacity: 0; transform: translate(-23px, 17px) rotate(-8deg); }
  18% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  42% { opacity: 1; transform: translate(0, -10px) rotate(6deg); }
  66% { opacity: 1; transform: translate(0, 0) rotate(-6deg); }
  83% { opacity: 1; transform: translate(0, -23px) rotate(7deg) scale(1.07); }
  98%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes vx-learning-sparks {
  0% { opacity: .24; transform: scale(.89); }
  33% { opacity: .7; transform: scale(1); }
  57% { opacity: .48; transform: scale(.97); }
  78% { opacity: 1; transform: scale(1.065); }
  100% { opacity: .72; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .vx-post-world *, .vx-wild-world *, .vx-nature-world * { animation: none !important; }
  .vx-nature-flake { opacity: .72; }
}
