/* ---------------------------------------------------------------------------
   Country motif animation
   ---------------------------------------------------------------------------
   The destination artwork in CountryMotifShapes is built from layers, and each
   layer can name one of these animations. Keyframes live here rather than
   inline so the browser caches them once and a single media query at the
   bottom can switch every one of them off.

   Rules the motion follows:

     Slow.       Nothing here is a call to action. Durations are 6 to 40
                 seconds so the page feels alive rather than busy.
     Specific.   Water rolls, a boat rocks, a flame flickers, blossom falls.
                 Generic pulsing on everything reads as a loading state.
     Subtle.     These sit behind body copy at low opacity. Movement is a few
                 percent of the shape, never enough to pull the eye off a
                 sentence.
     Composable. Layers set their own delay, so parts of one scene move out of
                 phase instead of in lockstep.
   --------------------------------------------------------------------------- */

.sa-motif {
    /* Transforms on a group need a box to resolve percentages against. */
    transform-box: fill-box;
}

.sa-motif__layer {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

/* --- Water ----------------------------------------------------------------
   A long, shallow rise and fall. Used for sea, lake and foam layers. */
@keyframes saSwell {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(-1.5%) scaleY(1.03); }
}
.sa-anim-swell { animation: saSwell 9s ease-in-out infinite; }

/* A cresting wave leans forward and back rather than bobbing. */
@keyframes saRoll {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    40%      { transform: rotate(-1.4deg) translateX(-1%); }
    70%      { transform: rotate(0.8deg) translateX(0.6%); }
}
.sa-anim-roll { animation: saRoll 11s ease-in-out infinite; }

/* A hull rocking on that water, with a slight vertical lift. */
@keyframes saRock {
    0%, 100% { transform: rotate(-1.6deg) translateY(0); }
    50%      { transform: rotate(1.6deg) translateY(-1%); }
}
.sa-anim-rock { animation: saRock 7s ease-in-out infinite; }

/* --- Air -------------------------------------------------------------------
   Anything held up by a stem: blossom, rice, pines, a hanging leaf. */
@keyframes saSway {
    0%, 100% { transform: rotate(-1.8deg); }
    50%      { transform: rotate(1.8deg); }
}
.sa-anim-sway { animation: saSway 8s ease-in-out infinite; }

/* A hanging lantern swings a little further and slower. */
@keyframes saSwing {
    0%, 100% { transform: rotate(-3.5deg); }
    50%      { transform: rotate(3.5deg); }
}
.sa-anim-swing { animation: saSwing 6s ease-in-out infinite; }

/* Cloud bands crossing the frame, then resetting. */
@keyframes saDrift {
    0%   { transform: translateX(-6%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(10%); opacity: 0; }
}
.sa-anim-drift-slow   { animation: saDrift 22s linear infinite; }
.sa-anim-drift-slower { animation: saDrift 34s linear infinite; }

/* Petals and leaves falling. They drop, drift sideways and turn. */
@keyframes saFall {
    0%   { transform: translate(0, -12%) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(8%, 90%) rotate(140deg); opacity: 0; }
}
.sa-anim-fall { animation: saFall 14s linear infinite; }

/* Cloth. A travelling wave rather than a simple tilt. */
@keyframes saWaveFlag {
    0%, 100% { transform: skewY(0deg) translateX(0); }
    30%      { transform: skewY(-1.1deg) translateX(-0.8%); }
    65%      { transform: skewY(1.1deg) translateX(0.8%); }
}
.sa-anim-wave-flag { animation: saWaveFlag 7s ease-in-out infinite; }

/* --- Light ----------------------------------------------------------------
   A flame never repeats the same way twice, so the keyframes are deliberately
   uneven in both scale and timing. */
@keyframes saFlicker {
    0%, 100% { transform: scale(1, 1) translateX(0); opacity: 1; }
    18%      { transform: scale(0.94, 1.06) translateX(-1%); opacity: 0.86; }
    35%      { transform: scale(1.05, 0.97) translateX(0.8%); opacity: 1; }
    54%      { transform: scale(0.97, 1.04) translateX(-0.5%); opacity: 0.92; }
    76%      { transform: scale(1.03, 0.98) translateX(0.4%); opacity: 1; }
}
.sa-anim-flicker { animation: saFlicker 3.4s ease-in-out infinite; }

/* Windows and stars coming on and off. */
@keyframes saTwinkle {
    0%, 100% { opacity: 1; }
    45%      { opacity: 0.25; }
    60%      { opacity: 0.9; }
}
.sa-anim-twinkle { animation: saTwinkle 5.5s ease-in-out infinite; }

/* A slow breath, for glows and discs. */
@keyframes saPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.05); opacity: 0.78; }
}
.sa-anim-pulse { animation: saPulse 6s ease-in-out infinite; }

/* Something rising, for suns behind a landmark. */
@keyframes saRise {
    0%, 100% { transform: translateY(1.5%) scale(1); opacity: 0.9; }
    50%      { transform: translateY(-1.5%) scale(1.03); opacity: 1; }
}
.sa-anim-rise { animation: saRise 12s ease-in-out infinite; }

/* Aurora curtains: a horizontal drift with a vertical ripple. */
@keyframes saAurora {
    0%, 100% { transform: translateX(-3%) skewX(0deg); opacity: 0.7; }
    35%      { transform: translateX(2%) skewX(2deg); opacity: 1; }
    70%      { transform: translateX(3%) skewX(-1.5deg); opacity: 0.8; }
}
.sa-anim-aurora { animation: saAurora 16s ease-in-out infinite; }

/* --- Rotation --------------------------------------------------------------
   Full turns are reserved for things that genuinely turn. */
@keyframes saSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.sa-anim-spin     { animation: saSpin 26s linear infinite; }
.sa-anim-spin-slow { animation: saSpin 44s linear infinite; }

/* A compass needle hunts before it settles. */
@keyframes saNeedle {
    0%, 100% { transform: rotate(-6deg); }
    25%      { transform: rotate(5deg); }
    45%      { transform: rotate(-2deg); }
    60%      { transform: rotate(1.5deg); }
    75%      { transform: rotate(-0.5deg); }
}
.sa-anim-needle { animation: saNeedle 9s ease-in-out infinite; }

/* Petals opening and closing very slightly. */
@keyframes saBloom {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.sa-anim-bloom { animation: saBloom 10s ease-in-out infinite; }

/* ---------------------------------------------------------------------------
   Reduced motion

   Every animation above is decorative. None of it carries information, so it
   is removed outright rather than shortened. Shortening a looped animation
   produces a strobe, which is worse than the original for exactly the people
   this setting exists to protect.

   The layers keep their opacity, so the artwork still has all its depth. It
   simply holds still.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sa-motif__layer,
    .sa-motif__layer[class*="sa-anim-"] {
        animation: none !important;
        transform: none !important;
    }
}

/* A globe's meridian appears to move by narrowing and widening as it turns
   toward and away from you, not by rotating. Rotating an ellipse about its
   centre tips it off vertical, and a tilted ellipse across a ring reads as a
   no-entry sign, which is not the impression a study-abroad page wants. */
@keyframes saMeridian {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(0.35); }
}
.sa-anim-meridian { animation: saMeridian 14s ease-in-out infinite; }