/* ShineCard — Originkit
 * Solo movimiento + iluminación de bordes
 * Responsive-first, respeta prefers-reduced-motion
 */
:root {
  --sc-dpr-limit: 2;
  --sc-render-scale: 1.8;
  --sc-tilt-amount: 8deg;
  --sc-hover-scale: 1.011;
  --sc-border-opacity: 0.08;
  --sc-border-opacity-hover: 0.14;
  --sc-border-opacity-active: 0.18;
  --sc-border-blend: screen;
  --sc-wave-speed: 0.24;
  --sc-density: 44;
  --sc-sparkle: 0.04;
}

.shine-card-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  isolation: isolate;
  contain: paint;
  border-radius: inherit;
  transform: translateZ(0);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.shine-card-wrap.platform-card {
  border-radius: 9999px;
}

.shine-card-wrap.plan-card {
  border-radius: 0.75rem;
}

.shine-card-wrap .canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.shine-card-wrap.is-ready .canvas {
  opacity: 1;
}

.shine-card-wrap.is-paused .canvas {
  opacity: 0.4;
}

.shine-card-wrap .shine-card-content {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  transform: translateZ(0);
}

/* El panel opaco debe cubrir SIEMPRE todo el wrap. El wrap se estira a la
 * fila del grid (la card más alta), así que un panel sin h-full deja una
 * franja sin fondo al pie: ahí se ve el canvas WebGL en crudo y aparece una
 * "barra de color" bajo la card más corta. */
.shine-card-wrap .shine-card-content > :only-child {
  min-height: 100%;
}

.shine-card-wrap .border-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
      120% 120% at 50% 0%,
      color-mix(in srgb, currentColor 28%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      90% 90% at 50% 100%,
      color-mix(in srgb, currentColor 16%, transparent) 0%,
      transparent 80%
    ),
    conic-gradient(
      from 180deg at 50% 50%,
      color-mix(in srgb, currentColor 10%, transparent) 0deg,
      transparent 120deg,
      color-mix(in srgb, currentColor 8%, transparent) 240deg,
      transparent 360deg
    );
  opacity: var(--sc-border-opacity);
  mix-blend-mode: var(--sc-border-blend);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.shine-card-wrap.platform-card .border-glow {
  border-radius: 9999px;
}

.shine-card-wrap.plan-card .border-glow {
  border-radius: 0.75rem;
  background: radial-gradient(
      140% 120% at 50% 0%,
      color-mix(in srgb, var(--tc-accent, currentColor) 26%, transparent) 0%,
      transparent 72%
    ),
    radial-gradient(
      90% 90% at 50% 100%,
      color-mix(in srgb, var(--tc-accent, currentColor) 14%, transparent) 0%,
      transparent 82%
    ),
    conic-gradient(
      from 180deg at 50% 50%,
      color-mix(in srgb, var(--tc-accent, currentColor) 8%, transparent) 0deg,
      transparent 140deg,
      color-mix(in srgb, var(--tc-accent, currentColor) 6%, transparent) 280deg,
      transparent 360deg
    );
}

.shine-card-wrap:hover .border-glow,
.shine-card-wrap.is-active .border-glow,
.shine-card-wrap:focus-visible .border-glow {
  opacity: var(--sc-border-opacity-hover);
}

.shine-card-wrap:active .border-glow {
  opacity: var(--sc-border-opacity-active);
}

.shine-card-wrap:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  outline-offset: 2px;
  border-radius: inherit;
}

@media (hover: none) and (pointer: coarse) {
  :root {
    --sc-tilt-amount: 4deg;
    --sc-hover-scale: 1.005;
    --sc-render-scale: 1.5;
    --sc-border-opacity: 0.07;
    --sc-border-opacity-hover: 0.1;
    --sc-border-opacity-active: 0.12;
  }
  .shine-card-wrap .canvas {
    transition: opacity 140ms ease-out;
  }
}

@media (max-width: 480px) {
  :root {
    --sc-tilt-amount: 3.5deg;
    --sc-hover-scale: 1.004;
    --sc-render-scale: 1.45;
    --sc-density: 42;
    --sc-sparkle: 0.035;
  }
}

@media (min-width: 1280px) {
  :root {
    --sc-render-scale: 1.85;
    --sc-density: 44;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shine-card-wrap,
  .shine-card-wrap .canvas,
  .shine-card-wrap .border-glow {
    transition: none !important;
    animation: none !important;
  }
  .shine-card-wrap .canvas {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .shine-card-wrap {
    will-change: auto !important;
    transform: none !important;
  }
  .shine-card-wrap .border-glow {
    opacity: var(--sc-border-opacity) !important;
  }
}