/* =========================================================================
   MOTION v3 — review-only stylesheet, loaded ONLY by /review-motion3/
   AFTER pages.css, pages-fixed.css and pages-motion2.css. Adds two systems
   to the unchanged v2: gull flocks and the sun's radiance.
   ========================================================================= */

/* ---- gull flocks --------------------------------------------------------
   Two loose groups on different lanes/speeds/directions. The containers
   cross the full frame; the loop wrap happens entirely off-frame (enter and
   exit at the edges — no mid-sky fade, no visible rewind). Lanes sit in the
   clear sky strip between the proof pills and the ridge line, clear of
   copy, sun core, island, window, pause chip and the transition seam. */
.motion-flock {
  position: absolute;
  left: 0;
  z-index: 1;
  pointer-events: none;
  width: min(30vw, 380px);
}
.flock-a {
  top: calc(min(60vw, 760px) * 0.682);
  animation: flockCrossLR 90s linear -32s infinite;
}
.flock-b {
  top: calc(min(60vw, 760px) * 0.71);
  animation: flockCrossRL 72s linear 0s infinite;
}
.gull {
  position: absolute;
  display: block;
  animation: gullBreathe 10s ease-in-out infinite alternate;
}
.gull svg { display: block; width: 100%; height: auto; overflow: visible; }
/* definition against bright zones (sun spill, pale ridge) */
.flock-a .gull svg { filter: drop-shadow(0 0.6px 0.4px rgba(30, 50, 80, 0.28)); }
.flock-b .gull svg { filter: drop-shadow(0 0.8px 0.6px rgba(30, 50, 80, 0.4)) brightness(0.97); }
.wing-l, .wing-r {
  animation: gullFlap 1s ease-in-out infinite alternate;
  transform-box: fill-box;
}
.wing-l { transform-origin: 100% 60%; }
.wing-r { transform-origin: 0% 60%; }

@keyframes flockCrossLR {  /* container spans 30vw; travel fully off both edges */
  from { transform: translateX(-35vw); }
  to   { transform: translateX(105vw); }
}
@keyframes flockCrossRL {
  from { transform: translateX(105vw); }
  to   { transform: translateX(-35vw); }
}
@keyframes gullFlap {      /* right wing; left mirrors */
  from { transform: rotate(-26deg); }
  to   { transform: rotate(30deg); }
}
@keyframes gullFlapL {
  from { transform: rotate(26deg); }
  to   { transform: rotate(-30deg); }
}
@keyframes gullGlide {     /* occasional gliders: gentle sway, no beat */
  from { transform: rotate(2deg); }
  to   { transform: rotate(-6deg); }
}
@keyframes gullGlideL {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(6deg); }
}
@keyframes gullBreathe {   /* per-bird altitude/spacing breathing */
  from { transform: translateY(0); }
  to   { transform: translateY(var(--amp, 4px)); }
}

/* ---- sun radiance -------------------------------------------------------
   Layered corona on the raster's own sun: core bloom, soft halo, and
   restrained tapered rays that expand and contract on offset eased cycles.
   Screen-blended so it reads as light, never covering geometry. */
.motion-sun {
  position: absolute;
  left: 82.3%;
  top: calc(min(60vw, 760px) - 21.5vw);
  width: 0; height: 0;
  z-index: 1;
  pointer-events: none;
}
.motion-sun > span {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: screen;
}
.sun-core {
  width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px);
  background: radial-gradient(circle, rgba(255, 255, 250, 0.95) 0%, rgba(255, 248, 224, 0.55) 45%, rgba(255, 244, 210, 0) 72%);
  opacity: .7;
  animation: sunCore 9s ease-in-out infinite alternate;
}
.sun-halo {
  width: clamp(120px, 14vw, 200px); height: clamp(120px, 14vw, 200px);
  background: radial-gradient(circle, rgba(255, 243, 208, 0.5) 0%, rgba(255, 240, 200, 0.22) 55%, rgba(255, 240, 200, 0) 75%);
  opacity: .55;
  animation: sunHalo 12s ease-in-out -3s infinite alternate;
}
.sun-rays {
  width: clamp(150px, 17vw, 250px); height: clamp(150px, 17vw, 250px);
  border-radius: 0;
  opacity: .35;
  filter: blur(2px);
  animation: sunRays 10s ease-in-out -2s infinite alternate;
}
.sun-rays svg { display: block; width: 100%; height: 100%; }

@keyframes sunCore {
  from { transform: translate(-50%, -50%) scale(1); opacity: .65; }
  to   { transform: translate(-50%, -50%) scale(1.38); opacity: .95; }
}
@keyframes sunHalo {
  from { transform: translate(-50%, -50%) scale(1); opacity: .45; }
  to   { transform: translate(-50%, -50%) scale(1.55); opacity: .82; }
}
@keyframes sunRays {
  from { transform: translate(-50%, -50%) scale(0.9) rotate(-3deg); opacity: .28; }
  to   { transform: translate(-50%, -50%) scale(1.28) rotate(3deg); opacity: .55; }
}

/* ---- governance ---------------------------------------------------------- */
body.motion-paused :is(.motion-flock, .gull, .wing-l, .wing-r, .motion-sun > span) {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .motion-flock, .gull, .wing-l, .wing-r { animation: none !important; }
  .motion-flock { display: none; }  /* a frozen mid-sky flock reads as debris */
  .motion-sun > span { animation: none !important; }
  .sun-core { opacity: .65; }
  .sun-halo { opacity: .5; }
  .sun-rays { opacity: .26; }
}

/* ---- responsive lanes ---------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1023px) {
  .flock-a { top: calc(min(84vw, 720px) * 0.78); }
  .flock-b { top: calc(min(84vw, 720px) * 0.85); }
  .motion-sun { top: calc(min(84vw, 720px) - 18vw); }
}
@media (max-width: 640px) {
  /* mobile: flocks and corona omitted — consistent with the deliberate
     mobile motion policy (boat/sparkles/glints are absent there too); the
     portrait crop leaves no collision-free sky lane at legible bird sizes */
  .motion-flock, .motion-sun { display: none; }
}