/* Glance site: extra motion. Separate from style.css so it can be removed in one line.
   Everything here is decoration. Nothing changes layout or any click area. */

/* ---------- Scroll progress line ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; pointer-events: none; }
.progress i {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(255, 214, 10, 0.6);
}

/* ---------- Nav: stronger when scrolled, underline that follows the section ---------- */
.nav { transition: background .3s ease, box-shadow .3s ease; }
.nav.scrolled { background: rgba(8, 8, 12, 0.82); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }
.nav-links a:not(.btn) { position: relative; transition: color .2s ease; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.nav-links a.on { color: var(--text); }
.nav-links a.on::after, .nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* ---------- Aurora: three slow lights behind the page ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.aurora i {
  position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle at 50% 50%, var(--c), transparent 62%);
}
.aurora i:nth-child(1) { --c: rgba(255, 214, 10, 0.13); left: -18vmax; top: -24vmax; }
.aurora i:nth-child(2) { --c: rgba(107, 92, 255, 0.15); right: -24vmax; top: 18vh; }
.aurora i:nth-child(3) { --c: rgba(255, 149, 0, 0.10); left: 16vw; bottom: -34vmax; }
@media (prefers-reduced-motion: no-preference) {
  .aurora i:nth-child(1) { animation: drift1 28s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation: drift2 34s ease-in-out infinite alternate; }
  .aurora i:nth-child(3) { animation: drift3 40s ease-in-out infinite alternate; }
}
@keyframes drift1 { to { transform: translate3d(22vmax, 14vmax, 0) scale(1.18); } }
@keyframes drift2 { to { transform: translate3d(-20vmax, 16vmax, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(18vmax, -14vmax, 0) scale(1.12); } }

/* A soft light that follows the pointer (fine pointers only, added by fx.js) */
.cursorglow {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .6s ease; will-change: transform;
  background: radial-gradient(circle, rgba(255, 214, 10, 0.075), transparent 62%);
}
.cursorglow.on { opacity: 1; }

/* ---------- Hero: twinkling stars, logo that leans toward the pointer ---------- */
.hero-inner { position: relative; z-index: 1; }
.twinkles { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: transform .5s ease-out; transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -10px), 0); }
.twinkles svg { position: absolute; width: var(--s); height: var(--s); fill: var(--accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .twinkles svg { animation: twk var(--d) ease-in-out var(--dl) infinite; }
}
@keyframes twk { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: var(--o); transform: scale(1) rotate(45deg); } }
.hero-logo { transition: rotate .5s ease-out; }

/* ---------- Buttons: a soft shine that sweeps across the main button ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn.primary {
    background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%), linear-gradient(180deg, #ffe45c, var(--accent));
    background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 230% 0, 0 0;
    animation: shine 5s ease-in-out infinite;
  }
}
@keyframes shine { 0%, 58% { background-position: 230% 0, 0 0; } 100% { background-position: -130% 0, 0 0; } }

/* ---------- Cards: a light that follows the pointer, icon that wakes up ---------- */
.spot { position: relative; }
.spot-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 10, 0.15), transparent 62%);
}
.spot:hover > .spot-glow { opacity: 1; }
.ico { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s ease; }
.card:hover .ico { transform: translateY(-2px) rotate(-6deg) scale(1.08); box-shadow: 0 10px 26px rgba(255, 214, 10, 0.22); }

/* ---------- Price card: a light that runs around the border ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.price-card { position: relative; }
.price-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(255, 214, 10, 0.95) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .price-card::before { animation: spinang 7s linear infinite; }
}
@keyframes spinang { to { --ang: 360deg; } }

/* ---------- Section headings: words rise in one after another ---------- */
.fx .reveal h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.fx .reveal h2 .w > span {
  display: inline-block; transform: translateY(108%); opacity: 0;
  transition: transform .85s cubic-bezier(.16, .8, .24, 1), opacity .5s ease;
  transition-delay: calc(var(--i, 0) * 55ms + .12s);
}
.fx .reveal.in h2 .w > span { transform: none; opacity: 1; }

/* Stats numbers get a slow shimmer once they are on screen */
@media (prefers-reduced-motion: no-preference) {
  .stat .num { background-size: 100% 220%; animation: numshift 6s ease-in-out infinite alternate; }
}
@keyframes numshift { from { background-position: 0 0; } to { background-position: 0 100%; } }