/* =====================================================================
   Sky Visuals - logo load-in ("A1 Zoom-in swoop" from the top right), every page
   Works together with js/logo-anim.js. Only affects ONE logo per page:
   the big hero logo (.hero-home .mark) if the page has one, otherwise the small
   menu-bar logo (header .logo img). Nothing else on the page.

   MIKE: to turn the animation OFF everywhere, open js/logo-anim.js and set
         enabled: false. To turn it off on one page only, remove the two
         logo-anim lines from the <head> of that page. The static logo then shows as before.
   MIKE: speed and look (duration, prop spin, trails, gleam...) are all
         set at the top of js/logo-anim.js, not here.
   ===================================================================== */

/* While the animation is getting ready the static logo is hidden.
   Safety net: if the script ever fails, the logo fades back in on its own after 3.5 s. */
.sv-la-pending .hero-home .mark { opacity: 0; animation: svLaSafety .3s ease 3.5s forwards; }
/* pages without a hero logo: the menu-bar logo is the one that animates (browsers without :has() just skip this line) */
.sv-la-pending body:not(:has(.hero-home .mark)) header .logo img { opacity: 0; animation: svLaSafety .3s ease 3.5s forwards; }
@keyframes svLaSafety { to { opacity: 1; } }

/* While the animation plays, the static logo keeps its space (no layout shift) but is invisible. */
.sv-la-playing .sv-la-target { opacity: 0 !important; animation: none !important; }

/* Animation layer: covers the top of the page down to the bottom of the hero.
   z-index 40 keeps it UNDER the menu bar (header is z-index 50), so the drone flies behind the menu.
   MIKE: if you ever change the header's z-index, keep it higher than 40.
   overflow:hidden stops the off-screen start position from causing sideways scrolling.
   Never catches clicks. */
.sv-la-layer { position: absolute; left: 0; top: 0; z-index: 40; overflow: hidden; pointer-events: none; }
/* menu-bar logo: the drone has to land IN the menu bar, so this layer sits just above it (header is 50) */
.sv-la-layer.sv-la-layer-header { z-index: 60; }
.sv-la-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.sv-la-box { position: absolute; z-index: 3; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 22px rgba(62,230,240,0.35)); /* same glow as the static logo */
  transition: opacity .35s ease; }
.sv-la-logo { position: absolute; left: 0; top: 0; width: 810px; height: 969px; transform-origin: 0 0; perspective: 1600px; }
.sv-la-logo img, .sv-la-logo svg { position: absolute; display: block; max-width: none; }
.sv-la-drone { position: absolute; left: 42px; top: 189px; width: 727px; height: 364px; transform-origin: 363.5px 182px; will-change: transform, filter; }
.sv-la-drone img { left: 0; top: 0; width: 727px; height: 364px; }
.sv-la-drone svg { left: 0; top: 0; width: 727px; height: 364px; overflow: visible; }

/* Visitors who ask their phone/computer for less motion just get the static logo. */
@media (prefers-reduced-motion: reduce) {
  .sv-la-pending .hero-home .mark, .sv-la-pending header .logo img, .sv-la-playing .sv-la-target { opacity: 1 !important; animation: none !important; }
  .sv-la-layer, .sv-la-box, .sv-la-canvas { display: none !important; }
}