/* ==========================================================================
   ANIMATED MALTESE CROSS HERO BACKGROUND
   ==========================================================================
   Animates the hero's gr-2.svg cross pattern with a glowing "comet" line
   that traces the outline of the 8-pointed crosses, plus a breathing
   ember glow, vignette and film grain.

   Layer stack (back to front, inside .header-freelancer .bg-gr.hero-anim):
     1. .drift     — pattern (bg-img) + trace SVG, scaled/drifted as one unit
     2. .ember     — breathing orange glow, top-left
     3. .vignette  — darkens edges for depth / foreground legibility
     4. .grain     — film-grain texture overlay

   The trace SVG shares the pattern's 1440x1080 coordinate space.
   `background-size: cover` at the default top-left position equals
   preserveAspectRatio="xMinYMin slice", so the trace stays pixel-locked
   to the pattern at any viewport size.

   Tuning knobs:
     - Loop speed ......... `animation: hero-comet 30s` (lower = faster)
     - Tail length ........ `stroke-dasharray: 50 950` (first value, /1000)
     - Echo position ...... `.echo { animation-delay: -15s }`
     - Drift amount ....... `@keyframes hero-bg-drift` scale value
     - Glow intensity ..... `.ember` opacity values in `@keyframes hero-breathe`
     - Route .............. the `d` of #cross-route (in index.html)
   ========================================================================== */

.header-freelancer .bg-gr.hero-anim {
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   1. Pattern + trace, animated together via their common wrapper
   -------------------------------------------------------------------------- */
.hero-anim .drift {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: hero-bg-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-bg-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

.hero-anim .pattern {
  position: absolute;
  inset: 0;
}

.hero-anim .trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Faint static imprint of the full route */
.hero-anim .trace-ghost {
  stroke: rgba(255, 110, 38, 0.07);
  stroke-width: 1;
  fill: none;
}

/* The comet: a blurred orange halo under a hot, thin core.
   Both are the same route drawn with a short dash (the tail) and a long
   gap; animating dashoffset slides the tail along the route. The route's
   pathLength is normalized to 1000, so `50 950` = a tail 5% of the loop. */
.hero-anim .trace-halo,
.hero-anim .trace-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50 950;
  animation: hero-comet 36s linear infinite;
}

.hero-anim .trace-halo {
  stroke: #ff6e26;
  stroke-width: 3.5;
  opacity: 0.85;
  filter: url(#comet-glow);
}

.hero-anim .trace-core {
  stroke: #ffd9c2;
  stroke-width: 1.3;
  opacity: 0.95;
}

/* Second, dimmer comet half a loop behind the first */
.hero-anim .trace-halo.echo,
.hero-anim .trace-core.echo {
  animation-delay: -15s;
  opacity: 0.35;
}

@keyframes hero-comet {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   2. Breathing glow — reinforces the artwork's blurred orange corner
   -------------------------------------------------------------------------- */
.hero-anim .ember {
  position: absolute;
  z-index: 2;
  width: 70vmax;
  height: 70vmax;
  left: -25vmax;
  top: -25vmax;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 110, 38, 0.32) 0%,
    rgba(255, 110, 38, 0.10) 38%,
    transparent 68%);
  mix-blend-mode: screen;
  animation: hero-breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-breathe {
  from { opacity: 0.35; transform: scale(0.92); }
  to   { opacity: 0.9;  transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   3. Vignette — radial edge darkening + bottom fade
   -------------------------------------------------------------------------- */
.hero-anim .vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(120% 90% at 30% 45%, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 30%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Film grain — tiled SVG turbulence noise at low opacity
   -------------------------------------------------------------------------- */
.hero-anim .grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim .drift,
  .hero-anim .ember {
    animation: none;
  }
  .hero-anim .trace-halo,
  .hero-anim .trace-core {
    display: none;
  }
}