/* =================================
   Space Vanta Theme 1.0
   Motion: Find and Privilege interactions
   Path: public/header/motion/interact.css

   Find       idle drift, light that crosses the plate, press flash,
              cube reacting to typing
   Privilege  gleam across the metal, travelling edge light, gem
              turning on hover, press flash, member breathing
   Shards:    .sv-fx__shard (created by interact.js)
   All of it sits in prefers-reduced-motion: no-preference.
   ================================= */

.sv-fx { position: fixed; inset: 0; z-index: 10050; pointer-events: none; overflow: hidden; }
.sv-fx__shard {
  position: absolute;
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, #b9c1ce 100%);
  clip-path: polygon(0 0, 100% 35%, 30% 100%);
  filter: drop-shadow(0 0 3px rgba(29, 107, 255, 0.45));
  will-change: transform, opacity;
}
.sv-fx__shard--blue { background: linear-gradient(135deg, #a9ccff 0%, #1d6bff 100%); filter: drop-shadow(0 0 5px rgba(29, 107, 255, 0.8)); }

/* travelling light under the Privilege tag needs a place to live */
.sv-featured__privilege::after,
.sv-strip__privilege::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 8px; bottom: 0;
  width: 34px; height: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff 40%, var(--sv-blue-2, #4d8dff) 70%, transparent);
  box-shadow: 0 0 8px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
}

@media (prefers-reduced-motion: no-preference) {

  /* ============ Find ============ */

  /* idle: the cube is never quite still */
  .sv-find-trigger .sv-cube__float { animation: sv-bob 5.2s ease-in-out infinite alternate; }
  .sv-find-trigger .sv-cube__core { animation: sv-core-pulse 3.4s ease-in-out infinite alternate; }
  .sv-find-trigger .sv-find-trigger__sheen::before { animation: sv-sheen-idle 8s 2.4s ease-in-out infinite; }
  .sv-find-trigger:hover .sv-find-trigger__sheen::before { animation: sv-sheen 0.95s ease both; }
  .sv-find-trigger:hover .sv-cube__float { animation: none; }
  .sv-find-trigger:hover .sv-cube__core { animation: sv-core-pulse 0.9s ease-in-out infinite alternate; }

  /* press: plate lights up blue and the edge flashes */
  .sv-find-trigger.is-fired::before { background: linear-gradient(135deg, #cfe0ff 0%, var(--sv-blue, #1d6bff) 50%, #9ec0ff 100%); }
  .sv-find-trigger.is-fired .sv-cube__seam { animation: sv-seam-flash 0.6s ease; }
  .sv-find-trigger.is-fired { animation: sv-press 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* typing: each key nudges the shards */
  .sv-find__icon .sv-cube { transition: transform 0.18s ease; }
  .sv-find__icon.is-tick .sv-cube { transform: translate(calc(var(--fx, 0) * 0.1), calc(var(--fy, 0) * 0.1)) rotate(calc(var(--k, 0) * 2deg - 5deg)); }
  .sv-find__icon.is-tick .sv-cube__core { transform: scale(1.5); transition: transform 0.18s ease; }
  .sv-find__icon.is-tick .sv-cube__seam { stroke-width: 1.8; }

  /* ============ Privilege ============ */

  /* gleam: a band of light slides across the metal now and then */
  .sv-priv__shape::before {
    background:
      linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.95) 46% 54%, transparent 60% 100%) -140% 0 / 70% 100% no-repeat,
      linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.85) 48% 53%, transparent 53% 100%),
      linear-gradient(135deg, #fffefc 0%, #f1ede5 55%, #ddd7cb 100%);
    animation: sv-gleam 6.5s 1.6s ease-in-out infinite;
  }
  .sv-featured__privilege:hover .sv-priv__shape::before,
  .sv-strip__privilege:hover .sv-priv__shape::before { animation: sv-gleam 1.1s ease-out 1; }

  /* guest: light travels along the bottom edge, inviting */
  .sv-featured__privilege[data-state="guest"]::after,
  .sv-strip__privilege[data-state="guest"]::after { animation: sv-edge-run 4.2s 0.8s ease-in-out infinite; }

  /* the corner shard floats */
  .sv-priv__shard { animation: sv-bob 4.4s ease-in-out infinite alternate; }

  /* hover: the gem turns over, label rises a touch */
  .sv-featured__privilege .sv-icon-gem,
  .sv-strip__privilege .sv-icon-gem { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: center; }
  .sv-featured__privilege:hover .sv-icon-gem,
  .sv-strip__privilege:hover .sv-icon-gem { transform: rotateY(360deg) scale(1.15); }
  .sv-featured__privilege:hover .sv-priv__shard { animation-duration: 1.2s; }
  .sv-featured__privilege:hover .sv-icon-gem__core,
  .sv-strip__privilege:hover .sv-icon-gem__core { animation: sv-core-pulse 0.7s ease-in-out infinite alternate; }

  /* press */
  .sv-featured__privilege.is-fired,
  .sv-strip__privilege.is-fired { animation: sv-press 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sv-featured__privilege.is-fired .sv-priv__shape::after,
  .sv-strip__privilege.is-fired .sv-priv__shape::after { animation: sv-edge-flash 0.7s ease; }

  /* member: the edge breathes, the gem core beats */
  .sv-featured__privilege[data-state="member"] .sv-priv__shape::after,
  .sv-strip__privilege[data-state="member"] .sv-priv__shape::after { animation: sv-aura 3.2s ease-in-out infinite alternate; }
  .sv-featured__privilege[data-state="member"] .sv-icon-gem__core,
  .sv-strip__privilege[data-state="member"] .sv-icon-gem__core { transform-box: fill-box; transform-origin: center; animation: sv-core-pulse 2.4s ease-in-out infinite alternate; }

  @keyframes sv-bob { from { translate: 0 0; } to { translate: 1.5px -2px; } }
  @keyframes sv-sheen-idle { 0%, 70% { left: -45%; } 88%, 100% { left: 120%; } }
  @keyframes sv-seam-flash { 0%, 100% { stroke-width: 1.2; } 40% { stroke-width: 2.6; } }
  @keyframes sv-press { 0% { transform: scale(1); } 30% { transform: scale(0.96); } 100% { transform: scale(1); } }
  @keyframes sv-gleam { 0%, 62% { background-position: -140% 0, 0 0, 0 0; } 82%, 100% { background-position: 240% 0, 0 0, 0 0; } }
  @keyframes sv-edge-run {
    0%, 55% { left: 8px; opacity: 0; }
    62% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - 14px - 34px); opacity: 0; }
  }
  @keyframes sv-edge-flash { 0%, 100% { height: 2px; } 35% { height: 5px; box-shadow: 0 0 20px var(--sv-blue-glow), 0 0 6px var(--sv-blue); } }
  @keyframes sv-aura { from { box-shadow: 0 0 8px var(--sv-blue-glow), 0 0 2px var(--sv-blue); } to { box-shadow: 0 0 18px var(--sv-blue-glow), 0 0 5px var(--sv-blue); } }
}