/* OriginKit → SMCP (vanilla). orbit-border, shine-card, spotlighttext, reactivegrid. */

@property --ok-orbit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

html {
  --ok-x: 50%;
  --ok-y: 38%;
}

/* ── Orbit Border (comet sur le contour) ── */
.btn.primary,
.btn-discord,
.nav a.nav__cta {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.btn.primary::before,
.btn-discord::before,
.nav a.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ok-orbit),
    transparent 0 68%,
    rgba(255, 255, 255, 0) 74%,
    rgba(255, 255, 255, 0.95) 88%,
    #FFE566 94%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ok-orbit 2.8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.btn.ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--ok-orbit),
    transparent 0 70%,
    rgba(253, 201, 24, 0) 78%,
    #FFE566 90%,
    #FDC918 96%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ok-orbit 3.4s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}

@keyframes ok-orbit {
  to { --ok-orbit: 360deg; }
}

/* ── Shine Card (halo qui suit le curseur) ── */
.card,
.stat-card,
.dash-quick__card,
.dash-stat,
.wh-action-card,
.landing-feature,
.guides-hub__extra {
  --shine-x: 50%;
  --shine-y: 0%;
}

.card::after,
.stat-card::after,
.dash-quick__card::after,
.dash-stat::after,
.wh-action-card::after,
.landing-feature::after,
.guides-hub__extra::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    220px circle at var(--shine-x) var(--shine-y),
    rgba(255, 229, 102, 0.16),
    transparent 58%
  );
  transition: opacity var(--t-normal);
}

.card,
.stat-card,
.dash-quick__card,
.dash-stat,
.wh-action-card,
.landing-feature,
.guides-hub__extra {
  position: relative;
}

.card:hover::after,
.stat-card:hover::after,
.dash-quick__card:hover::after,
.dash-stat:hover::after,
.wh-action-card:hover::after,
.landing-feature:hover::after,
.guides-hub__extra:hover::after {
  opacity: 1;
}


/* ── Spotlight Text ── */
.ok-spotlight {
  position: relative;
}

.ok-spotlight__lit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  -webkit-mask-image: radial-gradient(
    circle 140px at var(--ok-spot-x, 50%) var(--ok-spot-y, 50%),
    #000 18%,
    transparent 72%
  );
  mask-image: radial-gradient(
    circle 140px at var(--ok-spot-x, 50%) var(--ok-spot-y, 50%),
    #000 18%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 220ms ease;
}

.ok-spotlight:hover .ok-spotlight__lit,
.ok-spotlight.is-lit .ok-spotlight__lit {
  opacity: 1;
}

.ok-spotlight .grad {
  /* le calque lit remplace le gradient dans le halo */
}

/* ── Reactive grid (suivi curseur, overlay) ── */
.ok-grid-follow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 280px at var(--ok-x) var(--ok-y), rgba(253, 201, 24, 0.11), transparent 68%),
    linear-gradient(rgba(253, 201, 24, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253, 201, 24, 0.07) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  background-position: 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(circle 260px at var(--ok-x) var(--ok-y), #000 10%, transparent 72%);
  mask-image: radial-gradient(circle 260px at var(--ok-x) var(--ok-y), #000 10%, transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .btn.primary::before,
  .btn-discord::before,
  .nav a.nav__cta::before,
  .btn.ghost::after,
  .ok-grid-follow,
  .card::after,
  .stat-card::after,
  .dash-quick__card::after,
  .dash-stat::after,
  .wh-action-card::after,
  .landing-feature::after,
  .guides-hub__extra::after,
  .ok-spotlight__lit {
    animation: none !important;
    opacity: 0 !important;
  }
}