/*
 * Decorative animation layer, copied verbatim from the original site's
 * css/animations.css and the keyframes section of css/main.css.
 *
 * These are plain @keyframes with no library behind them, so they port as
 * bytes. The jQuery-driven behaviour is NOT here — that lives in
 * assets/js/site-chrome.js, rewritten without jQuery.
 *
 * Selectors are prefixed jme- (the originals, e.g. .boxes/.square/.text/
 * .mariposa/.vertical/.float, are too generic for a theme and would collide
 * with core blocks or other plugins). @keyframes identifiers are left as the
 * original named them: a different CSS namespace, so they don't collide
 * with the selector prefix problem, and renaming them buys nothing.
 *
 * `.mariposa` is a lonely-flying-butterfly CodePen demo; its wings and body
 * are downscaled PNGs bundled at assets/img/decor/ (the originals are on
 * assets.codepen.io, a third-party CDN this theme does not load from — see
 * the note above .jme-mariposa__flutter for why the wing-flap keyframes
 * are the one piece still left out).
 */

.jme-vertical {
  animation: vertical_1643 1.44s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes vertical_1643 {
  0% { transform:translate(0,-3px) }
  5.55556% { transform:translate(0,3px) }
  11.11111% { transform:translate(0,-3px) }
  16.66667% { transform:translate(0,3px) }
  22.22222% { transform:translate(0,-3px) }
  27.77778% { transform:translate(0,3px) }
  30.55556% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

.jme-horizontal {
  animation: horizontal_6003 2.72s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes horizontal_6003 {
  0% { transform:translate(0,0) }
  4.41177% { transform:translate(5px,0) }
  8.82353% { transform:translate(0,0) }
  13.23529% { transform:translate(5px,0) }
  17.64706% { transform:translate(0,0) }
  22.05882% { transform:translate(5px,0) }
  26.47059% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}
.jme-wrench {
  animation: wrench_419 2.875s ease infinite;
  transform-origin: 10% 90%;
}

@keyframes wrench_419 {
  0% { transform:rotate(-12deg) }
  6.95652% { transform:rotate(12deg) }
  8.69565% { transform:rotate(0deg) }
  15.65217% { transform:rotate(-24deg) }
  17.39131% { transform:rotate(-24deg) }
  24.34782% { transform:rotate(0deg) }
  26.08696% { transform:rotate(0deg) }
  33.04348% { transform:rotate(-24deg) }
  34.78261% { transform:rotate(-24deg) }
  41.73913% { transform:rotate(0deg) }
  43.47826% { transform:rotate(0deg) }
  50.43478% { transform:rotate(-24deg) }
  52.17391% { transform:rotate(-24deg) }
  59.13044% { transform:rotate(0deg) }
  65.21739% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}

.jme-ring {
  animation: ring_9836 3s ease infinite;
  transform-origin: 50% 100%;
}

@keyframes ring_9836 {
  0% { transform: rotate(-15deg) }
  1.66667% { transform: rotate(15deg) }
  3.33333% { transform: rotate(-18deg) }
  5% { transform: rotate(18deg) }
  6.66667% { transform: rotate(-22deg) }
  8.33333% { transform: rotate(22deg) }
  10% { transform: rotate(-18deg) }
  11.66667% { transform: rotate(18deg) }
  13.33333% { transform: rotate(-12deg) }
  15% { transform: rotate(12deg) }
  16.66667% { transform: rotate(0deg) }
  100% { transform: rotate(0deg) }
}

.jme-pulse {
  animation: pulse_9001 4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes pulse_9001 {
  0% { transform: scale(1.1) }
  25% { transform: scale(0.8) }
  50% { transform: scale(1.1) }
  100% { transform: scale(1.1) }
}

.jme-float {
  animation: float_892 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float_892 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-6px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}

/* --- from main.css: .boxes / .square / .text --- */

.jme-boxes {
  position: relative;
  width: 100%;
  background: var( --jme-paper );
    height: 45vh;
  overflow: hidden;
  animation: bgchange 20s infinite;
}

@media only screen and (min-width:600px) {
  .jme-boxes {
    height: 65vh;;
  }
}

@keyframes bgchange {
	0% { background-color: var( --jme-grey ) }

	20% { background-color: rgb(50, 50, 220) }

	40% { background-color: #B22222 }

	60% { background-color: #ADD8E6 }

	80% { background-color: #006400 }

	100% { background-color: var( --jme-grey ) }
}

.jme-boxes__text {
  font-family: 'Oswald', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var( --jme-ink );
  text-transform: uppercase;
  font-size: 30px;
  border-top: 5px solid var( --jme-ink );
  border-bottom: 5px solid var( --jme-ink );
}

@media only screen and (min-width:600px) {
  .jme-boxes__text {
    font-size: 45px;
  }
}

.jme-boxes__text span:before {
	content: 'develop';
	text-transform: uppercase;
	/* #1b1464 is the original's word colour; not in theme.json's palette. */
	color: #1b1464;
	animation: word-switch 5s infinite;
}

@keyframes word-switch {
	0% { content: 'design'; font-family: 'Permanent Marker', cursive;}

	50% { content: 'develop' ; font-family: computer, serif; }

	100% { content: 'deliver' ; font-family: 'Oswald', sans-serif;}
}

.jme-square{
  position: absolute;
  bottom: -100px;
  background-color: var( --jme-ink );
  animation: boxes 10s infinite ease-in-out;
}

.jme-square:nth-child(1) {
  width: 75px;
  height: 75px;
  left: 7%;
}

.jme-square:nth-child(2) {
  width: 65px;
  height: 65px;
  left: 15%;
  animation-delay: 4s;
}

.jme-square:nth-child(3) {
  width: 82px;
  height: 82px;
  left: 45%;
  animation-delay: 8s;
}

.jme-square:nth-child(4) {
  width: 70px;
  height: 70px;
  left: 55%;
  animation-delay: 2s;
}

.jme-square:nth-child(5) {
  width: 60px;
  height: 60px;
  left: 27%;
  animation-delay: 6s;
}

.jme-square:nth-child(6) {
  width: 55px;
  height: 55px;
  left: 60%;
  animation-delay: 5s;
}

.jme-square:nth-child(7) {
  width: 90px;
  height: 90px;
  left: 85%;
  animation-delay: 9s;
}

.jme-square:nth-child(8) {
  width: 70px;
  height: 70px;
  left: 75%;
  animation-delay: 3s;
}

.jme-square:nth-child(9) {
  width: 45px;
  height: 45px;
  left: 10%;
  animation-delay: 7s;
}

.jme-square:nth-child(10) {
  width: 55px;
  height: 55px;
  left: 60%;
  animation-delay: 7s;
}

@keyframes boxes {
	0% { bottom: -100px ; background-color: var( --jme-grey ) }

	20% { background-color: var( --jme-ink ) }

	40% { background-color: var( --jme-paper ) }

	60% { background-color: darkgreen }

	80% { background-color: var( --jme-ink ) }

	100% { background-color: var( --jme-grey ) ; bottom: 100%;
    transform: rotateZ(180deg) rotateY(180deg);
    opacity: 0;}
}

/* --- from main.css: .mariposa --- */

.jme-mariposa {
  position: absolute;
  margin: auto;
  left: 0;
  right: auto;
  bottom: 0;
  top: 0;
  width: 100px;
  height: 100px;
  opacity: 0;
 /* start at 0 so they don't appear while loading */
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  animation: fly 20s infinite linear;
  animation-delay: 0.125s;
  /*
   * Not 999999 (Task 9): that covers the open mobile nav and the avatar.
   * Not --z--sticky (300): ties with .jme-site-header's own explicit 300,
   * and a tie is broken by tree order — decor is later in the document, so
   * it still won and covered the header/menu. --z--decor (200) is below
   * every raised UI layer (sticky/float/overlay) but still an explicit,
   * non-auto value, so it outranks ordinary content (z-index:auto), which
   * is what lets the butterfly fly over sections again.
   */
  z-index: var( --wp--custom--z--decor );
}

.jme-mariposa.jme-mariposa--numero2 {
  animation-delay: 0.4s;
}
.jme-mariposa.jme-mariposa--numero2 .jme-mariposa__turn {
  animation-delay: 0.75s;
}
.jme-mariposa.jme-mariposa--numero2 .jme-mariposa__turn .jme-mariposa__flutter {
  transform: scale(0.7) rotateX(65deg);
}
.jme-mariposa.jme-mariposa--numero3 {
  animation-delay: 0.75s;
}
.jme-mariposa.jme-mariposa--numero3 .jme-mariposa__turn {
  animation-delay: 1.25s;
}
.jme-mariposa.jme-mariposa--numero3 .jme-mariposa__turn .jme-mariposa__flutter {
  transform: scale(0.3) rotateX(45deg);
}
.jme-mariposa .jme-mariposa__turn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 150px;
  perspective: 1000px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  left: 0;
  margin: auto;
  transform-origin: 50% 80%;
 /* turn from a natural center */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation: turn 3s infinite cubic-bezier(0.31, 0.09, 0.77, 1.5);
  transform-style: preserve-3d;
  filter: drop-shadow(50px 30px 10px rgba(0, 0, 0, 0.5));
}

/*
 * The original drew the body and the two wings with three PNGs pulled from
 * assets.codepen.io at full CodePen-demo size (280x486, ~370 KB each) via
 * background-image, plus two flutter-r/flutter-l keyframes for the wing
 * flap. Pulling from that third party is a URL this test suite forbids, so
 * the body and wing images below are local, downscaled copies bundled at
 * assets/img/decor/ — 2x the drawn size (this CSS renders the body at
 * 16x64 and each wing at 40x64), not the original's ~15x oversample, so
 * 775 KB became 36 KB with no visible difference in place. The wing-flap
 * keyframes are the one thing still left out: the original had already
 * disabled the flap itself (the animation: lines on ::before/::after were
 * commented out), so flutter-r/flutter-l were dead even there, and nothing
 * here references them.
 */
.jme-mariposa__flutter {
  width: 1rem;
  height: 4rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url( "../img/decor/butterfly-body.png" );

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg);
  filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

@media screen and (max-width: 750px) {
  .jme-mariposa {
    width: 50px;
    height: 50px;
  }
  .jme-mariposa__flutter {
  width: 0.25rem;
  height: 2rem;
  }
}
.jme-mariposa__flutter::before, .jme-mariposa__flutter::after {
  position: absolute;
  top: 5%;
  margin: auto;
  content: "";
  height: 100%;
  width: 250%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  animation-delay: 0;
}
.jme-mariposa__flutter::before {
  background-image: url( "../img/decor/butterfly-wing-r.png" );
  transform-origin: 0% 50%;
  left: 55%;
}
.jme-mariposa__flutter::after {
  background-image: url( "../img/decor/butterfly-wing-l.png" );
  transform-origin: 100% 50%;
  right: 55%;
}

@keyframes turn {
  0%, 100% {
    transform: translateX(-20%) rotateZ(30deg);
 }
  25% {
    transform: translateX(50%) rotateZ(-30deg);
 }
  50% {
    transform: translateX(-80%) rotateZ(30deg);
 }
  75% {
    transform: translateX(30%) rotateZ(-30deg);
 }
}
@keyframes fly {
  0% {
    opacity: 0;
    transform: translateY(470vh);
 }
  3%, 99% {
    opacity: 1;
 }
  100% {
    transform: translateY(-470vh);
 }
}

/* --- mouse particles (assets/js/particles.js) --- */

.jme-decor__particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var( --wp--custom--z--float );
	overflow: hidden;
}

.jme-particle {
	position: fixed;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	pointer-events: none;
	animation: jme-particle-out 700ms linear forwards;
}

@keyframes jme-particle-out {
	to {
		opacity: 0;
		transform: translate( var( --dx, 0 ), 28px ) scale( 0.4 );
	}
}

/*
 * prefers-reduced-motion.
 *
 * Everything this file animates is decorative and continuous: two butterflies
 * crossing 940vh on a 20s loop, ten tumbling squares, a banner cycling five
 * background colours and a word replacing itself every 5s. None of it carries
 * meaning, and it is the largest motion on the page — exactly what a
 * vestibular-sensitive visitor opts out of. Every other animation in the
 * theme already honours the query; this file did not. (The mouse particles
 * gate themselves in assets/js/particles.js, so no element is created at all.)
 *
 * `:nth-child( n )` is the specificity trick hero-code/style.scss and
 * tech-stack/style.scss already use: it matches exactly the same elements
 * while lifting each selector above the rule it has to beat. A media query
 * adds no specificity of its own, and the wing turn is declared as
 * `.jme-mariposa .jme-mariposa__turn` (0,2,0) up there — a bare
 * `.jme-mariposa__turn` here would lose the cascade and keep turning.
 *
 * Resting state: the butterflies hold their base `opacity: 0` (they only
 * become visible inside the `fly` keyframes, so there is no stray insect
 * parked mid-screen), the squares stay below the band at `bottom: -100px`,
 * the word stays "develop", and the banner is pinned to `bgchange`'s own
 * first keyframe colour rather than falling back to the `background`
 * shorthand's paper.
 */
@media ( prefers-reduced-motion: reduce ) {
	.jme-mariposa:nth-child( n ),
	.jme-mariposa:nth-child( n ) .jme-mariposa__turn,
	.jme-square:nth-child( n ),
	.jme-boxes:nth-child( n ),
	.jme-boxes__text:nth-child( n ) span::before {
		animation: none;
	}

	.jme-boxes:nth-child( n ) {
		background-color: var( --jme-grey );
	}
}