/*
 * Matrix Anchor — animated hero emblem (homepage).
 *
 * Everything here is scoped under `.hero-art`, the existing emblem block in index.html, and loads
 * AFTER theme-matrixanchor.css so it layers on top of the existing look instead of replacing it.
 *
 * Performance: only transform-family properties (rotate / translate / scale) and opacity are
 * animated — no filter or layout animation. The emblem is `d-none` below the lg breakpoint, so on
 * phones none of this runs at all.
 *
 * Layers (back to front):  glow  <  rings + scan  <  halo  <  logo  <  tags
 */

.hero-art {
  --hero-d: min(92%, 380px);   /* outer ring diameter */
  --hero-orange: var(--ma-orange, #e25303);
  isolation: isolate;          /* own stacking context: z-indexes below can't leak into the page */
}

/* ---- rings: true circles (the old percentage insets made ovals, which wobble when rotated) ---- */
.hero-art .hero-ring {
  inset: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--hero-d);
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
}
.hero-art .hero-ring.hero-ring--outer {
  animation: hero-spin 50s linear infinite;
}
.hero-art .hero-ring.hero-ring--inner {
  width: calc(var(--hero-d) * .79);
  animation: hero-spin 35s linear infinite reverse;
}

/* indicator dots sit exactly on each ring's path and travel with it */
.hero-art .hero-ring::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-orange);
  box-shadow: 0 0 12px 2px rgba(226, 83, 3, .65);
  translate: -50% -50%;
}
.hero-art .hero-ring--outer::after { left: 14.6%; top: 14.6%; }   /* upper-left of the circle  */
.hero-art .hero-ring--inner::after { left: 85.4%; top: 85.4%; }   /* lower-right of the circle */

/* ---- background illumination: large soft orange glow that slowly breathes ---- */
.hero-art .hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 83, 3, .22), rgba(226, 83, 3, .07) 42%, transparent 68%);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
  animation: hero-breathe 6s ease-in-out infinite;
}

/* ---- halo: tight glow right behind the logo — one-time power-up flare, then a gentle pulse ---- */
.hero-art .hero-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 89, 12, .30), transparent 65%);
  opacity: .35;
  z-index: 1;
  pointer-events: none;
  animation:
    hero-flare 1.3s ease-out both,
    hero-halo 5s ease-in-out 1.3s infinite;
}

/* ---- scan: a thin light that crosses the emblem disc every 9s, clipped to the circle ---- */
.hero-art .hero-scan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hero-d);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.hero-art .hero-scan::before {
  content: "";
  position: absolute;
  inset: 0;                    /* full-height layer whose centre line is the scan line */
  background: linear-gradient(
    to bottom,
    transparent calc(50% - 26px),
    rgba(226, 83, 3, .10) calc(50% - 1px),
    rgba(255, 122, 40, .85) 50%,
    transparent calc(50% + 1px)
  );
  opacity: 0;
  animation: hero-scan 9s linear infinite;
}

/* ---- logo: one-time power-up entrance (the static drop-shadow from the theme is kept) ---- */
.hero-art .hero-logo {
  position: relative;
  z-index: 2;
  height: auto;                /* width/height attributes reserve space; CSS keeps the true aspect ratio */
  animation: hero-powerup 1.1s ease-out both;
}

/* ---- tags: sit above everything, light up subtly on hover ---- */
.hero-art .hero-tag {
  z-index: 3;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.hero-art .hero-tag:hover {
  border-color: rgba(226, 83, 3, .5);
  color: var(--ma-text-primary, #e4e6eb);
  box-shadow: 0 0 16px rgba(226, 83, 3, .14);
}

/* ---- keyframes (names are prefixed `hero-` so they can't collide with other styles) ---- */
@keyframes hero-spin    { to { rotate: 360deg; } }
@keyframes hero-breathe { 50% { opacity: 1; scale: 1.12; } }
@keyframes hero-flare {
  0%   { opacity: 0;   scale: .7; }
  35%  { opacity: 1;   scale: 1.1; }
  100% { opacity: .35; scale: 1; }
}
@keyframes hero-halo {
  0%, 100% { opacity: .35; }
  50%      { opacity: .75; }
}
@keyframes hero-powerup {
  from { opacity: 0; scale: .92; }
  to   { opacity: 1; scale: 1; }
}
@keyframes hero-scan {
  0%, 72%   { translate: 0 -50%; opacity: 0; }
  75%       { opacity: 1; }
  91%       { translate: 0 50%;  opacity: .5; }
  95%, 100% { translate: 0 50%;  opacity: 0; }
}

/* ---- accessibility: no motion at all; the emblem simply shows in its resting state ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-art .hero-ring,
  .hero-art .hero-glow,
  .hero-art .hero-halo,
  .hero-art .hero-logo,
  .hero-art .hero-scan::before {
    animation: none !important;
  }
  .hero-art .hero-scan { display: none; }
  .hero-art .hero-tag { transition: none; }
}