/* ---------- animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulseGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55)); } }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.92) translateY(14px); } 100% { opacity: 1; transform: none; } }

/* page load / leave */
body { animation: fadeIn 0.6s ease backwards; }
body.leaving { opacity: 0; transition: opacity 0.22s ease; }

/* navbar */
.nav { animation: slideDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.brand img { animation: pulseGlow 4s ease-in-out infinite; }
.nav-links a { position: relative; }
.nav-links a:not(.cta)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: #fff;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.nav-links a:not(.cta):hover::after { transform: scaleX(1); }

/* hero entrance */
.hero-inner h1 {
  background: linear-gradient(90deg, #fff 0%, #fff 35%, #8d8d93 50%, #fff 65%, #fff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: fadeUp 0.9s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both, shimmer 7s 1.2s linear infinite;
}
.hero-inner p { animation: fadeUp 0.9s 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-inner .btns { animation: fadeUp 0.9s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* a ring of light behind the hero text */
.hero::before {
  content: ""; position: absolute; left: 4%; top: 50%; width: 560px; height: 560px; margin-top: -280px; z-index: -1;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  filter: blur(40px); animation: orbit 22s linear infinite;
}

/* scroll reveal (classes are added by anim.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* buttons: light sweep + press */
.btn, .pill, .rowline button.act { position: relative; overflow: hidden; }
.btn::after, .pill::after, .rowline button.act::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
}
.btn:not(.primary)::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent); }
.btn:hover::after, .pill:hover::after, .rowline button.act:hover::after { left: 130%; }
.btn:active, .pill:active { transform: scale(0.97); }

/* cards: spotlight that follows the mouse + tilt (set by anim.js) */
.card { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.14), transparent 65%);
}
.card:hover::before { opacity: 1; }
.card .ico-wrap { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s; }
.card:hover .ico-wrap { transform: translateY(-3px) scale(1.12) rotate(-4deg); background: rgba(255, 255, 255, 0.16); }

/* the buy block */
.buy { position: relative; overflow: hidden; }
.buy::before {
  content: ""; position: absolute; top: -50%; left: -30%; width: 60%; height: 200%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: rotate(12deg); animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -40%; } 55%, 100% { left: 120%; } }

/* auth / account */
.auth-card { animation: popIn 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.field { transition: border-color 0.2s, background 0.2s, box-shadow 0.25s, transform 0.2s; }
.field:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.account h1 { animation: fadeUp 0.8s both; }
.rowline { animation: slideRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.rowline:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); transform: translateX(4px); }
.rows .rowline:nth-child(1) { animation-delay: 0.10s; } .rows .rowline:nth-child(2) { animation-delay: 0.16s; }
.rows .rowline:nth-child(3) { animation-delay: 0.22s; } .rows .rowline:nth-child(4) { animation-delay: 0.28s; }
.rows .rowline:nth-child(5) { animation-delay: 0.34s; } .rows .rowline:nth-child(6) { animation-delay: 0.40s; }
.rows .rowline:nth-child(7) { animation-delay: 0.46s; } .rows .rowline:nth-child(8) { animation-delay: 0.52s; }
.actions .pill { animation: fadeUp 0.6s backwards; }
.actions .pill:nth-child(1) { animation-delay: 0.6s; } .actions .pill:nth-child(2) { animation-delay: 0.66s; }
.actions .pill:nth-child(3) { animation-delay: 0.72s; } .actions .pill:nth-child(4) { animation-delay: 0.78s; }
.actions .pill:nth-child(5) { animation-delay: 0.84s; } .actions .pill:nth-child(7) { animation-delay: 0.9s; }
.msg { transition: opacity 0.3s; }
.msg.pop { animation: popIn 0.35s both; }

/* cursor glow (follows the mouse) */
#cursor {
  position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 65%);
  transform: translate3d(-999px, -999px, 0); will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}