/* ==========================================================================
   Rise With Us — custom styles
   Layout/spacing/colour utilities come from Tailwind; this file holds only
   what Tailwind cannot express: keyframes, gradients, masks and state rules.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; }

/* ── Scroll progress ─────────────────────────────── */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #0974da, #38bdf8, #f97316);
  z-index: 60; transition: width .1s linear;
}

/* ── Hero atmosphere ─────────────────────────────── */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 35%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 35%, #000 40%, transparent 100%);
}
.aurora { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .5; pointer-events: none; }
.aurora-a { background: #0974da; animation: float1 16s ease-in-out infinite; }
.aurora-b { background: #38bdf8; animation: float2 20s ease-in-out infinite; }
.aurora-c { background: #f97316; opacity: .15; animation: float3 18s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(40px,-30px) scale(1.12); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(-50px,35px) scale(1.08); } }
@keyframes float3 { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(30px,40px) scale(1.15); } }

.text-gradient {
  background: linear-gradient(100deg, #38bdf8 0%, #0974da 45%, #7dd3fc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Scroll reveal ───────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .aurora, .marquee-track, .pulse-dot { animation: none !important; }
}

/* ── Gradient-border cards ───────────────────────── */
.glow-card { position: relative; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.glow-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(9,116,218,.55), rgba(56,189,248,.25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.glow-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -12px rgba(9,116,218,.22); }
.glow-card:hover::before { opacity: 1; }

/* ── Brand lockup: adapts to the navbar's state ──── */
.brand-word, .brand-tag { transition: color .25s ease; }
#navbar[data-state="top"]   .brand-word { color: #ffffff; }
#navbar[data-state="solid"] .brand-word { color: #0f172a; }
#navbar[data-state="top"]   .brand-tag  { color: rgba(255,255,255,.42); }
#navbar[data-state="solid"] .brand-tag  { color: #94a3b8; }

/* ── Nav underline + state-aware hover ───────────── */
.nav-link { position: relative; }
.nav-items a, #mm-inner a { transition: color .25s ease; }
.nav-items[data-state="top"]   a:hover,
#mm-inner[data-state="top"]    a:hover { color: #ffffff; }
.nav-items[data-state="solid"] a:hover,
#mm-inner[data-state="solid"]  a:hover { color: #0f172a; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, #0974da, #38bdf8);
  border-radius: 2px; transition: width .28s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after { width: 100%; }

/* ── FAQ accordion (no max-height cap) ───────────── */
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; }
.faq-icon { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.faq-item.open .faq-icon { transform: rotate(135deg); background-color: #0974da; color: #fff; }

/* ── Marquee ─────────────────────────────────────── */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
                   mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: scrollx 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ── Social buttons (footer) ─────────────────────── */
.social-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  transition: color .25s ease, background-color .25s ease,
              border-color .25s ease, transform .25s ease;
}
.social-btn:hover {
  color: #fff;
  background: #0974da;
  border-color: #0974da;
  transform: translateY(-2px);
}
.social-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* ── Misc ────────────────────────────────────────── */
.pulse-dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { opacity: .75; box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.bar-fill { transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
::selection { background: #0974da; color: #fff; }
#to-top { transition: opacity .3s ease, transform .3s ease; }