/* Gradient-glow card border + hover glow/tilt, applied to every card-like
   element across all 21 research pages. Different pages mark their cards
   with different attributes (data-card, data-phys, data-terminal,
   data-syco, data-fail, data-enable all show up as the actual card box on
   one page or another - data-marquee is a scrolling ticker strip, not a
   card, so it's excluded), so every rule targets the full group rather
   than just [data-card] - otherwise pages that only use one of the other
   markers would get none of this. Adapted from a standalone
   React/styled-components snippet that assumed its own two-layer DOM
   (.card > .card-info) - that structure doesn't exist here, and each
   page's cards already have their own varied backgrounds (bright accent
   colors on some, dark on others), so this only adds the border + glow
   rather than replacing `background`, which would have clobbered existing
   content. */

:is([data-card], [data-phys], [data-terminal], [data-syco], [data-fail], [data-enable]) {
  position: relative;
  z-index: 1;
  border: 2px solid transparent;
  border-radius: 0.7rem;
  border-image: linear-gradient(to right, #13b37f 0%, #11a3c8 100%) 1;
  /* --reveal-y (auto-reveal.js, scroll-in entrance) and --tilt-x/--tilt-y
     (card-tilt.js, hover swivel) are two independent scripts that both
     need to affect this element's transform - composed into one rule here
     so setting one custom property never clobbers the other's effect.
     !important because each page's own pre-existing legacy [data-reveal]
     inline script ALSO sets a literal `transform` directly on this same
     element (its own now-superseded reveal animation) - a plain inline
     style always wins over a stylesheet rule for the same property
     regardless of specificity, so without !important this rule would be
     silently ignored the moment that legacy script runs. */
  transform:
    translateY(var(--reveal-y, 0px))
    scale(var(--reveal-scale, 1))
    perspective(800px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg)) !important;
  transform-style: preserve-3d;
  transition: transform 125ms ease-out;
  will-change: transform;
}

:is([data-card], [data-phys], [data-terminal], [data-syco], [data-fail], [data-enable])::after {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, #13b37f 0%, #11a3c8 100%);
  filter: blur(28px);
  opacity: 0.45;
  transition: opacity 0.5s;
  pointer-events: none;
}

:is([data-card], [data-phys], [data-terminal], [data-syco], [data-fail], [data-enable]):hover::after {
  opacity: 0.75;
  animation: card-hue-cycle 3s linear infinite;
}

@keyframes card-hue-cycle {
  from { filter: blur(28px) hue-rotate(0deg); }
  to   { filter: blur(28px) hue-rotate(360deg); }
}

/* Two blurred glow blobs that drift on hover, adapted from a Tailwind
   snippet's before:/after: pseudo-elements (orange top-right blob, sky-blue
   bottom-right blob, each translating on group-hover). ::after is already
   the border halo above, so both blobs live in ::before instead, as two
   independently-positioned background layers - `background-position`
   supports one value per layer and each transitions on its own. */
:is([data-card], [data-phys], [data-terminal], [data-syco], [data-fail], [data-enable])::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(251,146,60,0.55), transparent 70%),
    radial-gradient(circle, rgba(56,189,248,0.5), transparent 70%);
  background-repeat: no-repeat;
  background-size: 110px 110px, 160px 160px;
  background-position: 90% 85%, 90% 10%;
  filter: blur(22px);
  transition: background-position 500ms ease;
}

:is([data-card], [data-phys], [data-terminal], [data-syco], [data-fail], [data-enable]):hover::before {
  background-position: 65% 100%, 110% -10%;
  animation: card-hue-cycle-blur22 3s linear infinite;
}

@keyframes card-hue-cycle-blur22 {
  from { filter: blur(22px) hue-rotate(0deg); }
  to   { filter: blur(22px) hue-rotate(360deg); }
}