/* ==========================================================================
   Loading Animation - Billetterie Moderne (CSS pur — sans syntaxe SCSS)
   ========================================================================== */

.app-loading {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #000000 0%, #1a0033 50%, #000000 100%);
  z-index: 9999;
  overflow: hidden;
}

.app-loading::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 50%, rgba(124, 58, 237, 0.3), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(236, 72, 153, 0.2), transparent 50%);
  animation: drift 20s ease-in-out infinite;
}

.app-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(45deg, transparent 48%, rgba(124, 58, 237, 0.03) 49%, rgba(124, 58, 237, 0.03) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(236, 72, 153, 0.03) 49%, rgba(236, 72, 153, 0.03) 51%, transparent 52%);
  background-size: 100px 100px;
  animation: grid-scroll 20s linear infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%       { transform: translate(30px, -30px) rotate(5deg); }
  66%       { transform: translate(-20px, 20px) rotate(-5deg); }
}

@keyframes grid-scroll {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 100px 100px, -100px -100px; }
}

/* --------------------------------------------------------------------------
   Contenu central
   -------------------------------------------------------------------------- */

.app-loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.app-loading-logo {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.6);
  animation: logo-pulse 2s ease-in-out infinite;
}

.app-loading-logo svg {
  width: 50px;
  height: 50px;
  color: white;
}

@keyframes logo-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 25px 80px rgba(124, 58, 237, 0.8);
  }
}

/* --------------------------------------------------------------------------
   Logo ring / orbit (loading-with-tickets)
   -------------------------------------------------------------------------- */

.logo-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.7);
  animation: logo-pulse 2s ease-in-out infinite;
  overflow: hidden;
  z-index: 1;
}

.logo-ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #7c3aed;
  border-right-color: #ec4899;
  animation: ring-spin 1.8s linear infinite;
}

@keyframes ring-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.orbit-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ec4899;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.8);
  animation: ring-spin 1.8s linear infinite;
  transform-origin: 50% 60px;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.brand-name {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-tagline {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-top: -1.5rem;
}

/* --------------------------------------------------------------------------
   Ticket stage (loading-with-tickets)
   -------------------------------------------------------------------------- */

.ticket-stage {
  position: relative;
  width: 320px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-stage .ticket {
  position: absolute;
  width: 80px;
  height: 50px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.85), rgba(236, 72, 153, 0.85));
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
  overflow: hidden;
}

.ticket-stage .ticket .shine {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  background: rgba(255, 255, 255, 0.15);
  transform: skewX(-20deg);
  animation: shine-move 2s ease-in-out infinite;
}

@keyframes shine-move {
  0%   { left: -60%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}

.ticket-stage .ticket:nth-child(1) { animation: ticket-slide 2.5s ease-in-out infinite; animation-delay: 0s;    opacity: 0; }
.ticket-stage .ticket:nth-child(2) { animation: ticket-slide 2.5s ease-in-out infinite; animation-delay: 0.5s;  opacity: 0; }
.ticket-stage .ticket:nth-child(3) { animation: ticket-slide 2.5s ease-in-out infinite; animation-delay: 1s;    opacity: 0; }
.ticket-stage .ticket:nth-child(4) { animation: ticket-slide 2.5s ease-in-out infinite; animation-delay: 1.5s;  opacity: 0; }
.ticket-stage .ticket:nth-child(5) { animation: ticket-slide 2.5s ease-in-out infinite; animation-delay: 2s;    opacity: 0; }

@keyframes ticket-slide {
  0%   { transform: translateX(-160px) rotate(-8deg) scale(0.8); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateX(0)      rotate(0deg)  scale(1);   opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(160px)  rotate(8deg)  scale(0.8); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Barre de progression (loading-with-tickets)
   -------------------------------------------------------------------------- */

.progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 260px;
}

.progress-track {
  width: 100%;
  height: 4px;
  background: rgba(124, 58, 237, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  border-radius: 2px;
  animation: progress-loop 1.8s ease-in-out infinite;
}

@keyframes progress-loop {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.loading-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  animation: text-fade 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Glow orbs (background)
   -------------------------------------------------------------------------- */

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.glow-orb.g1 {
  width: 400px;
  height: 400px;
  background: rgba(124, 58, 237, 0.25);
  top: -100px;
  left: -100px;
  animation: orb-drift1 12s ease-in-out infinite;
}

.glow-orb.g2 {
  width: 300px;
  height: 300px;
  background: rgba(236, 72, 153, 0.2);
  bottom: -80px;
  right: -60px;
  animation: orb-drift2 15s ease-in-out infinite;
}

.glow-orb.g3 {
  width: 200px;
  height: 200px;
  background: rgba(124, 58, 237, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orb-pulse 4s ease-in-out infinite;
}

@keyframes orb-drift1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(40px, 30px); }
}

@keyframes orb-drift2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-30px, -20px); }
}

@keyframes orb-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); }
}

/* --------------------------------------------------------------------------
   Background tickets flottants (#bgTickets — rempli via JS si besoin)
   -------------------------------------------------------------------------- */

.bg-tickets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Loader alternatif — Tickets qui défilent (version standalone)
   -------------------------------------------------------------------------- */

.ticket-loader {
  position: relative;
  width: 300px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-loader .ticket {
  position: absolute;
  width: 80px;
  height: 50px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(236, 72, 153, 0.8));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.ticket-loader .ticket::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    white 0px,
    white 4px,
    transparent 4px,
    transparent 8px
  );
}

.ticket-loader .ticket::after {
  content: '';
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M21 8v13H3V8M1 3h22v5H1z'/%3E%3Cpath d='M10 12L8 21M14 12l2 9'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.ticket-loader .ticket:nth-child(1) { animation: ticket-slide 2s ease-in-out infinite; animation-delay: 0s; }
.ticket-loader .ticket:nth-child(2) { animation: ticket-slide 2s ease-in-out infinite; animation-delay: 0.4s; opacity: 0; }
.ticket-loader .ticket:nth-child(3) { animation: ticket-slide 2s ease-in-out infinite; animation-delay: 0.8s; opacity: 0; }

/* --------------------------------------------------------------------------
   Texte de chargement
   -------------------------------------------------------------------------- */

.app-loading p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  animation: text-fade 2s ease-in-out infinite;
}

@keyframes text-fade {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Loader alternatif — Cercle de tickets
   -------------------------------------------------------------------------- */

.ticket-circle-loader {
  position: relative;
  width: 120px;
  height: 120px;
}

.ticket-circle-loader .ticket-mini {
  position: absolute;
  width: 20px;
  height: 30px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-radius: 4px;
  top: 50%;
  left: 50%;
}

.ticket-circle-loader .ticket-mini::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    white 0px,
    white 2px,
    transparent 2px,
    transparent 4px
  );
}

/* Remplacement du @for SCSS — 8 positions calculées manuellement */
.ticket-circle-loader .ticket-mini:nth-child(1) { transform: rotate(0deg)    translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 0s; }
.ticket-circle-loader .ticket-mini:nth-child(2) { transform: rotate(45deg)   translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 0.2s; }
.ticket-circle-loader .ticket-mini:nth-child(3) { transform: rotate(90deg)   translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 0.4s; }
.ticket-circle-loader .ticket-mini:nth-child(4) { transform: rotate(135deg)  translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 0.6s; }
.ticket-circle-loader .ticket-mini:nth-child(5) { transform: rotate(180deg)  translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 0.8s; }
.ticket-circle-loader .ticket-mini:nth-child(6) { transform: rotate(225deg)  translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 1.0s; }
.ticket-circle-loader .ticket-mini:nth-child(7) { transform: rotate(270deg)  translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 1.2s; }
.ticket-circle-loader .ticket-mini:nth-child(8) { transform: rotate(315deg)  translateY(-50px); animation: ticket-fade 1.6s ease-in-out infinite; animation-delay: 1.4s; }

@keyframes ticket-fade {
  0%, 100% {
    opacity: 0.2;
    scale: 0.8;
  }
  50% {
    opacity: 1;
    scale: 1;
  }
}

/* --------------------------------------------------------------------------
   Loader — Barre de progression simple
   -------------------------------------------------------------------------- */

.progress-loader {
  width: 200px;
  height: 6px;
  background: rgba(124, 58, 237, 0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #7c3aed, #ec4899, transparent);
  animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* --------------------------------------------------------------------------
   Loader — Points rebondissants
   -------------------------------------------------------------------------- */

.dot-loader {
  display: flex;
  gap: 12px;
}

.dot-loader .dot {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
  animation: dot-bounce 1.4s ease-in-out infinite;
}

.dot-loader .dot:nth-child(1) { animation-delay: 0s; }
.dot-loader .dot:nth-child(2) { animation-delay: 0.2s; }
.dot-loader .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40%            { transform: scale(1.2); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Variantes de layout
   -------------------------------------------------------------------------- */

.loading-with-tickets .app-loading-content { gap: 3rem; }
.loading-with-circle  .app-loading-content { gap: 2.5rem; }
.loading-with-progress .app-loading-content { gap: 2rem; }
.loading-with-dots    .app-loading-content { gap: 2rem; }

.loading-with-progress .app-loading p { order: -1; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {
  .ticket-loader {
    width: 200px;
  }

  .ticket-loader .ticket {
    width: 60px;
    height: 40px;
  }

  .ticket-loader .ticket::after {
    width: 24px;
    height: 24px;
  }

  .app-loading-logo {
    width: 80px;
    height: 80px;
  }

  .app-loading-logo svg {
    width: 40px;
    height: 40px;
  }

  .app-loading p {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .ticket-stage {
    width: 220px;
  }

  .ticket-stage .ticket {
    width: 60px;
    height: 40px;
  }

  .brand-name {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Respect de la préférence reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .app-loading::before,
  .app-loading::after,
  .logo-ring,
  .orbit-dot,
  .glow-orb,
  .progress-fill,
  .ticket-stage .ticket,
  .ticket-loader .ticket,
  .ticket-circle-loader .ticket-mini,
  .dot-loader .dot,
  .app-loading p,
  .loading-label {
    animation: none;
  }
}