/* assets/fx.css — vanilla ports of the React Bits effects, token-driven so
   they work in both themes. Every animation freezes under
   prefers-reduced-motion. */

/* ── StarBorder: rotating gradient ring for primary CTAs ── */
.star-border {
  position: relative;
  display: inline-flex;
  border-radius: 11px;
  padding: 1px;
  overflow: hidden;
  isolation: isolate;
}
.star-border::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 340%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0turn);
  background: conic-gradient(
    transparent 0turn,
    transparent 0.58turn,
    var(--cta-hover) 0.74turn,
    var(--accent-primary) 0.88turn,
    transparent 1turn
  );
  animation: sb-spin 3.2s linear infinite;
}
.star-border > * {
  position: relative;
  border-radius: 10px;
  width: 100%;
}
@keyframes sb-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* ── BorderGlow: cursor-tracking spotlight on cards (fx.js sets --gx/--gy) ── */
.glow-card { position: relative; }
.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%),
              var(--glow), transparent 68%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.glow-card:hover::after { opacity: 1; }

/* ── Bento layout for the features section ── */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
}
.bento > * { grid-column: span 2; }
.bento > *:nth-child(1),
.bento > *:nth-child(2) { grid-column: span 3; }
@media (max-width: 960px) {
  .bento > *, .bento > *:nth-child(1), .bento > *:nth-child(2) { grid-column: span 3; }
}
@media (max-width: 600px) {
  .bento > *, .bento > *:nth-child(1), .bento > *:nth-child(2) { grid-column: span 6; }
}

/* ── TextType: typewriter tagline (fx.js drives it; caret is CSS) ── */
.type-line { min-height: 1.5em; }
.type-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent-primary);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .star-border::before { animation: none; }
  .type-caret { animation: none; }
  .glow-card::after { display: none; }
}