/* ============================================================
   RIDGE — Animations & Unusual Design Layer
   Loads site-wide. Respects prefers-reduced-motion.
   ============================================================ */

/* --- 1. Scroll reveal primitives --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]   { transform: translateX(-48px); }
[data-reveal="right"]  { transform: translateX(48px); }
[data-reveal="scale"]  { transform: scale(0.92); }
[data-reveal="blur"]   { filter: blur(10px); transition: opacity 0.9s, transform 0.9s, filter 0.9s; }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
}

/* Stagger children: add data-reveal-stagger on parent */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.00s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.48s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.56s; }

/* --- 2. Scroll progress bar (top) --- */
.ridge-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #D4A853, #F5D38E, #D4A853);
  background-size: 200% 100%;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.6);
  animation: ridge-shimmer 4s linear infinite;
}
@keyframes ridge-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* --- 3. Cursor glow (desktop only) --- */
.ridge-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(212,168,83,0.08) 0%, rgba(212,168,83,0) 65%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  mix-blend-mode: screen;
}
@media (hover: none), (max-width: 900px) {
  .ridge-cursor-glow { display: none; }
}

/* --- 4. Animated gradient mesh backdrop --- */
.ridge-mesh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ridge-mesh-bg::before,
.ridge-mesh-bg::after {
  content: '';
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  animation: ridge-mesh-float 22s ease-in-out infinite alternate;
}
.ridge-mesh-bg::before {
  top: -20vw;
  left: -10vw;
  background: radial-gradient(circle, #D4A853, transparent 70%);
}
.ridge-mesh-bg::after {
  bottom: -20vw;
  right: -10vw;
  background: radial-gradient(circle, #8B6F2E, transparent 70%);
  animation-delay: -11s;
}
@keyframes ridge-mesh-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(15vw, -10vw) scale(1.15); }
  100% { transform: translate(-10vw, 12vw) scale(0.92); }
}

/* --- 5. Magnetic buttons (applied via JS class) --- */
.ridge-magnetic {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.ridge-magnetic::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(130deg, transparent 30%, rgba(212,168,83,0.6), 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 0.3s;
  pointer-events: none;
}
.ridge-magnetic:hover::after { opacity: 1; }

/* --- 6. Tilt-3D cards --- */
.ridge-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.ridge-tilt > * { transform: translateZ(30px); }

/* --- 7. Gold shimmer on headings --- */
.ridge-shimmer-text {
  background: linear-gradient(
    110deg,
    #D4A853 0%, #D4A853 40%,
    #F5D38E 50%, #D4A853 60%,
    #D4A853 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ridge-shimmer-sweep 3.5s linear infinite;
}
@keyframes ridge-shimmer-sweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* --- 8. Gold underline ink effect --- */
.ridge-ink-underline {
  position: relative;
  display: inline-block;
}
.ridge-ink-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #D4A853, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ridge-ink-underline.is-visible::after,
.ridge-ink-underline:hover::after {
  transform: scaleX(1);
}

/* --- 9. Rotating gold ring (decorative) --- */
.ridge-ring {
  position: relative;
  display: inline-block;
}
.ridge-ring::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(212, 168, 83, 0.4);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  animation: ridge-rotate 8s linear infinite;
}
@keyframes ridge-rotate {
  to { transform: rotate(360deg); }
}

/* --- 10. Noise overlay (subtle grain) --- */
.ridge-noise {
  position: relative;
}
.ridge-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.83  0 0 0 0 0.66  0 0 0 0 0.32  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- 11. Floating dots parallax --- */
.ridge-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(212,168,83,0.12) 1px, transparent 1px);
  background-size: 38px 38px;
  animation: ridge-dots-drift 40s linear infinite;
  opacity: 0.5;
}
@keyframes ridge-dots-drift {
  to { background-position: 38px 38px; }
}

/* --- 12. Hero marquee ticker --- */
.ridge-marquee {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ridge-marquee__track {
  display: inline-flex;
  gap: 3rem;
  animation: ridge-marquee-scroll 38s linear infinite;
}
@keyframes ridge-marquee-scroll {
  to { transform: translateX(-50%); }
}

/* --- 13. Button ripple (.ridge-ripple via JS) --- */
.ridge-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ridge-ripple .ridge-ripple__drop {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212,168,83,0.45), transparent 65%);
  animation: ridge-ripple-grow 0.7s ease-out forwards;
  z-index: 0;
}
@keyframes ridge-ripple-grow {
  from { transform: scale(0); opacity: 0.8; }
  to   { transform: scale(4); opacity: 0; }
}

/* --- 14. Counter flash --- */
.ridge-counter-flash {
  animation: ridge-counter-pop 0.6s ease-out;
}
@keyframes ridge-counter-pop {
  0%   { transform: scale(1); color: inherit; }
  40%  { transform: scale(1.18); color: #F5D38E; }
  100% { transform: scale(1); }
}

/* --- 15. Reduced motion kill switch --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ridge-scroll-progress,
  .ridge-mesh-bg,
  .ridge-dots,
  .ridge-cursor-glow,
  .ridge-shimmer-text {
    animation: none !important;
  }
}