/* Landing anonyme de la page d'accueil, extrait de templates/home.html */
/* ── Canvas ──────────────────────────────────────── */
#land-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ── Hero entrance ───────────────────────────────── */
.land-in {
  opacity: 0;
  will-change: opacity, transform;
  animation: landIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.ld-1 { animation-delay: .05s; }
.ld-2 { animation-delay: .2s;  }
.ld-3 { animation-delay: .38s; }
.ld-4 { animation-delay: .52s; }
.ld-5 { animation-delay: .66s; }
@keyframes landIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Mockup float ────────────────────────────────── */
.mockup-wrap {
  will-change: transform;
  animation: mockFloat 6s ease-in-out infinite;
}
@keyframes mockFloat {
  0%,100% { transform: translateY(0)     rotate(-0.8deg); }
  50%      { transform: translateY(-14px) rotate(0.8deg);  }
}
.mockup-glow {
  animation: mockGlow 3s ease-in-out infinite;
}
@keyframes mockGlow {
  0%,100% { opacity: .25; }
  50%      { opacity: .6;  }
}

/* ── Live badge pulse ring (compositor-friendly) ─── */
.live-ring { position: relative; }
.live-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, .55);
  will-change: transform, opacity;
  animation: liveRing 1.8s ease-out infinite;
}
@keyframes liveRing {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* ── Scroll reveal ───────────────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}
.sr.visible { opacity: 1; transform: translateY(0); }
.sr-d1 { transition-delay: .08s; }
.sr-d2 { transition-delay: .18s; }
.sr-d3 { transition-delay: .28s; }

/* ── CTA shimmer ─────────────────────────────────── */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-shine:hover::after { animation: shineSweep .55s ease forwards; }
@keyframes shineSweep { to { transform: translateX(120%); } }

/* ── Nav scroll state ────────────────────────────── */
#land-nav { transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease; }
#land-nav.scrolled { background: rgba(11,10,15,.96) !important; box-shadow: 0 1px 24px rgba(0,0,0,.5); }

/* ── Creator cards horizontal marquee on hover ───── */
.creator-strip { scroll-behavior: smooth; }

/* ── Section heading decoration ─────────────────── */
.section-line {
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #D4A056, transparent);
  transition: width .8s ease;
}
.section-line.visible { width: 80px; }

/* ── Stat counter ────────────────────────────────── */
.count-up { display: inline-block; }

/* ── Step card hover lift ────────────────────────── */
.step-card {
  transition: transform .3s ease, border-color .3s ease;
}
.step-card:hover { transform: translateY(-4px); }