/* ============================================================
   Terra Design — media add-on
   Loads AFTER style.css + pages.css. 100% additive.
   - Photos from data-img (set by media.js) with dark overlay.
   - VARIED panel animations so the same scan line no longer
     repeats on every module. media.js assigns one fx-* per panel
     and hides the default .pscan line wherever an fx is applied.
   ============================================================ */

/* when a real photo is loaded, keep overlaid glyph/label readable */
.has-photo .glyph{opacity:.92}
.has-photo .ph svg,.bcard .ph.has-photo svg{opacity:.95}

/* any panel that got a variant effect: drop the repetitive horizontal scan line */
.fx .pscan{display:none!important}
.fx{position:relative}

/* 1 — RADAR sweep (rotational) */
.fx-radar::after{content:'';position:absolute;left:50%;top:50%;width:175%;height:175%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,rgba(56,189,248,.22),rgba(56,189,248,.02) 16%,transparent 30%);
  animation:fxSpin 5.2s linear infinite;animation-delay:var(--fxd,0s)}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* 2 — CENTER GLOW (full-cover radial fade, no diagonal) */
.fx-diag::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 50%,rgba(125,211,252,.22) 0%,transparent 72%);
  animation:fxDiag 4.6s ease-in-out infinite;animation-delay:var(--fxd,0s)}
@keyframes fxDiag{0%,100%{opacity:0}35%,65%{opacity:1}}

/* 3 — SONAR pulse (concentric rings from center) */
.fx-pulse::after{content:'';position:absolute;left:50%;top:50%;border:1px solid rgba(56,189,248,.55);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2;
  animation:fxPulse 3.6s ease-out infinite;animation-delay:var(--fxd,0s)}
@keyframes fxPulse{0%{width:22px;height:22px;opacity:.85}100%{width:88%;height:150%;opacity:0}}

/* 4 — CORNER brackets (target-lock blink) */
.fx-corners::before,.fx-corners::after{content:'';position:absolute;width:24px;height:24px;pointer-events:none;z-index:3;
  animation:fxBlink 2.6s ease-in-out infinite;animation-delay:var(--fxd,0s)}
.fx-corners::before{top:12px;left:12px;border-top:2px solid var(--ac,#38bdf8);border-left:2px solid var(--ac,#38bdf8)}
.fx-corners::after{bottom:12px;right:12px;border-bottom:2px solid var(--ac,#38bdf8);border-right:2px solid var(--ac,#38bdf8)}
@keyframes fxBlink{0%,100%{opacity:.25}50%{opacity:.95}}

/* 5 — DRAW-IN: wireframe assembles itself (for .media wireframe panels, e.g. About) */
.fx-draw svg polygon,.fx-draw svg polyline,.fx-draw svg line,.fx-draw svg rect{
  stroke-dasharray:760;stroke-dashoffset:760;animation:fxDraw 3.4s ease-out forwards;animation-delay:var(--fxd,0s)}
@keyframes fxDraw{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .fx-radar::after,.fx-diag::after,.fx-pulse::after,.fx-corners::before,.fx-corners::after{animation:none!important}
  .fx-draw svg polygon,.fx-draw svg polyline,.fx-draw svg line,.fx-draw svg rect{animation:none!important;stroke-dashoffset:0}
}