/* Alive layer: motion only, no new words. Loaded after styles.css. */

/* The miniature world tilts toward the pointer and floats. */
.scene { perspective: 1400px; }
.scene .world-art {
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--float, 0px));
  will-change: transform;
}
.margin-note { translate: var(--note-x, 0px) var(--note-y, 0px); }

/* Everything that moves inside the world sits on one layer over the art. */
.life {
  position: absolute;
  inset: 0;
  width: 82%;
  margin: 0 auto;
  pointer-events: none;
  z-index: 2;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--float, 0px));
}

/* Cloud shadows drifting across the ground. */
.clouds {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 42% 23% at 50.5% 60%, #000 92%, transparent 100%);
          mask-image: radial-gradient(ellipse 42% 23% at 50.5% 60%, #000 92%, transparent 100%);
  overflow: hidden;
}
.clouds::before {
  content: '';
  position: absolute;
  inset: -20% -60%;
  background:
    radial-gradient(ellipse 14% 9% at 22% 48%, #5d5440 0%, transparent 70%),
    radial-gradient(ellipse 10% 7% at 31% 56%, #5d5440 0%, transparent 70%),
    radial-gradient(ellipse 16% 10% at 64% 52%, #5d5440 0%, transparent 70%),
    radial-gradient(ellipse 9% 6% at 72% 60%, #5d5440 0%, transparent 70%);
  opacity: .26;
  animation: clouds-drift 48s linear infinite;
}
@keyframes clouds-drift { from { transform: translateX(-18%); } to { transform: translateX(18%); } }

/* A few olive leaves letting go of the tree. */
.leaf {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 5px;
  border-radius: 50% 0;
  background: var(--c, #74804f);
  opacity: 0;
  animation: leaf-fall var(--d, 7s) cubic-bezier(.4, .1, .6, 1) var(--delay, 0s) infinite;
}
@keyframes leaf-fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: .95; }
  35%  { transform: translate(var(--sway, 14px), 6vmin) rotate(160deg); }
  65%  { transform: translate(calc(var(--sway, 14px) * -.6), 11vmin) rotate(290deg); }
  88%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--sway, 14px), 15vmin) rotate(420deg); }
}

/* Two birds crossing above the tree now and then. */
.bird {
  position: absolute;
  left: 0;
  top: var(--y, 6%);
  width: 18px;
  height: 9px;
  opacity: 0;
  color: var(--ink);
  animation: bird-cross 22s linear var(--delay, 0s) infinite;
}
.bird svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bird path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 70%; animation: flap .42s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
@keyframes bird-cross {
  0%   { opacity: 0; left: 4%;  transform: translateY(0) scale(.9); }
  3%   { opacity: .75; }
  22%  { left: 46%; transform: translateY(-14px) scale(.8); }
  40%  { opacity: .7; left: 92%; transform: translateY(4px) scale(.7); }
  43%, 100% { opacity: 0; left: 98%; transform: translateY(0) scale(.7); }
}
.bird + .bird { width: 13px; height: 7px; }

/* Line art draws itself once the logo has landed. */
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-alive .draw path { animation: draw 1.4s cubic-bezier(.65, 0, .35, 1) var(--draw-delay, 0s) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.underline.draw { --draw-delay: .25s; }
.note-left svg.draw { --draw-delay: .9s; }
.note-right svg.draw { --draw-delay: 1.15s; }

/* Small things keep turning. */
.asterisk { width: fit-content; animation: turn 24s linear infinite; }
.big-word svg { animation: turn 40s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* The sprout grows when it comes into view, then sways. */
.coming-sprout path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.coming-sprout.is-grown path { animation: draw 1.8s cubic-bezier(.65, 0, .35, 1) forwards; }
.coming-sprout.is-grown path + path { animation-delay: .5s; }
.coming-sprout.is-grown { animation: sway 6s ease-in-out 2s infinite; transform-origin: 50% 90%; }
@keyframes sway {
  0%, 100% { transform: translateY(-35%) rotate(8deg); }
  50%      { transform: translateY(-35%) rotate(2deg); }
}

@media (max-width: 700px) {
  .life { width: 100%; }
  .leaf { width: 7px; height: 3.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .life { display: none; }
  .scene .world-art, .life { transform: none; }
  .draw path, .coming-sprout path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .asterisk, .big-word svg, .coming-sprout.is-grown { animation: none; }
}

/* The logo keeps blinking on its own, about every four seconds, with the odd
   double blink so it feels like someone watching rather than a metronome. */
.brand .mark ellipse {
  animation: logo-blink 9s ease-in-out 2.5s infinite;
}
@keyframes logo-blink {
  0%, 40%, 44.5%, 82%, 86.5%, 90.5%, 100% { transform: scaleY(1); }
  42.2% { transform: scaleY(.08); }
  84.2% { transform: scaleY(.08); }
  88.4% { transform: scaleY(.08); }
}
@media (prefers-reduced-motion: reduce) {
  .brand .mark ellipse { animation: none; }
}