/* ═══════════════════════════════════════════════════════════
   ANIMATIONS.CSS — Keyframes, Scroll Reveals, Cursor
═══════════════════════════════════════════════════════════ */

/* ── Custom Cursor ── */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast), height var(--dur-fast), background var(--dur-fast);
  will-change: transform;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(245, 166, 35, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition:
    width var(--dur-med) var(--ease-out),
    height var(--dur-med) var(--ease-out),
    border-color var(--dur-med),
    opacity var(--dur-med);
  will-change: transform;
}

body.cursor-hover .cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--color-gold-light);
}

body.cursor-hover .cursor-ring {
  width: 60px;
  height: 60px;
  border-color: rgba(245, 166, 35, 0.85);
}

body.cursor-active .cursor-dot {
  width: 14px;
  height: 14px;
}

body.cursor-active .cursor-ring {
  width: 40px;
  height: 40px;
}

/* ── Scroll Reveal Base States ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(4px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(4px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(4px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring),
    filter var(--dur-slow) var(--ease-out);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Stagger delays */
.delay-1  { transition-delay: 0.05s; }
.delay-2  { transition-delay: 0.12s; }
.delay-3  { transition-delay: 0.20s; }
.delay-4  { transition-delay: 0.28s; }
.delay-5  { transition-delay: 0.36s; }
.delay-6  { transition-delay: 0.44s; }

/* ── Keyframes ── */

/* Marquee scroll */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Float animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--color-gold-glow); }
  50%       { box-shadow: 0 0 48px var(--color-gold-glow), 0 0 80px rgba(245, 166, 35, 0.1); }
}

/* Rotate slow */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Gradient shift */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* Scale in */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Fade up */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Border glow trace */
@keyframes border-trace {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Breathe */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.05); opacity: 1; }
}

/* ── Animated Gradient Text ── */
.animated-gradient-text {
  background: linear-gradient(
    120deg,
    var(--color-gold-light) 0%,
    var(--color-gold) 25%,
    var(--color-cyan) 50%,
    var(--color-blue) 75%,
    var(--color-gold) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
}

/* ── Page Transition ── */
.page-enter {
  animation: fade-up 0.8s var(--ease-out) forwards;
}

/* ── Floating Badge ── */
.float-badge {
  animation: float 5s ease-in-out infinite;
}

/* ── Glow Orb ── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}

.glow-orb--gold {
  background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
  animation: breathe 6s ease-in-out infinite;
}

.glow-orb--cyan {
  background: radial-gradient(circle, var(--color-cyan) 0%, transparent 70%);
  animation: breathe 8s ease-in-out infinite 2s;
}

.glow-orb--blue {
  background: radial-gradient(circle, var(--color-blue) 0%, transparent 70%);
  animation: breathe 7s ease-in-out infinite 1s;
}

/* ── Tab Filter ── */
.tab-bar {
  display: flex;
  gap: var(--space-sm);
  padding: 6px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  width: fit-content;
  margin-bottom: var(--space-3xl);
}

.tab-btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--dur-med) var(--ease-out);
  letter-spacing: 0.02em;
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--color-gold), #E8960F);
  color: #0a0600;
  box-shadow: 0 4px 16px var(--color-gold-glow);
}

.tab-btn:hover:not(.active) {
  color: var(--color-text-primary);
  background: var(--glass-bg-strong);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fade-up 0.5s var(--ease-out) forwards;
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-3xl) var(--space-xl);
  position: relative;
  z-index: var(--z-content);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-block: var(--space-md);
  max-width: 300px;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-link {
  font-size: 0.88rem;
  color: var(--color-text-faded);
  transition: color var(--dur-fast);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-gold);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--color-text-faded);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .tab-bar { flex-wrap: wrap; border-radius: var(--radius-lg); }
}