/**
 * Fichier : /assets/css/animations.css
 * Rôle    : Animations avancées — particles, scroll-driven, micro-interactions,
 *           ticker, morphing buttons, skeleton loading, page transitions
 */

/* ─── Page transition ─────────────────────────────────────────────────────── */
.page-transition {
  position: fixed; inset: 0; background: var(--red);
  transform: translateX(-100%); z-index: 9999; pointer-events: none;
}
.page-transition.enter  { animation: ptEnter  .45s cubic-bezier(.76,0,.24,1) forwards }
.page-transition.exit   { animation: ptExit   .45s cubic-bezier(.76,0,.24,1) forwards }
@keyframes ptEnter { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes ptExit  { from{transform:translateX(0)}     to{transform:translateX(100%)} }

/* ─── Reveal amélioré (stagger par enfant) ───────────────────────────────── */
.reveal       { opacity:0; transform:translateY(32px) scale(.98); transition:opacity .65s ease,transform .65s ease }
.reveal.visible { opacity:1; transform:none }
.reveal-left  { opacity:0; transform:translateX(-40px); transition:opacity .7s ease,transform .7s ease }
.reveal-left.visible { opacity:1; transform:none }
.reveal-right { opacity:0; transform:translateX(40px);  transition:opacity .7s ease,transform .7s ease }
.reveal-right.visible { opacity:1; transform:none }
.reveal-scale { opacity:0; transform:scale(.9);          transition:opacity .6s ease,transform .6s ease }
.reveal-scale.visible { opacity:1; transform:none }

/* Stagger automatique sur les grilles */
.product-grid .product-card:nth-child(1)  { transition-delay:.05s }
.product-grid .product-card:nth-child(2)  { transition-delay:.12s }
.product-grid .product-card:nth-child(3)  { transition-delay:.19s }
.product-grid .product-card:nth-child(4)  { transition-delay:.26s }
.product-grid .product-card:nth-child(5)  { transition-delay:.33s }
.product-grid .product-card:nth-child(6)  { transition-delay:.40s }
.category-grid .category-card:nth-child(1) { transition-delay:.05s }
.category-grid .category-card:nth-child(2) { transition-delay:.13s }
.category-grid .category-card:nth-child(3) { transition-delay:.21s }
.category-grid .category-card:nth-child(4) { transition-delay:.29s }
.review-grid .review:nth-child(1) { transition-delay:.07s }
.review-grid .review:nth-child(2) { transition-delay:.16s }
.review-grid .review:nth-child(3) { transition-delay:.25s }

/* ─── Ticker / marquee ────────────────────────────────────────────────────── */
.ticker-wrap { overflow:hidden; background:#0a0c0e; border-top:1px solid #1e2124; border-bottom:1px solid #1e2124; padding:10px 0 }
.ticker-inner { display:flex; width:max-content; animation:ticker 28s linear infinite }
.ticker-inner:hover { animation-play-state:paused }
.ticker-item { white-space:nowrap; padding:0 48px; font-size:11px; font-weight:800; letter-spacing:1.5px; color:#555; display:flex; align-items:center; gap:12px }
.ticker-item span { color:var(--red) }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── Counter animation ───────────────────────────────────────────────────── */
.count-up { display:inline-block }

/* ─── Hero particles ──────────────────────────────────────────────────────── */
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.particle {
  position:absolute; border-radius:50%; background:rgba(239,11,11,.15);
  animation:floatParticle linear infinite;
}
@keyframes floatParticle {
  0%   { transform:translateY(100vh) scale(0); opacity:0 }
  10%  { opacity:.6 }
  90%  { opacity:.3 }
  100% { transform:translateY(-20px) scale(1); opacity:0 }
}

/* ─── Glitch text ─────────────────────────────────────────────────────────── */
.glitch { position:relative }
.glitch::before, .glitch::after {
  content:attr(data-text); position:absolute; inset:0;
  background:transparent; clip-path:polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch::before { left:2px; text-shadow:-2px 0 #ff0040; animation:glitchA 3.5s infinite }
.glitch::after  { left:-2px; text-shadow:2px 0 #00eeff; animation:glitchB 3.5s infinite }
@keyframes glitchA {
  0%,85%,87%,100% { transform:none; opacity:1 }
  86% { transform:translateX(-4px) skewX(-3deg); opacity:.8 }
}
@keyframes glitchB {
  0%,85%,87%,100% { transform:none; opacity:1 }
  86% { transform:translateX(4px) skewX(3deg); opacity:.8 }
}

/* ─── Bouton morphing ─────────────────────────────────────────────────────── */
.btn-morph { position:relative; overflow:hidden }
.btn-morph::after {
  content:''; position:absolute; inset:0; background:rgba(255,255,255,.12);
  transform:translateX(-100%) skewX(-15deg); transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.btn-morph:hover::after { transform:translateX(100%) skewX(-15deg) }

/* ─── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,#1a1d20 25%,#252830 50%,#1a1d20 75%); background-size:200% 100%; animation:shimmer 1.5s infinite }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.skeleton-card { background:#111416; border:1px solid #24272a; overflow:hidden }
.skeleton-img  { height:310px }
.skeleton-line { height:14px; margin:12px 16px; border-radius:2px }
.skeleton-line.w80 { width:80% }
.skeleton-line.w60 { width:60% }
.skeleton-line.w40 { width:40% }

/* ─── Progress bar de scroll ─────────────────────────────────────────────── */
#scrollProgress {
  position:fixed; top:0; left:0; height:3px; background:var(--red);
  width:0; z-index:200; transition:width .1s linear;
  box-shadow:0 0 10px var(--red);
}

/* ─── Cart badge pop ──────────────────────────────────────────────────────── */
@keyframes cartPop {
  0%  { transform:scale(1) }
  40% { transform:scale(1.6) rotate(-8deg) }
  70% { transform:scale(.85) rotate(4deg) }
  100%{ transform:scale(1) }
}
.cart-pop { animation:cartPop .45s cubic-bezier(.36,.07,.19,.97) }

/* ─── Product image zoom on hover ────────────────────────────────────────── */
.product-image { cursor:pointer }

/* ─── Scroll hint arrow (hero) ───────────────────────────────────────────── */
.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:scrollBounce 2s ease-in-out infinite; z-index:2;
}
.scroll-hint span { font-size:9px; letter-spacing:2px; color:rgba(255,255,255,.5) }
.scroll-hint svg  { width:20px; opacity:.5 }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ─── Floating label form ────────────────────────────────────────────────── */
.float-group { position:relative; margin-bottom:20px }
.float-group input, .float-group textarea {
  width:100%; background:#0d0f10; border:1px solid #2a2d30; color:#fff;
  padding:22px 14px 8px; outline:none; font:inherit;
  transition:border-color .25s;
}
.float-group label {
  position:absolute; left:14px; top:15px; font-size:13px; color:#666;
  transition:all .2s; pointer-events:none; font-weight:400; letter-spacing:0;
}
.float-group input:focus,
.float-group input:not(:placeholder-shown),
.float-group textarea:focus,
.float-group textarea:not(:placeholder-shown) { border-color:var(--red) }
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label,
.float-group textarea:focus ~ label,
.float-group textarea:not(:placeholder-shown) ~ label {
  top:6px; font-size:9px; letter-spacing:1px; color:var(--red); font-weight:700;
}
.float-group input::placeholder,
.float-group textarea::placeholder { color:transparent }

/* ─── Product card hover effects ─────────────────────────────────────────── */
.product-card { --shine-x:50%; --shine-y:50% }
.product-card::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255,255,255,.04) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.product-card:hover::before { opacity:1 }
.product-card { position:relative }

/* ─── Notification badge pulse ───────────────────────────────────────────── */
.cart-btn span::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:var(--red); animation:pulse 2s ease-out infinite; opacity:0;
}
@keyframes pulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2);opacity:0} }

/* ─── Section divider animated ───────────────────────────────────────────── */
.divider-anim {
  width:60px; height:3px; background:var(--red); margin:0 auto 32px;
  position:relative; overflow:hidden;
}
.divider-anim::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:dividerShine 2s linear infinite;
}
@keyframes dividerShine { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ─── Steps / Checkout progress ──────────────────────────────────────────── */
.checkout-steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:48px }
.step { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; flex:1; max-width:160px }
.step-num {
  width:42px; height:42px; border-radius:50%; border:2px solid #333;
  display:grid; place-items:center; font-weight:900; font-size:14px;
  background:#111416; color:#666; transition:.3s; position:relative; z-index:1;
}
.step.active   .step-num { border-color:var(--red); color:var(--red); background:#1a0303 }
.step.done     .step-num { border-color:var(--red); background:var(--red); color:#fff }
.step-label { font-size:10px; font-weight:700; letter-spacing:.8px; color:#555; text-align:center }
.step.active .step-label, .step.done .step-label { color:var(--white) }
.step-line { flex:1; height:2px; background:#222; position:relative; top:-20px; max-width:80px }
.step-line.done { background:var(--red) }

/* ─── Order status badge ─────────────────────────────────────────────────── */
.status-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; font-size:10px; font-weight:800; letter-spacing:.8px;
}
.status-pending    { background:#1a1200; color:#f59e0b; border:1px solid #3d2e00 }
.status-paid       { background:#0a1f0a; color:#22c55e; border:1px solid #14532d }
.status-processing { background:#0a1220; color:#3b82f6; border:1px solid #1e3a5f }
.status-shipped    { background:#150f20; color:#a855f7; border:1px solid #3b1f6e }
.status-delivered  { background:#0a1f0a; color:#10b981; border:1px solid #064e3b }
.status-cancelled  { background:#1a0a0a; color:#ef4444; border:1px solid #7f1d1d }

/* ─── Account dashboard ───────────────────────────────────────────────────── */
.account-layout { display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start }
.account-sidebar { background:#111416; border:1px solid #25282b; padding:30px }
.account-nav a {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  font-size:12px; font-weight:700; letter-spacing:.5px; color:#888;
  border-left:3px solid transparent; margin:2px 0;
  transition:color .2s, border-color .2s, background .2s;
}
.account-nav a:hover { color:#fff; background:rgba(255,255,255,.04) }
.account-nav a.active { color:var(--red); border-left-color:var(--red); background:rgba(239,11,11,.06) }
.account-nav a .nav-icon { font-size:16px }
.account-card { background:#111416; border:1px solid #25282b; padding:32px; margin-bottom:20px }
.account-card h3 { font-family:Oswald; font-style:italic; font-size:24px; margin:0 0 24px; border-bottom:1px solid #25282b; padding-bottom:12px }

/* ─── Order table ─────────────────────────────────────────────────────────── */
.order-table { width:100%; border-collapse:collapse; font-size:13px }
.order-table th { text-align:left; font-size:10px; letter-spacing:1px; color:#666; padding:10px 14px; border-bottom:1px solid #25282b }
.order-table td { padding:14px; border-bottom:1px solid #1a1d20; color:#c8c8c8 }
.order-table tr:hover td { background:rgba(255,255,255,.02) }
.order-table a { color:var(--red) }

/* ─── Payment method selector ────────────────────────────────────────────── */
.payment-options { display:grid; gap:12px }
.payment-option { position:relative }
.payment-option input[type=radio] { position:absolute; opacity:0; pointer-events:none }
.payment-option label {
  display:flex; align-items:flex-start; gap:16px; padding:20px;
  background:#0d0f10; border:2px solid #2a2d30; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.payment-option input:checked + label { border-color:var(--red); background:#140808 }
.payment-option label .pm-icon { font-size:28px; flex:none }
.payment-option label .pm-name { font-weight:800; font-size:14px; display:block; margin-bottom:4px }
.payment-option label .pm-desc { font-size:12px; color:#888; line-height:1.5 }
.payment-details { padding:16px; background:#0a0c0e; border:1px solid #1e2124; margin-top:12px; font-size:13px; line-height:1.8; color:#c8c8c8; display:none }
.payment-details.show { display:block }

/* ─── Confetti animation (order success) ────────────────────────────────── */
.confetti-piece {
  position:fixed; width:10px; height:10px; top:-10px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform:translateY(100vh) rotate(720deg); opacity:0 }
}

/* ─── Typewriter cursor ──────────────────────────────────────────────────── */
.typewriter::after { content:'|'; animation:blink .8s step-end infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── Responsive account ─────────────────────────────────────────────────── */
@media(max-width:900px) {
  .account-layout { grid-template-columns:1fr }
  .account-sidebar { order:-1 }
  .account-nav { display:flex; flex-wrap:wrap; gap:4px }
  .account-nav a { border-left:0; border-bottom:3px solid transparent; padding:10px 14px }
  .account-nav a.active { border-bottom-color:var(--red); border-left-color:transparent }
}
@media(max-width:600px) {
  .checkout-steps { gap:0 }
  .step-label { display:none }
  .step-line { max-width:40px }
}

/* ════════════════════════════════════════════════════════
   ACCOUNT PAGE HERO ANIMATIONS
   ════════════════════════════════════════════════════════ */

.account-hero { animation: heroFadeIn .6s ease both }
@keyframes heroFadeIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }

.account-hero-avatar {
  animation: avatarPop .8s cubic-bezier(.34,1.56,.64,1) both .2s;
}
@keyframes avatarPop { from{transform:scale(0) rotate(-180deg)} to{transform:scale(1) rotate(0)} }

.ahstat { animation: statSlide .5s ease both }
.ahstat:nth-child(1) { animation-delay:.3s }
.ahstat:nth-child(2) { animation-delay:.4s }
.ahstat:nth-child(3) { animation-delay:.5s }
@keyframes statSlide { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:none} }

/* ANAV hover bar */
.anav-item { overflow:hidden }
.anav-item::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:0;
  background:linear-gradient(to left, rgba(239,11,11,.1), transparent);
  transition:width .3s;
}
.anav-item:hover::after { width:100% }
.anav-item.is-active::after { width:100%; background:linear-gradient(to left,rgba(239,11,11,.08),transparent) }

/* Dashboard quick items hover */
.dquick-item { position:relative; overflow:hidden }
.dquick-item::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--red); transform:scaleX(0); transition:transform .3s;
}
.dquick-item:hover::before { transform:scaleX(1) }
.dquick-item b { transition:color .2s }
.dquick-item:hover b { color:var(--red) }

/* Order row hover */
.order-row { position:relative }
.order-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transition:transform .25s;
}
.order-row:hover::before { transform:scaleY(1) }

/* ════════ AUTH PAGE ANIMATIONS ════════ */

.auth-card-pro { animation:cardRise .5s ease both }
@keyframes cardRise { from{opacity:0;transform:translateY(30px) scale(.98)} to{opacity:1;transform:none} }

/* Auth field focus glow */
.auth-field input:focus {
  background:#0d1014;
}
.auth-field::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--red); transform:scaleX(0); transition:transform .3s; z-index:3;
}
.auth-field:focus-within::after { transform:scaleX(1) }

/* Submit button loading state */
.btn-auth-submit.loading { pointer-events:none; opacity:.8 }
.btn-auth-submit.loading span::after { content:' ...'; animation:dots 1s infinite }
@keyframes dots { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Cart row animations */
.cart-row { animation:cartRowIn .4s ease both }
.cart-row:nth-child(1) { animation-delay:.05s }
.cart-row:nth-child(2) { animation-delay:.10s }
.cart-row:nth-child(3) { animation-delay:.15s }
.cart-row:nth-child(4) { animation-delay:.20s }
@keyframes cartRowIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }

/* Summary card pulse on total change */
.summary-row--total b { transition:color .3s, transform .3s }
.summary-row--total b.updated { color:var(--red); transform:scale(1.1) }

/* Status badge pulse for pending */
.status-pending { animation:pendingPulse 2s ease-in-out infinite }
@keyframes pendingPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 3px rgba(245,158,11,.2)} }

/* ════════ PAGE HERO (pages internes) ════════ */
.page-hero { background:linear-gradient(135deg,#07090b 0%,#100808 50%,#07090b 100%); position:relative }
.page-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
}