/* premium-motion : living frames  (yewho-web-effects 2.2, Phase 8)
   Pair with frames.js (only .md-corners needs it, for the on-view trigger).

     .md-border   — rotating conic-gradient border. The element MUST have its own
                    solid background (the gradient sits behind it, showing only at
                    the edge). Radius is inherited. Tune:
                      --mdb-c1 (bright stop, def brand red)
                      --mdb-c2 (dim stop),  --mdb-dur (spin, def 4.5s), --mdb-w (edge, def 1.6px)
                    Add .glow for a soft blurred halo of the same gradient.
     .md-corners  — corner brackets (top-left + bottom-right) that draw in on view.
                    Tune: --mdc-c (color), --mdc-s (size, def 26px).
     .md-underglow— soft brand glow beneath the element; breathes on full tier.
                    Tune: --mdg-c (color).

   All perpetual loops stop under data-motion lite/off and reduced motion.
   ============================================================ */

/* ---- rotating gradient border ----
   Double-background technique (robust, no z-index games): the surface color paints
   over padding-box, the conic gradient shows only through the transparent border ring.
   IMPORTANT: the element's own background comes from --mdb-bg (default white) —
   set --mdb-bg to match your card color (e.g. --mdb-bg:#16202E on navy cards). */
@property --mdb-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.md-border{
  position:relative;
  border:var(--mdb-w,1.6px) solid transparent;
  background:
    linear-gradient(var(--mdb-bg,#fff), var(--mdb-bg,#fff)) padding-box,
    conic-gradient(from var(--mdb-a,0deg),
      var(--mdb-c1,#C8102E) 0%,  var(--mdb-c2,rgba(200,16,46,.12)) 22%,
      var(--mdb-c2,rgba(200,16,46,.12)) 46%, var(--mdb-c1,#C8102E) 50%,
      var(--mdb-c2,rgba(200,16,46,.12)) 72%, var(--mdb-c2,rgba(200,16,46,.12)) 96%,
      var(--mdb-c1,#C8102E) 100%) border-box;
  animation: md-border-spin var(--mdb-dur,4.5s) linear infinite;
}
/* optional soft halo. NOTE: sits at z-index:-1 — if an opaque section background
   swallows it, give that section position:relative;z-index:0 so the halo paints
   just behind the card instead. */
.md-border.glow::after{
  content:""; position:absolute; inset:-2px; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--mdb-a,0deg),
    var(--mdb-c1,#C8102E), transparent 30%, transparent 70%, var(--mdb-c1,#C8102E));
  filter:blur(14px); opacity:.35;
  animation: md-border-spin var(--mdb-dur,4.5s) linear infinite;
}
@keyframes md-border-spin{ to{ --mdb-a:360deg; } }

/* ---- corner brackets, draw in on view (transform-only) ---- */
.md-corners{ position:relative; }
.md-corners::before,.md-corners::after{
  content:""; position:absolute; width:var(--mdc-s,26px); height:var(--mdc-s,26px);
  pointer-events:none; opacity:0; transform:scale(.4);
  transition: transform .55s cubic-bezier(.22,.61,.2,1), opacity .4s cubic-bezier(.22,.61,.2,1);
}
.md-corners::before{ top:-3px; left:-3px; transform-origin:top left;
  border-top:2.5px solid var(--mdc-c,#C8102E); border-left:2.5px solid var(--mdc-c,#C8102E);
  border-top-left-radius:8px; }
.md-corners::after{ bottom:-3px; right:-3px; transform-origin:bottom right;
  border-bottom:2.5px solid var(--mdc-c,#C8102E); border-right:2.5px solid var(--mdc-c,#C8102E);
  border-bottom-right-radius:8px; }
.md-corners.in::before,.md-corners.in::after{ opacity:1; transform:scale(1); }
.md-corners.in:hover::before{ transform:scale(1) translate(-3px,-3px); }
.md-corners.in:hover::after{ transform:scale(1) translate(3px,3px); }
[data-motion="off"] .md-corners::before,[data-motion="off"] .md-corners::after{ opacity:1; transform:none; transition:none; }

/* ---- underglow ---- */
.md-underglow{ box-shadow:0 14px 40px -12px var(--mdg-c,rgba(200,16,46,.35)); }
.md-underglow.breathe{ animation: md-underglow 5s ease-in-out infinite; }
@keyframes md-underglow{
  0%,100%{ box-shadow:0 14px 40px -12px var(--mdg-c,rgba(200,16,46,.28)); }
  50%    { box-shadow:0 18px 52px -10px var(--mdg-c,rgba(200,16,46,.5)); }
}

/* ---- governor / reduced-motion ---- */
:root[data-motion="lite"] .md-border, :root[data-motion="off"] .md-border,
:root[data-motion="lite"] .md-border.glow::after, :root[data-motion="off"] .md-border.glow::after,
:root[data-motion="lite"] .md-underglow.breathe, :root[data-motion="off"] .md-underglow.breathe{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .md-border,.md-border.glow::after,.md-underglow.breathe{ animation:none; }
  .md-corners::before,.md-corners::after{ opacity:1; transform:none; transition:none; }
}