/* Optional: the slow card sway the jelly-smoke ink drifts with.
 * Put class="jelly-sway" on the element that holds the headline, and give an
 * ancestor some perspective (for example `perspective: 1000px` on body).
 * The effect reads --yaw and --pitch from this element every frame: the plume
 * leans against the yaw and the colour fringe swings with it.
 * If the site already animates a 3D tilt, drive that tilt with these
 * properties instead of adding a second animation. */

@property --yaw { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --pitch { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --lift { syntax: '<length>'; inherits: true; initial-value: 0px; }

.jelly-sway {
  transform-style: preserve-3d;
  transform: rotateX(var(--pitch)) rotateY(var(--yaw)) translateZ(var(--lift));
  animation: jelly-sway 8s ease-in-out infinite alternate;
}

@keyframes jelly-sway {
  0%   { --pitch: 0.6deg;  --yaw: -0.9deg; --lift: 0px; }
  50%  { --pitch: -0.8deg; --yaw: 1.1deg;  --lift: 1.5px; }
  100% { --pitch: 0.4deg;  --yaw: 0deg;    --lift: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .jelly-sway { animation: none; }
}