/* Cursor-following shine on landing cards. Light theme, teal accent. */

:root {
  --se-shine-tint: 13, 148, 136;
  --se-shine-wash: 0.1;
  --se-shine-edge: 0.42;
}

@media (prefers-color-scheme: dark) {
  :root {
    --se-shine-tint: 94, 234, 212;
    --se-shine-wash: 0.14;
    --se-shine-edge: 0.5;
  }
}

/* Pointer-driven only: on touch there is no cursor to follow and cards would
   sit in a stuck highlight state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .se-shine {
    position: relative;
    isolation: isolate;
  }

  /* Soft wash that follows the cursor. Negative index keeps it above the card
     background but under the content, so children need no stacking changes. */
  .se-shine::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      220px circle at var(--se-shine-x, 50%) var(--se-shine-y, 50%),
      rgba(var(--se-shine-tint), var(--se-shine-wash)) 0%,
      rgba(var(--se-shine-tint), calc(var(--se-shine-wash) * 0.35)) 42%,
      transparent 78%
    );
    transition: opacity 0.4s ease-out;
  }

  /* 1px gradient edge: masked to the border box so only the outline lights up. */
  .se-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    padding: 1px;
    background: radial-gradient(
      180px circle at var(--se-shine-x, 50%) var(--se-shine-y, 50%),
      rgba(var(--se-shine-tint), var(--se-shine-edge)) 0%,
      rgba(var(--se-shine-tint), calc(var(--se-shine-edge) * 0.3)) 45%,
      transparent 82%
    );
    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 0.4s ease-out;
  }

  .se-shine[data-shine-active]::before,
  .se-shine[data-shine-active]::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .se-shine::before,
  .se-shine::after {
    display: none;
  }
}