/* Home banner effect.
   The banner used to show a looping YouTube background video (removed in
   src/export-fixes.js because YouTube's pause button / channel icon showed
   on every loop). /tcp/hero.js now paints a canvas snow + bokeh effect over
   the still fallback image (hero-fallback.webp) instead. This stylesheet
   only positions that canvas, disables the Royal Addons "particle" overlay
   the theme also tries to render on this container, and adds a slow
   background zoom/drift so the still image keeps a little of the video's
   motion. */

.tcp-hero {
  position: relative;
  overflow: hidden;
}

/* Phones get the smaller 1024w fallback image instead of the full 1918x1078 original --
   the hero never renders anywhere near that wide there, and it's requested well before the
   canvas snow above even attempts to paint. Same 16:9-ish aspect ratio as the original, so
   background-size:cover frames it the same way. This only overrides background-image, not
   background-position/-size (see the drift animation and its reduced-motion override below).
   Elementor's own per-page inline <style> block sets background-image on this same element
   with higher selector specificity (.elementor-990 .elementor-element.elementor-element-
   b7329db:not(...)), so !important is required here regardless of cascade order. */
@media (max-width: 767px) {
  .tcp-hero {
    background-image: url("/wp-content/uploads/2025/04/hero-fallback-1024x576.webp") !important;
  }
}

.tcp-hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* never intercept clicks on the hero's text/buttons */
  z-index: 0;
}

/* The theme's own Royal Addons particle config (data-wpr-particles, class
   wpr-particle-yes) draws a second canvas of plain falling white circles on
   this same container. Keeping both looked doubled-up and inconsistent
   (their dots have no depth, sway, blur or twinkle), and their wrapper is
   position:absolute, inset:0, z-index:1, pointer-events:auto -- i.e. on top
   of everything, including the hero's buttons. hero.js best-effort destroys
   that particles.js instance via its own API; this rule is the guaranteed
   fallback that keeps it invisible and out of the hit-testing tree even if
   that script loads later or the API is unavailable. */
.tcp-hero .wpr-particle-wrapper {
  display: none !important;
}

/* Slow, subtle zoom/drift on the still hero image, standing in for the
   video's motion. CSS animations override the theme's static
   background-size/background-position rule regardless of its selector
   specificity, so no !important is needed here for the animated state. */
@media (prefers-reduced-motion: no-preference) {
  .tcp-hero {
    animation: tcp-hero-drift 46s ease-in-out infinite alternate;
  }
}

@keyframes tcp-hero-drift {
  0% {
    background-size: 112% auto;
    background-position: 47% 40%;
  }
  50% {
    background-size: 122% auto;
    background-position: 53% 58%;
  }
  100% {
    background-size: 115% auto;
    background-position: 45% 48%;
  }
}

/* Reduced motion: a calm, static crop -- no zoom, no drift. hero.js draws a
   single still frame on the canvas instead of animating it. */
@media (prefers-reduced-motion: reduce) {
  .tcp-hero {
    animation: none !important;
    background-size: 112% auto !important;
    background-position: 48% 45% !important;
  }
}

/* Footer snow: the same snow as the banner, on one canvas behind the whole
   footer (the link columns and the copyright bar), so it falls all the way to
   the bottom with no line between the two. Their own green backgrounds move to
   the footer itself; otherwise they would cover the canvas. */
.tcp-snow {
  position: relative;
  overflow: hidden;
  background-color: #233d23;
}

.tcp-snow > .elementor-element-2c59110,
.tcp-snow > .elementor-element-6392c91 {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

/* The link columns sit above the copyright bar, which site.css pulls up level
   with the "Designed by" credit, so the credit stays clickable. */
.tcp-snow > .elementor-element-2c59110 {
  z-index: 2;
}

.tcp-snow .wpr-particle-wrapper {
  display: none !important;
}