/* =========================================
   ANIMATIONS.CSS — Premium Animations
   François Rosnel Digital Studio 2026
   ========================================= */

/* ---- Page Transitions ---- */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--clr-void);
  z-index: 9998;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

.page-transition-overlay.enter {
  animation: pageEnter 0.4s var(--ease-expo) forwards;
}

.page-transition-overlay.leave {
  animation: pageLeave 0.4s var(--ease-expo) forwards;
  transform-origin: top;
}

@keyframes pageEnter {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes pageLeave {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ---- Floating Animation ---- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

.anim-float      { animation: float     4s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 6s ease-in-out infinite; }

/* ---- Glow Pulse ---- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(200,155,60,0.2); }
  50%       { box-shadow: 0 0 40px rgba(200,155,60,0.4), 0 0 80px rgba(200,155,60,0.15); }
}

@keyframes glowPulseAI {
  0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.2); }
  50%       { box-shadow: 0 0 40px rgba(124,58,237,0.4), 0 0 80px rgba(124,58,237,0.15); }
}

.anim-glow-gold { animation: glowPulse   3s ease-in-out infinite; }
.anim-glow-ai   { animation: glowPulseAI 3s ease-in-out infinite; }

/* ---- Shimmer (loading skeleton) ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

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

.anim-spin       { animation: spin 2s linear infinite; }
.anim-spin-slow  { animation: spin 8s linear infinite; }

/* ---- Bounce ---- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%       { transform: translateY(-6px); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

.anim-bounce { animation: bounce 1.5s infinite; }

/* ---- Slide Animations ---- */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.anim-slide-up    { animation: slideInUp    0.6s var(--ease-expo) both; }
.anim-slide-left  { animation: slideInLeft  0.6s var(--ease-expo) both; }
.anim-slide-right { animation: slideInRight 0.6s var(--ease-expo) both; }
.anim-fade-in     { animation: fadeIn       0.6s var(--ease-smooth) both; }
.anim-scale-in    { animation: scaleIn      0.5s var(--ease-spring) both; }

/* ---- Gold Shimmer Text ---- */
@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--clr-gold-dim) 0%,
    var(--clr-gold-light) 25%,
    var(--clr-accent) 50%,
    var(--clr-gold-light) 75%,
    var(--clr-gold-dim) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s ease-in-out infinite;
}

/* ---- Border Beam ---- */
@keyframes borderBeam {
  0%   { transform: translateX(-100%) rotate(0); }
  100% { transform: translateX(100%) rotate(0); }
}

.border-beam {
  position: relative;
  overflow: hidden;
}

.border-beam::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
  animation: borderBeam 3s ease-in-out infinite;
}

/* ---- Magnetic button hover ---- */
.btn-magnetic {
  transition: transform 0.3s var(--ease-spring);
}

/* ---- Number Count Up ---- */
.stat-count {
  display: inline-block;
  transition: opacity 0.3s;
}

/* ---- Gradient Background Animation ---- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.anim-gradient-bg {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ---- Reveal Stagger Grid ---- */
.stagger-grid > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-expo), transform 0.6s var(--ease-expo);
}

.stagger-grid.revealed > *:nth-child(1)  { opacity:1; transform:translateY(0); transition-delay: 0ms; }
.stagger-grid.revealed > *:nth-child(2)  { opacity:1; transform:translateY(0); transition-delay: 80ms; }
.stagger-grid.revealed > *:nth-child(3)  { opacity:1; transform:translateY(0); transition-delay: 160ms; }
.stagger-grid.revealed > *:nth-child(4)  { opacity:1; transform:translateY(0); transition-delay: 240ms; }
.stagger-grid.revealed > *:nth-child(5)  { opacity:1; transform:translateY(0); transition-delay: 320ms; }
.stagger-grid.revealed > *:nth-child(6)  { opacity:1; transform:translateY(0); transition-delay: 400ms; }
.stagger-grid.revealed > *:nth-child(7)  { opacity:1; transform:translateY(0); transition-delay: 480ms; }
.stagger-grid.revealed > *:nth-child(8)  { opacity:1; transform:translateY(0); transition-delay: 560ms; }

/* ---- Typing Effect CSS (fallback) ---- */
.typewriter-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--clr-gold);
  animation: typing 3s steps(30) both, blinkCaret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blinkCaret {
  0%, 100% { border-color: transparent; }
  50%       { border-color: var(--clr-gold); }
}

/* ---- Hover Glow Cards ---- */
.hover-glow {
  transition: box-shadow var(--dur-slow) var(--ease-smooth), transform var(--dur-base) var(--ease-spring);
}

.hover-glow:hover {
  box-shadow: 0 0 40px rgba(200,155,60,0.2), 0 20px 60px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}

/* ---- Prose (Article content) ---- */
.prose h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--clr-white); letter-spacing: -.025em; margin: 2em 0 .75em; }
.prose h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--clr-white); letter-spacing: -.02em; margin: 1.75em 0 .5em; }
.prose h4 { font-family: var(--font-sub); font-size: var(--text-xl); font-weight: 600; color: var(--clr-white); margin: 1.5em 0 .5em; }
.prose p  { margin-bottom: 1.5em; }
.prose a  { color: var(--clr-gold-light); text-decoration: underline; text-decoration-color: rgba(200,155,60,.4); transition: all var(--dur-fast) var(--ease-smooth); }
.prose a:hover { color: var(--clr-gold); text-decoration-color: var(--clr-gold); }
.prose strong { color: var(--clr-white); font-weight: 600; }
.prose em { color: var(--clr-gold-light); font-style: italic; }
.prose code { font-family: var(--font-mono); font-size: .875em; background: rgba(255,255,255,.06); border: 1px solid var(--clr-border); border-radius: 4px; padding: 2px 6px; color: var(--clr-gold-light); }
.prose pre { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--space-6); overflow-x: auto; margin: 2em 0; }
.prose pre code { background: none; border: none; padding: 0; font-size: .85rem; }
.prose blockquote { border-left: 3px solid var(--clr-gold); padding-left: var(--space-6); margin: 2em 0; color: var(--clr-text-secondary); font-style: italic; font-size: var(--text-xl); }
.prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: 1.5em; }
.prose li { margin-bottom: .5em; }
.prose ul li::marker { color: var(--clr-gold); }
.prose img { border-radius: var(--radius-lg); margin: 2em 0; border: 1px solid var(--clr-border); }
.prose table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: var(--text-sm); }
.prose th { background: var(--clr-surface-2); padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; color: var(--clr-white); border-bottom: 1px solid var(--clr-border); }
.prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--clr-border); color: var(--clr-text-secondary); }
.prose hr { border: none; border-top: 1px solid var(--clr-border); margin: 3em 0; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-float-slow, .anim-glow-gold, .anim-glow-ai,
  .anim-spin, .anim-spin-slow, .anim-bounce, .text-shimmer,
  .hero-orb--1, .hero-orb--2, .hero-orb--3,
  .hero-float-card--1, .hero-float-card--2, .hero-float-card--3,
  .tech-strip-inner { animation: none !important; }
}