/* ============================================================
   ScreenshotInk — v2 "glow" design language (shared layer).
   Loads AFTER ink.css + tailwind.css. Pairs with js/glow.js
   (cursor spotlight + starfield). Card spotlight is safe on
   every .card (isolation + z-index:-1 keeps it behind content).
   ============================================================ */

/* whole site sits on the deepest surface in v2 */
body { background: var(--ink-bg-0); }

/* ---------- Hover spotlight on every card ---------- */
.card { position: relative; isolation: isolate; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(110,92,255,.16), rgba(110,92,255,.05) 42%, transparent 66%);
}
.card:hover::after { opacity: 1; }

/* ---------- glow-card: card + top sheen + cursor spotlight ---------- */
.glow-card {
  position: relative; isolation: isolate;
  background: var(--ink-bg-2); border: 1px solid var(--ink-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.glow-card:hover { border-color: rgba(139,123,255,.28); transform: translateY(-4px); }
.glow-card::before {
  content: ""; position: absolute; top: -55%; left: 50%; transform: translateX(-50%);
  width: 75%; height: 130px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(110,92,255,.12), transparent 72%);
  filter: blur(26px); opacity: .5;
}
.glow-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(110,92,255,.20), rgba(110,92,255,.06) 40%, transparent 66%);
}
.glow-card:hover::after { opacity: 1; }
.glow-card > * { position: relative; z-index: 1; }   /* content above the spotlight */

/* ---------- Portal hero atmosphere (homepage) ---------- */
.portal-hero { position: relative; overflow: hidden; }
.stars, .stars2 { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stars i, .stars2 i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; }
.stars2 i { animation: twinkle 3.5s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.15} 50%{opacity:.9} }

.rays {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 160%; height: 120%; z-index: 0;
  background: repeating-conic-gradient(from -98deg at 50% 0%,
    rgba(139,123,255,.16) 0deg, rgba(139,123,255,0) 3deg 13deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 10%, transparent 70%);
  animation: raysBreathe 12s ease-in-out infinite;
}
@keyframes raysBreathe { 0%,100%{opacity:.6} 50%{opacity:1} }

.portal-glow {
  position: absolute; left: 68%; top: 44%; z-index: 0;
  width: min(1000px, 105vw); height: 760px; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 56% at 50% 50%, rgba(160,146,255,.8), rgba(110,92,255,.3) 38%, transparent 72%),
    radial-gradient(ellipse 72% 82% at 50% 58%, rgba(73,54,201,.45), transparent 70%);
  filter: blur(12px); animation: portalPulseMove 7s ease-in-out infinite;
}
@keyframes portalPulse { 0%,100%{opacity:.85; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.05)} }
/* parallax-aware pulse: --gx/--gy are eased toward the cursor in glow.js */
@keyframes portalPulseMove {
  0%,100%{ opacity:.85; transform: translate(calc(-50% + var(--gx,0px)), calc(-50% + var(--gy,0px))) scale(1); }
  50%    { opacity:1;   transform: translate(calc(-50% + var(--gx,0px)), calc(-50% + var(--gy,0px))) scale(1.05); }
}
.portal-core {
  position: absolute; left: 50%; top: 62%; z-index: 0;
  transform: translate(calc(-50% + (var(--gx,0px) * 1.3)), calc(-50% + (var(--gy,0px) * 0.6)));
  width: 60%; height: 3px; background: linear-gradient(90deg, transparent, var(--ink-accent-hi), transparent);
  box-shadow: 0 0 50px 14px rgba(139,123,255,.5);
}
.hero-grid-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 0;
  background-image: linear-gradient(rgba(139,123,255,.14) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(139,123,255,.10) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(420px) rotateX(58deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 75%);
          mask-image: linear-gradient(to top, #000, transparent 75%); opacity: .5;
}

/* floating, tilted product card with under-glow */
.float-card { animation: floaty 7s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes floaty { 0%,100%{transform: perspective(1600px) rotateX(7deg) translateY(0)} 50%{transform: perspective(1600px) rotateX(7deg) translateY(-12px)} }
.float-card .stamp-frame { box-shadow: 0 40px 80px -20px rgba(73,54,201,.55), 0 0 0 1px rgba(139,123,255,.25), 0 0 60px rgba(110,92,255,.25); }

.pill-trial {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid rgba(139,123,255,.4); background: rgba(110,92,255,.1); color: var(--ink-accent-hi);
  font-size: .8rem; font-weight: 600;
}
.pill-trial::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-success); box-shadow: 0 0 8px var(--ink-success); }

/* final CTA portal */
.cta-portal { position: relative; overflow: hidden; border: 1px solid rgba(139,123,255,.25); border-radius: var(--r-xl); background: var(--ink-bg-1); }
.cta-portal .cglow {
  position: absolute; left: 50%; top: 0; transform: translate(-50%,-55%); width: 680px; height: 360px;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(139,123,255,.55), rgba(73,54,201,.2) 45%, transparent 72%);
  filter: blur(12px); animation: portalPulse 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .float-card { transform: perspective(1600px) rotateX(7deg); }
}