/* Motion layer: shared by every page, paired with gyd-motion.js.
   Everything here is an enhancement. With "reduce motion" on, or if the script never runs, pages look exactly as designed. */
:root {
  --gm-ease: cubic-bezier(.16, 1, .3, 1);
  --gm-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. page-to-page transitions (browsers that support them; the rest just load normally) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: gm-nav; }
::view-transition-old(root) { animation: .2s var(--gm-soft) both gm-vt-out; }
::view-transition-new(root) { animation: .5s var(--gm-ease) both gm-vt-in; }
@keyframes gm-vt-out { to { opacity: 0; } }
@keyframes gm-vt-in { from { opacity: 0; transform: translateY(10px); } }
@supports not (view-transition-name: none) { body { animation: gm-page-in .45s ease both; } }
@keyframes gm-page-in { from { opacity: 0; } }

/* ---------- 2. hidden-first (only while the script is about to take over; a failsafe shows everything after 2.4 s) ---------- */
html.gm-pre:not(.gm-on) body[data-gm="full"] .container > *,
html.gm-pre:not(.gm-on) body[data-gm="full"] .wrap > *,
html.gm-pre:not(.gm-on) body[data-gm="report"] .report-body > * { opacity: 0; animation: gm-failsafe .01s 2.4s forwards; }
@keyframes gm-failsafe { to { opacity: 1; } }

/* ---------- 3. scroll reveal ---------- */
html.gm-on [data-gm-r] {
  opacity: 0; transform: translate3d(0, 28px, 0) scale(.985);
  transition: opacity .8s var(--gm-ease), transform .95s var(--gm-ease), filter .8s var(--gm-ease);
  transition-delay: calc(var(--gm-i, 0) * 70ms);
}
html.gm-on [data-gm-r="blur"] { filter: blur(8px); transform: translate3d(0, 20px, 0); }
html.gm-on [data-gm-r="fade"] { transform: none; }
html.gm-on [data-gm-r].gm-in { opacity: 1; transform: none; filter: none; }

/* ---------- 4. aurora: slow drifting light behind every page ---------- */
.gm-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gm-aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.gm-aurora i:nth-child(1) { width: min(62vmax, 720px); height: min(62vmax, 720px); left: -14vmax; top: -18vmax; background: radial-gradient(circle, rgba(139,92,246,.30), transparent 62%); animation: gm-drift-a 28s ease-in-out infinite; }
.gm-aurora i:nth-child(2) { width: min(58vmax, 680px); height: min(58vmax, 680px); right: -14vmax; bottom: -18vmax; background: radial-gradient(circle, rgba(99,102,241,.26), transparent 62%); animation: gm-drift-b 34s ease-in-out infinite; }
.gm-aurora i:nth-child(3) { width: min(40vmax, 480px); height: min(40vmax, 480px); left: 38%; top: 30%; background: radial-gradient(circle, rgba(217,70,239,.14), transparent 62%); animation: gm-drift-c 40s ease-in-out infinite; }
@keyframes gm-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8vmax, 6vmax, 0) scale(1.14); } }
@keyframes gm-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-9vmax, -5vmax, 0) scale(1.1); } }
@keyframes gm-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; } 50% { transform: translate3d(-6vmax, 7vmax, 0) scale(1.2); opacity: 1; } }
html.gm-weak .gm-aurora i, .gm-aurora.gm-calm i { animation: none; }   /* weak devices, and the portal (its 3D orb needs the frame budget) */

/* ---------- 5. scroll progress + nav state ---------- */
.gm-progress {
  position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 300; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--gm-p, 0));
  background: linear-gradient(90deg, #8b5cf6, #e879f9 55%, #a78bfa); box-shadow: 0 0 12px rgba(167,139,250,.75);
}
.nav { transition: background .4s var(--gm-soft), box-shadow .4s var(--gm-soft), border-color .4s var(--gm-soft); }
.nav.gm-scrolled { background: rgba(7,6,13,.82); border-bottom-color: rgba(167,139,250,.22); box-shadow: 0 8px 36px rgba(0,0,0,.45), 0 1px 0 rgba(167,139,250,.12); }
.nav-links a { transition: color .25s var(--gm-soft); }

/* ---------- 6. cards: a light that follows the pointer, and a gentle tilt ---------- */
.gm-card { position: relative; }
.gm-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity .4s var(--gm-soft);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(167,139,250,.18), transparent 62%);
}
.gm-card:hover > .gm-spot { opacity: 1; }
.gm-tilt { transition: transform .45s var(--gm-ease), border-color .3s, box-shadow .35s, background .3s; will-change: transform; }

/* ---------- 7. buttons: press, ripple, magnet ---------- */
.gm-btn { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.gm-btn:active { transform: translateY(0) scale(.97); }
.gm-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.5);
  transform: translate(-50%, -50%) scale(0); animation: gm-ripple .7s var(--gm-soft) forwards;
}
@keyframes gm-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: .6; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.gm-magnet { translate: var(--gm-mx, 0px) var(--gm-my, 0px); transition: translate .3s var(--gm-ease), transform .3s var(--gm-ease), box-shadow .3s, filter .3s; }

/* ---------- 8. forms and feedback ---------- */
input, textarea, select { transition: border-color .25s var(--gm-soft), box-shadow .35s var(--gm-soft), background .25s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(167,139,250,.16), 0 0 26px rgba(167,139,250,.14); }
.gm-shake { animation: gm-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes gm-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.gm-pop { animation: gm-pop .6s var(--gm-ease) both; }
@keyframes gm-pop { from { opacity: 0; transform: scale(.92) translateY(10px); } }
.gm-check { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.gm-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: gm-draw .6s .1s var(--gm-ease) forwards; }
@keyframes gm-draw { to { stroke-dashoffset: 0; } }

/* ---------- 9. numbers, bars and rings that fill in ---------- */
[data-gm-bar] { transform-origin: left center; transform: scaleX(0); transition: transform 1.3s var(--gm-ease) .15s; }
[data-gm-bar].gm-in { transform: scaleX(var(--gm-bar, 1)); }
.gm-ring-fill { transition: stroke-dashoffset 1.5s var(--gm-ease) .1s; }

/* ---------- 10. soft cursor light (mouse only) ---------- */
.gm-cursor {
  position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(167,139,250,.10), transparent 68%); opacity: 0; transition: opacity .5s; will-change: transform;
}
.gm-cursor.on { opacity: 1; }

/* ---------- 11. the featured plan gets a slowly travelling light on its border ---------- */
@property --gm-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.price-card.featured {
  border-color: transparent;
  background: linear-gradient(#100d1e, #100d1e) padding-box, conic-gradient(from var(--gm-angle), #8b5cf6, #e879f9, #6366f1, #a78bfa, #8b5cf6) border-box;
  animation: gm-angle 8s linear infinite;
}
@keyframes gm-angle { to { --gm-angle: 360deg; } }

/* ---------- 12. small polish ---------- */
::selection { background: rgba(167,139,250,.38); color: #fff; }
html { scrollbar-color: rgba(167,139,250,.4) transparent; scrollbar-width: thin; }
html.gm-weak .gm-cursor { display: none; }

/* ---------- print and reduced motion: show everything, move nothing ---------- */
@media print {
  .gm-aurora, .gm-progress, .gm-spot, .gm-cursor { display: none !important; }
  [data-gm-r] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-aurora i, .price-card.featured { animation: none; }
  .gm-progress { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [data-gm-bar] { transform: scaleX(var(--gm-bar, 1)); transition: none; }
  .gm-ring-fill { transition: none; }
}