/* =============================================================================
   FILE: t/tunasmuda/assets/css/tm-hero-anim.css
   JOB:  Layout for the animated SVG hero background (logo build) — see
         includes/hero-logo-anim.php (markup) and assets/js/tm-hero-anim.js (motion).
   ============================================================================= */

/* NOTE: Sits where the old <video> sat: inside .tm-hero__bg, under the dark overlay */
.tm-hero__anim {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  /* NOTE: Deep navy backdrop — the video used to provide this (the hero's own gradient is switched off in tm-ambient.css) */
  background:
    radial-gradient(ellipse 115% 95% at 62% 50%, rgba(2, 8, 20, 0) 55%, rgba(2, 8, 20, 0.6) 100%),
    radial-gradient(ellipse 55% 75% at 68% 52%, rgba(16, 66, 128, 0.85) 0%, rgba(16, 66, 128, 0) 66%),
    radial-gradient(ellipse 70% 60% at 8% 18%, rgba(29, 54, 92, 0.9) 0%, rgba(29, 54, 92, 0) 62%),
    radial-gradient(ellipse 60% 40% at 90% 95%, rgba(255, 199, 54, 0.07) 0%, rgba(255, 199, 54, 0) 70%),
    linear-gradient(180deg, #050f24 0%, #091b3a 50%, #040b19 100%);
}

/* NOTE: Image background mode (variable16 = image) → the photo is shown, the animation is not */
.tm-hero--bg-image .tm-hero__anim {
  display: none;
}

.tm-hero__anim-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* NOTE: Emblem stage — right of the glass text card, centred in the visible hero.
   JS only adds tilt / scroll drift on top of this transform (it re-writes it, keeping the centring). */
.tm-hero__anim-stage {
  position: absolute;
  top: calc(50% + var(--tm-header-h, 72px) * 0.5);
  left: 68%;
  width: min(calc(var(--tm-vh, 1vh) * 118), 58vw);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.tm-hero__anim-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* NOTE: Effect pieces start invisible — the static (no-JS) picture is just the finished logo */
.tm-hero__anim .hx-shock,
.tm-hero__anim .hx-spark,
.tm-hero__anim .hx-spark-halo,
.tm-hero__anim .hx-flare,
.tm-hero__anim .hx-shine,
.tm-hero__anim .hx-core-flash {
  opacity: 0;
}

/* NOTE: Video mode no longer plays a video — hide the still photo behind the animation */
.tm-hero.tm-hero--bg-video .tm-hero__bg img.tm-hero__poster:not(.tm-hero__bg-image) {
  opacity: 0;
  visibility: hidden;
}

/* NOTE: Click interaction — cursor turns into a pointer while the mouse is over the logo */
.tm-hero.is-hx-hot {
  cursor: pointer;
}

/* NOTE: Text-free hint under the emblem — a pulsing gold dot (JS fades it in after the build, removes it after the first click) */
.tm-hero__anim-hint {
  position: absolute;
  left: 50%;
  top: 82%;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #ffc736;
  opacity: 0;
  pointer-events: none;
  animation: hxHintPing 1.8s ease-out infinite;
}

@keyframes hxHintPing {
  0% { box-shadow: 0 0 0 0 rgba(255, 199, 54, 0.6); }
  100% { box-shadow: 0 0 0 1.4rem rgba(255, 199, 54, 0); }
}

/* NOTE: Phones / tablets — emblem moves behind the text block, calmer so words stay readable */
@media (max-width: 991.98px) {
  .tm-hero__anim-stage {
    left: 50%;
    top: 50%;
    width: min(calc(var(--tm-vh, 1vh) * 100), 128vw);
    opacity: 0.7;
  }

  /* NOTE: the text card covers the emblem here, so the hint and the call-outs would point at nothing */
  .tm-hero__anim-hint,
  .tm-hero__anim .hx-l-hud {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .tm-hero__anim-stage {
    top: 50%;
    width: 165vw;
    opacity: 0.7;
  }
}

/* NOTE: Visual Edit mode keeps the old behaviour: the editable photo is shown, no animation */
.cms-edit-active .tm-hero__anim {
  display: none;
}

.cms-edit-active .tm-hero.tm-hero--bg-video .tm-hero__bg img.tm-hero__poster {
  opacity: 1 !important;
  visibility: visible !important;
}