/* GeroHub — shared marketing styles (landing + per-app pages).
   Custom animations live here (Tailwind's compiled tw.css can't hold them).
   Animations play regardless of the OS "reduce motion" setting, by explicit
   product choice; scroll reveals fall back to visible via landing.js if
   IntersectionObserver is unavailable. */

/* ── Aurora background ─────────────────────────────────── */
.aurora { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .35; will-change: transform; }
.aurora-1 { background: #14B8A6; width: 520px; height: 520px; top: -160px; left: -120px; animation: drift1 22s ease-in-out infinite alternate; }
.aurora-2 { background: #6366F1; width: 460px; height: 460px; top: 10%; right: -140px; animation: drift2 26s ease-in-out infinite alternate; }
.aurora-3 { background: #F59E0B; width: 320px; height: 320px; top: 46%; left: 30%; opacity: .14; animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-120px, 140px) scale(1.2); } }
@keyframes drift3 { to { transform: translate(90px, -110px) scale(1.25); } }

/* dotted grid overlay */
.gridlines {
  background-image: radial-gradient(rgba(231,236,242,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 50%, transparent 100%);
}

/* ── Hero word stagger ─────────────────────────────────── */
.stagger > span { display: inline-block; opacity: 0; transform: translateY(26px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ── Scroll reveal ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Live app card glow ────────────────────────────────── */
.card-live { position: relative; background: linear-gradient(#0F141B, #0F141B) padding-box,
  linear-gradient(135deg, rgba(20,184,166,.7), rgba(99,102,241,.4), transparent 60%) border-box;
  border: 1px solid transparent; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.card-live:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -24px rgba(20,184,166,.45); }

.card-soon { border: 1px dashed rgba(139,151,165,.35); transition: border-color .3s, transform .3s; }
.card-soon:hover { border-color: rgba(20,184,166,.5); transform: translateY(-3px); }
.shimmer { background: linear-gradient(100deg, transparent 30%, rgba(231,236,242,.06) 50%, transparent 70%);
  background-size: 200% 100%; animation: shimmer 3.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Platform marquee ──────────────────────────────────── */
.marquee { display: flex; gap: 2.5rem; width: max-content; animation: scroll 28s linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ── Consistent card hover-lift (feature + testimonial cards) ── */
.lift { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.lift:hover { transform: translateY(-4px); border-color: rgba(20,184,166,.45);
  box-shadow: 0 18px 40px -22px rgba(20,184,166,.4); }

/* ── Testimonial carousel (auto-scroll, pause on hover) ── */
.tmarquee { display: flex; align-items: stretch; gap: 1.25rem; width: max-content; animation: scroll 60s linear infinite; }
.tmarquee:hover { animation-play-state: paused; }

/* score demo chips pulse */
.pulse-soft { animation: pulseS 2.8s ease-in-out infinite; }
@keyframes pulseS { 0%,100% { opacity: .85 } 50% { opacity: 1 } }

/* Hero featured-apps carousel dots */
.hero-dot { height: 6px; width: 6px; border-radius: 9999px; background: rgba(231,236,242,.25);
  transition: width .3s ease, background .3s ease; }
.hero-dot[aria-current="true"] { width: 22px; background: #14B8A6; }

/* FAQ accordion marker */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .faq-plus { transition: transform .25s ease; }
details.faq[open] > summary .faq-plus { transform: rotate(45deg); }