/* ==========================================================================
   MOTION LAYER: smooth, glowing, slow.
   Loaded after styles.min.css on the marketing pages, paired with
   /assets/motion.js. Adds polish on top of the existing system rather than
   restyling it:
     - reveals arrive with a soft blur-in instead of a plain fade
     - glass cards carry a spotlight that follows the cursor
     - primary buttons breathe and catch a sweep of light on hover
     - section headings type themselves out and sit on a flowing accent line
     - a brand-gradient scrollbar
   Every animation stops under prefers-reduced-motion (block at the end).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal: blur-in, a little slower and softer.
   -------------------------------------------------------------------------- */
.reveal {
  filter: blur(8px);
  transform: translateY(26px) scale(.985);
  transition:
    opacity 1s var(--ease-spring),
    transform 1s var(--ease-spring),
    filter 1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible { filter: none; transform: none; }

/* --------------------------------------------------------------------------
   Section headings: flowing accent line + typing caret.
   -------------------------------------------------------------------------- */
.section-head h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: .7rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-light), var(--accent), var(--glow), transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 16px rgba(125,255,77,.45);
  animation: flow-line 4.5s linear infinite;
  opacity: .9;
}
/* Left-aligned heads keep the line on the left. */
.section-head[style*="text-align:left"] h2::after,
.section-head.left h2::after { margin-left: 0; }
@keyframes flow-line { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* While a heading types, it reserves its finished height (set inline by
   motion.js) so nothing below it moves. */
.tw-typing { position: relative; }

/* The hero caret glows a little more than it used to. */
.tw-caret { box-shadow: 0 0 10px rgba(125,255,77,.7), 0 0 2px rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   Glass spotlight: a soft light under the cursor and a brighter rim.
   motion.js sets --mx / --my on the card being hovered.
   -------------------------------------------------------------------------- */
.glass.spot {
  background-image:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(157,111,255,.10), transparent 45%),
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(125,255,77,.07), transparent 60%);
}
.glass.spot.spot-on {
  border-color: rgba(157,111,255,.32);
  transition: border-color .4s ease, box-shadow .4s ease, transform .45s var(--ease-spring);
}

/* --------------------------------------------------------------------------
   Buttons: a sheen that sweeps across on hover, and a slow breathing glow
   on the primary call to action.
   -------------------------------------------------------------------------- */
.btn::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::after { animation: btn-sheen .9s var(--ease-out) forwards; }
@keyframes btn-sheen {
  0%   { opacity: 0; transform: skewX(-20deg) translateX(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-20deg) translateX(420%); }
}
.btn-primary { animation: btn-breathe 4.2s ease-in-out infinite; }
.btn-primary:hover { animation-play-state: paused; }
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(124,58,237,.35), 0 8px 30px rgba(124,58,237,.30); }
  50%      { box-shadow: 0 0 0 1px rgba(157,111,255,.55), 0 10px 42px rgba(124,58,237,.55), 0 0 22px rgba(125,255,77,.16); }
}

/* Eyebrow pills glow softly so each section announces itself. */
.eyebrow { box-shadow: 0 0 22px rgba(125,255,77,.08); transition: box-shadow .4s ease; }
.section-head:hover .eyebrow { box-shadow: 0 0 26px rgba(125,255,77,.22); }

/* Cards and modules settle in with a springier lift. */
.module-card, .price-card, .diagram-card { transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring), border-color .35s ease; }

/* Links in body copy get an underline that draws in. */
.page-prose a, .faq-a a, .section-head p a {
  background-image: linear-gradient(90deg, var(--accent), var(--primary-light));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .45s var(--ease-out), color .2s ease;
}
.page-prose a:hover, .faq-a a:hover, .section-head p a:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   Scrollbar in the brand gradient.
   -------------------------------------------------------------------------- */
html { scrollbar-color: #4C1D95 var(--void); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid var(--void);
  background: linear-gradient(180deg, var(--primary-light), var(--primary) 60%, var(--accent));
}

/* --------------------------------------------------------------------------
   Reduced motion: final states, no movement, no blur.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { filter: none !important; transform: none !important; }
  .section-head h2::after, .btn-primary, .btn:hover::after { animation: none !important; }
  .glass.spot { background-image: none; }
}