/* ═══════════════════════════════════════════════════════════════════════
   Apple Animations CSS Library v1.0
   High-fidelity scroll-driven animations inspired by apple.com
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --aa-accent: #2997ff;
  --aa-accent2: #bf5af2;
  --aa-accent3: #ff6b6b;
  --aa-text: #f5f5f7;
  --aa-muted: #6e6e73;
  --aa-bg: #000000;
  --aa-glass: rgba(255,255,255,0.06);
  --aa-glass-border: rgba(255,255,255,0.10);
}

/* ─── 1. Mesh Background ─────────────────────────────────────────────── */

.aa-mesh-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(41,151,255,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(191,90,242,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(255,107,107,0.07) 0%, transparent 50%),
    #000;
  animation: aa-mesh-shift 8s ease-in-out infinite alternate;
  z-index: 0;
}

.aa-mesh-bg.dark {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(41,151,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(191,90,242,0.04) 0%, transparent 50%),
    #000;
}

@keyframes aa-mesh-shift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(15deg) brightness(1.08); }
  100% { filter: hue-rotate(-10deg) brightness(0.96); }
}

.aa-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
}
.aa-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ─── 2. Word-by-Word Reveal ──────────────────────────────────────────── */

.aa-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(32px);
  animation: aa-word-reveal 0.7s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes aa-word-reveal {
  0%   { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}

.aa-gradient-text {
  background: linear-gradient(135deg, var(--aa-accent), var(--aa-accent2), var(--aa-accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── 3. Fade Up ──────────────────────────────────────────────────────── */

.aa-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: aa-fade-up 0.8s ease both;
}

@keyframes aa-fade-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.aa-delay-1  { animation-delay: 0.1s; }
.aa-delay-2  { animation-delay: 0.2s; }
.aa-delay-3  { animation-delay: 0.3s; }
.aa-delay-4  { animation-delay: 0.4s; }
.aa-delay-5  { animation-delay: 0.5s; }
.aa-delay-6  { animation-delay: 0.6s; }
.aa-delay-7  { animation-delay: 0.7s; }
.aa-delay-8  { animation-delay: 0.8s; }
.aa-delay-9  { animation-delay: 0.9s; }
.aa-delay-10 { animation-delay: 1.0s; }
.aa-delay-11 { animation-delay: 1.1s; }
.aa-delay-12 { animation-delay: 1.2s; }
.aa-delay-13 { animation-delay: 1.3s; }
.aa-delay-14 { animation-delay: 1.4s; }
.aa-delay-15 { animation-delay: 1.5s; }
.aa-delay-16 { animation-delay: 1.6s; }
.aa-delay-17 { animation-delay: 1.7s; }
.aa-delay-18 { animation-delay: 1.8s; }
.aa-delay-19 { animation-delay: 1.9s; }
.aa-delay-20 { animation-delay: 2.0s; }

/* ─── 4. Scroll Reveal ────────────────────────────────────────────────── */

.aa-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.aa-reveal.aa-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.aa-stagger .aa-reveal:nth-child(1)  { transition-delay: 0.00s; }
.aa-stagger .aa-reveal:nth-child(2)  { transition-delay: 0.08s; }
.aa-stagger .aa-reveal:nth-child(3)  { transition-delay: 0.16s; }
.aa-stagger .aa-reveal:nth-child(4)  { transition-delay: 0.24s; }
.aa-stagger .aa-reveal:nth-child(5)  { transition-delay: 0.32s; }
.aa-stagger .aa-reveal:nth-child(6)  { transition-delay: 0.40s; }
.aa-stagger .aa-reveal:nth-child(7)  { transition-delay: 0.48s; }
.aa-stagger .aa-reveal:nth-child(8)  { transition-delay: 0.56s; }
.aa-stagger .aa-reveal:nth-child(9)  { transition-delay: 0.64s; }
.aa-stagger .aa-reveal:nth-child(10) { transition-delay: 0.72s; }
.aa-stagger .aa-reveal:nth-child(11) { transition-delay: 0.80s; }
.aa-stagger .aa-reveal:nth-child(12) { transition-delay: 0.88s; }
.aa-stagger .aa-reveal:nth-child(13) { transition-delay: 0.96s; }
.aa-stagger .aa-reveal:nth-child(14) { transition-delay: 1.04s; }
.aa-stagger .aa-reveal:nth-child(15) { transition-delay: 1.12s; }
.aa-stagger .aa-reveal:nth-child(16) { transition-delay: 1.20s; }

/* Variants */
.aa-reveal.aa-fade-only {
  transform: none;
}

.aa-reveal.aa-from-left {
  transform: translateX(-50px);
}
.aa-reveal.aa-from-left.aa-visible {
  transform: translateX(0);
}

.aa-reveal.aa-from-right {
  transform: translateX(50px);
}
.aa-reveal.aa-from-right.aa-visible {
  transform: translateX(0);
}

/* ─── 5. Glass Cards ──────────────────────────────────────────────────── */

.aa-glass-card {
  background: var(--aa-glass);
  border: 1px solid var(--aa-glass-border);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.aa-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.aa-glass-card:hover::before {
  left: 100%;
}

.aa-glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(41,151,255,0.08);
}

.aa-glass-card.glow-blue:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 40px rgba(41,151,255,0.15);
  border-color: rgba(41,151,255,0.25);
}

.aa-glass-card.glow-purple:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 40px rgba(191,90,242,0.15);
  border-color: rgba(191,90,242,0.25);
}

.aa-glass-card.glow-red:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 40px rgba(255,107,107,0.15);
  border-color: rgba(255,107,107,0.25);
}

.aa-glass-card.glow-gold:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 40px rgba(212,168,67,0.15);
  border-color: rgba(212,168,67,0.25);
}

/* ─── 6. Device Mockup ────────────────────────────────────────────────── */

.aa-device-wrap {
  perspective: 1200px;
}

.aa-device {
  width: 220px;
  height: 440px;
  border-radius: 40px;
  border: 2px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, #0d1420, #162040);
  position: relative;
  overflow: hidden;
  animation: aa-device-float 5s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(41,151,255,0.08);
  transition: background 0.6s ease;
}

@keyframes aa-device-float {
  0%, 100% { transform: translateY(0px) rotateX(4deg) rotateY(-8deg); }
  50%      { transform: translateY(-14px) rotateX(2deg) rotateY(-5deg); }
}

.aa-device-screen {
  position: absolute;
  inset: 10px;
  background: linear-gradient(145deg, #0a0a0f, #0d1117);
  border-radius: 34px;
  overflow: hidden;
}

.aa-device-screen img:only-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s ease;
}

.aa-device-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 24px;
  background: #000;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

.aa-device-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 3;
}

/* ─── 7. Scroll Text ──────────────────────────────────────────────────── */

.aa-scroll-text {
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.aa-scroll-word {
  display: inline-block;
  white-space: nowrap;
  color: rgba(255,255,255,0.25);
  transition: color 0.4s ease;
}

.aa-scroll-word.aa-lit {
  color: #ffffff;
}

/* ─── 8. Sticky Scroll Section ────────────────────────────────────────── */

.aa-sticky-outer {
  position: relative;
}

.aa-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
}

.aa-sticky-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1000px;
  width: 100%;
  align-items: center;
}

.aa-sticky-feature {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: opacity 0.4s ease;
  opacity: 0.3;
  cursor: pointer;
}

.aa-sticky-feature.active {
  opacity: 1;
}

.aa-sticky-progress {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.aa-sticky-progress span {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  transition: background 0.3s ease;
}

.aa-sticky-progress span.active {
  background: var(--aa-accent);
}

/* ─── 9. Stat Blocks ──────────────────────────────────────────────────── */

.aa-stat-block {
  text-align: center;
  padding: 24px;
}

.aa-stat-number {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #fff;
  line-height: 1.1;
}

.aa-stat-suffix {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--aa-accent);
  line-height: 1.1;
}

.aa-stat-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--aa-muted);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ─── 10. Scroll Hint ─────────────────────────────────────────────────── */

.aa-scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 47.9%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  opacity: 0;
  animation: aa-fade-up 1s ease forwards 2.2s;
  z-index: 2;
}

.aa-scroll-dot {
  width: 20px;
  height: 34px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  position: relative;
  display: flex;
  justify-content: center;
}

.aa-scroll-dot::after {
  content: '';
  position: absolute;
  top: 5px;
  width: 4px;
  height: 8px;
  background: var(--aa-accent);
  border-radius: 100px;
  animation: aa-scroll-bob 1.8s ease-in-out infinite;
}

@keyframes aa-scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* ─── 11. Navigation ──────────────────────────────────────────────────── */

.aa-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.aa-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.aa-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--aa-accent);
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.aa-nav-pill:hover {
  background: #1a7de0;
  transform: translateY(-1px);
}

/* ─── 12. Eyebrow ─────────────────────────────────────────────────────── */

.aa-eyebrow {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aa-accent);
  margin-bottom: 24px;
  animation: aa-fade-up 0.6s ease both;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Futuristic terminal-style modifier. Uses the already-loaded JetBrains Mono
   variable, drops to a smaller crisper size, and tightens tracking just
   enough that the letters look mechanical without becoming illegible. */
.aa-eyebrow-mono {
  font-family: var(--font-jetbrains-mono), 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  /* Kimi color-review: tighter tracking + dimmer glow reads Bloomberg
     terminal; wider tracking + bright glow read Discord/gaming header. */
  letter-spacing: 0.18em;
  text-shadow: 0 0 10px rgba(41, 151, 255, 0.22);
  font-feature-settings: "calt" 0, "ss01" 1;
}
/* Hairline chevrons before + after the text — vector CSS, stays sharp at
   every dpi. */
.aa-eyebrow-mono::before,
.aa-eyebrow-mono::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: 0.55;
  margin: 0 14px;
}
.aa-eyebrow-mono::after {
  background: linear-gradient(90deg, currentColor, transparent);
}

/* ─── 13. Buttons ─────────────────────────────────────────────────────── */

.aa-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  background: var(--aa-accent);
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 24px rgba(41,151,255,0.25), 0 4px 16px rgba(0,0,0,0.3);
}

.aa-btn-primary:hover {
  background: #1a7de0;
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(41,151,255,0.35), 0 6px 20px rgba(0,0,0,0.3);
}

.aa-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.aa-btn-ghost:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  transform: translateY(-2px);
}

/* ─── 14. Divider ─────────────────────────────────────────────────────── */

.aa-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
  margin: 0 auto;
}

.aa-divider.horizontal {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
  margin: 0;
}

/* ─── 15. Responsive ──────────────────────────────────────────────────── */

/* ─── Mobile-specific nav cleanup ───
   At ≤640px the "EARLY ACCESS" / "BETA" badge crowds the CloutCall logo
   and forces the pill button toward the viewport edge — visible as a
   cramped, wrapping header on iPhone widths. The pill's own copy ("Get
   Early Access" / "Launch App") already telegraphs the same status, so
   the badge is redundant on mobile. Also tightens the nav-logo gap and
   pill padding for the same width budget. */
@media (max-width: 640px) {
  .aa-nav-badge {
    display: none !important;
  }
  .aa-nav-logo {
    gap: 8px;
    font-size: 17px;
  }
  .aa-nav-pill {
    padding: 7px 14px;
    font-size: 12.5px;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .aa-nav {
    padding: 12px 16px;
  }
  .aa-nav-pill {
    padding: 8px 16px;
    font-size: 13px;
  }
  .aa-sticky-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .aa-sticky-inner {
    padding: 0 20px;
  }
  .aa-device {
    margin: 0 auto;
  }
  .aa-btn-primary,
  .aa-btn-ghost {
    width: 100%;
    justify-content: center;
  }

  /* Showcase grid: 3 cols on mobile */
  .aa-showcase-section {
    padding: 60px 16px !important;
  }
  .aa-showcase-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .aa-showcase-grid img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }

  /* Feature cards: single column on mobile */
  .aa-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats: 2x2 grid on mobile */
  .aa-stats-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .aa-stats-row .aa-stat-block {
    flex: 0 0 calc(50% - 8px);
    padding: 16px 8px;
  }
}

/* ─── 30. Scroll-Brightening Ambient Layer ────────────────────────────
   Fixed full-viewport overlay that blooms blue+violet+gold radial glows
   as the user scrolls. Sits BEHIND content (z-index:0) so dark elements
   keep their identity; `mix-blend-mode: screen` brightens without
   painting over anything. */

body.landing-page::before {
  content: '';
  position: fixed;
  inset: 0;
  /* Sit ABOVE the opaque dark sections so the screen blend can actually
     reach them. 9999 beats every in-page z-index (max is the nav at 1000)
     while staying well below any wallet-modal portal layer (~2147483647). */
  z-index: 9999;
  pointer-events: none;
  /* Three light sources tuned per Kimi color-review:
     - Blue dominant (Apple-blue brand accent) at 0.32.
     - Violet desaturated to deep-indigo bleed (was Twitch-purple at 0.38).
     - Gold barely-there center anchor (was muddy teal-beige). */
  background:
    radial-gradient(ellipse 80% 60% at 88% 12%, rgba(41, 151, 255, 0.32),  transparent 62%),
    radial-gradient(ellipse 70% 55% at 12% 92%, rgba(155, 92, 220, 0.18),  transparent 65%),
    radial-gradient(ellipse 55% 35% at 50% 50%, rgba(255, 196, 140, 0.07), transparent 70%);
  /* Screen blend: only ADDS light to the layers below. Pure black stays
     dark where the glow is faint; everything else gets lifted. */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

/* Modern browsers (Chrome/Edge 115+, Safari TP) — fade in linearly across
   the first 1.6 viewport heights of scroll so the brightening lands during
   the user's natural exploration arc, not all at once. */
@supports (animation-timeline: scroll()) {
  body.landing-page::before {
    animation: aa-ambient-bloom linear both;
    animation-timeline: scroll(root);
    /* Peak at 45% of 200vh (= ~90vh in) then plateau — most users never
       scroll past the third fold, so brightness should land early then
       hold instead of climbing to 0.95 (neon-poster territory). */
    animation-range: 0 200vh;
  }
  @keyframes aa-ambient-bloom {
    0%   { opacity: 0; }
    45%  { opacity: 0.62; }
    100% { opacity: 0.62; }
  }
}

/* Fallback for Safari stable + Firefox: render a constant subdued bloom so
   the page never looks fully un-lit. */
@supports not (animation-timeline: scroll()) {
  body.landing-page::before {
    opacity: 0.55;
  }
}

/* Respect motion preference — kill the scroll ramp, hold at a calm middle
   brightness instead. */
@media (prefers-reduced-motion: reduce) {
  body.landing-page::before {
    animation: none !important;
    opacity: 0.5 !important;
    filter: none !important;
  }
}