/* =========================================================================
   Hero logo visual - the real, already-approved LOS mark (see
   assets/images/los-logo-mark-transparent.png), replacing the previous
   generative SVG tree/network graphic entirely (per direction: no tree,
   network, node diagram or generative graphic - a real logo image only).

   Animation is a one-shot "coming online" sequence on page load - the
   logo begins slightly dim, a soft diagonal sheen sweeps through it once
   (masked to the logo's own alpha shape via mask-image, so the light
   genuinely travels "through" the mark rather than across a bounding
   box), brightness/opacity settle upward, a soft outer glow develops, and
   it settles into a slow, low-amplitude ambient pulse. A subtle brighten
   on hover. Pure CSS (keyframes + filter/mask), no JavaScript and no
   animation library - nothing here needs sequencing beyond what
   animation-delay already gives for free.

   Source resolution note: the mark is 500x456px. Sized here at a moderate
   width (see --hero-logo-size below) rather than edge-to-edge, so it
   stays crisp at typical and high-DPI displays alike - see README for the
   full note on this tradeoff.

   The existing global `@media (prefers-reduced-motion: reduce)` rule in
   style.css already forces every animation-duration to near-zero, so
   reduced-motion users see the fully lit, glowing logo immediately with
   no extra code needed here.
   ========================================================================= */

.hero-logo-visual {
  --hero-logo-size: clamp(260px, 26vw, 420px);
  position: relative;
  width: var(--hero-logo-size);
  height: var(--hero-logo-size);
  margin: 0 auto;
}

.hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.4;
  filter: brightness(0.55) saturate(0.75) drop-shadow(0 0 0 rgba(243, 220, 149, 0));
  animation: hl-boot 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
             hl-ambient 5.5s ease-in-out infinite;
  animation-delay: 0s, 2.4s;
  transition: filter 0.35s ease;
}

.hero-logo-visual:hover .hero-logo-img {
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 0 26px rgba(243, 220, 149, 0.55));
}

@keyframes hl-boot {
  0% {
    opacity: 0.4;
    filter: brightness(0.55) saturate(0.75) drop-shadow(0 0 0 rgba(243, 220, 149, 0));
  }
  55% {
    opacity: 0.85;
    filter: brightness(0.95) saturate(0.95) drop-shadow(0 0 10px rgba(243, 220, 149, 0.28));
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1) drop-shadow(0 0 20px rgba(243, 220, 149, 0.4));
  }
}

/* Very gentle ambient pulse once booted - small amplitude deliberately,
   so it reads as "alive" rather than a flashing effect. */
@keyframes hl-ambient {
  0%, 100% {
    filter: brightness(1) saturate(1) drop-shadow(0 0 20px rgba(243, 220, 149, 0.4));
  }
  50% {
    filter: brightness(1.04) saturate(1) drop-shadow(0 0 28px rgba(243, 220, 149, 0.55));
  }
}

/* Soft light sweeping through the logo on load - masked to the mark's own
   alpha shape, so it never looks like a glare sliding over a rectangle.
   Runs once; this is the "soft light/glow travels through the logo"
   moment on page load, not a repeating shimmer. */
.hero-logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.85) 48%,
    rgba(243, 220, 149, 0.9) 52%,
    transparent 70%);
  background-size: 300% 300%;
  background-position: -120% -120%;
  -webkit-mask-image: url("../images/los-logo-mark-transparent.png");
  mask-image: url("../images/los-logo-mark-transparent.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
  animation: hl-sheen 1.6s ease-out 0.15s forwards;
}

@keyframes hl-sheen {
  0% {
    opacity: 0;
    background-position: -120% -120%;
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    background-position: 120% 120%;
  }
}

@media (max-width: 720px) {
  .hero-logo-visual {
    --hero-logo-size: clamp(200px, 55vw, 300px);
  }
}