/* ═══════════════════════════════════════════════════════════════ */
/* RDA Animation System — shared across marketing pages             */
/* Version: 2026-05-30                                              */
/* ═══════════════════════════════════════════════════════════════ */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mesh-blob { animation: none !important; }
}

/* ─── Gradient mesh background ─── */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--black, #050505);
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.25;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.mesh-blob-1 {
  top: -10%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--gold, #c9a84c), transparent 70%);
  animation: drift1 28s ease-in-out infinite;
}
.mesh-blob-2 {
  top: 30%; right: -15%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--gold-dark, #a88a3a), transparent 70%);
  animation: drift2 35s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(150px, 80px) scale(1.1); }
  66% { transform: translate(-80px, 120px) scale(0.95); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-120px, -100px) scale(1.15); }
}

/* ─── Hero entrance — staggered fade-in ─── */
.hero-eyebrow, .hero-title, .hero-sub, .hero-actions, .founders-banner {
  opacity: 0;
  transform: translateY(20px);
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-eyebrow { animation-delay: 0.1s; }
.hero-title { animation-delay: 0.25s; }
.hero-sub { animation-delay: 0.5s; }
.hero-actions { animation-delay: 0.7s; }
.founders-banner { animation-delay: 0.9s; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Gold shimmer on <em> ─── */
.hero-title em, .tiles-title em {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--gold) 0%, var(--gold) 40%,
    var(--gold-light, #e0c373) 50%,
    var(--gold) 60%, var(--gold) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

/* ─── Scroll reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }

/* ─── 3D tile tilt ─── */
.tile {
  transform-style: preserve-3d;
  transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, 0, 0) scale(var(--tile-scale, 1));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  animation: tileFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--tile-i, 0) * 1.5s);
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(201, 168, 76, 0.35) 0%,
    rgba(201, 168, 76, 0.08) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.tile:hover {
  border-color: var(--gold);
  box-shadow: 0 30px 80px rgba(201, 168, 76, 0.25),
              0 0 60px rgba(201, 168, 76, 0.18);
}
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; z-index: 1; }
@keyframes tileFloat {
  0%, 100% { transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, 0, 0) scale(var(--tile-scale, 1)); }
  50% { transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, -8px, 0) scale(var(--tile-scale, 1)); }
}

/* ─── Nav backdrop morph on scroll ─── */
.nav {
  transition: padding 0.3s ease, background 0.4s ease, border 0.3s ease, box-shadow 0.4s ease;
}
.nav.scrolled {
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 10px 32px;
}

/* ─── CTA hover ─── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4),
              0 0 20px rgba(201, 168, 76, 0.25);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-secondary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.15);
}

/* ─── RDA WORDMARK WALLPAPER (used in .how, .footer, anywhere) ─── */
.footer, .how {
  position: relative;
  overflow: hidden;
}
.footer > *, .how > * {
  position: relative;
  z-index: 2;
}
.logo-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo-wallpaper-text {
  position: relative;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(90px, 18vw, 240px);
  color: var(--gold);
  opacity: 0.10;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  user-select: none;
  white-space: nowrap;
  padding: 20px 0;
  z-index: 1;
}
.logo-wallpaper-text em {
  font-style: italic;
  font-weight: 400;
}
.logo-wallpaper-tag {
  position: relative;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: clamp(10px, 1.4vw, 16px);
  letter-spacing: 0.4em;
  color: var(--gold);
  opacity: 0.25;
  text-transform: uppercase;
  margin-top: 8px;
  z-index: 1;
}