/* ============================================
   FLOWAYZ OVERRIDE LAYER (petit — 152 lignes)
   ============================================

   Loaded par 3 layouts : application.html.erb, demo_sharing.html.erb,
   onboarding.html.erb (via stylesheet_link_tag "flowayz_override.css").

   Contient 4 blocs qui n'ont pas trouvé leur place dans les components
   dédiés et qui méritent d'être migrés progressivement :

   1. Animations @keyframes custom (fade-in, scale-bounce, pulse-subtle,
      shimmer) utilisées par le premium request form → cibles pour migration
      vers base/animations.css en Sprint 1.5.

   2. Transitions globales sur buttons/a/labels (300ms cubic-bezier) →
      redondantes avec les tokens --transition-*. À auditer Sprint 1.5.

   3. Focus indicators *:focus-visible en outline accent → à remonter dans
      base/utilities.css ou themes/utilities.css (valeur universelle).

   4. Badge contrast fixes dark mode (.badge-teal, .badge-accent) → à migrer
      dans components/badges.css Sprint 1.4.

   Tant que ces 4 blocs sont ici, ne pas supprimer le fichier.
   Cf. plan design premium Sprint 1.3 (Steve Jobs Neat, 2026-04-24).
   ============================================ */

/* ============================================
   PREMIUM REQUEST FORM ENHANCEMENTS
   Custom animations and micro-interactions
   ============================================ */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* Premium focus states for form elements */
textarea:focus,
select:focus,
input[type="file"]:focus-visible + label {
  outline: none;
}

/* Smooth transitions for all interactive elements */
label[class*="cursor-pointer"],
button,
a[class*="btn"],
input[type="radio"] + div {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Enhanced hover states for request type cards */
input[type="radio"]:checked + div {
  animation: scale-bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes scale-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Priority selection pulse effect */
input[type="radio"]:checked ~ span {
  animation: pulse-subtle 0.5s ease-out;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* File upload zone shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Smooth breadcrumb arrow transitions */
nav[aria-label="Breadcrumb"] svg {
  transition: transform 0.2s ease;
}

nav[aria-label="Breadcrumb"] a:hover svg {
  transform: scale(1.2);
}

/* Enhanced submit button ripple effect */
button[type="submit"]:active {
  position: relative;
  overflow: hidden;
}

/* Character counter smooth transitions */
[data-request-form-target="charCount"] {
  transition: color 0.3s ease;
}

/* Improved file preview list animations */
.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

/* Accessible focus indicators with accent color */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Remove default focus for radio buttons (using peer-focus-visible instead) */
input[type="radio"]:focus-visible {
  outline: none;
}

/* Preserve specific transition overrides */
button,
a,
label[class*="cursor-pointer"],
[class*="transition-all"] {
  transition-property: all;
  transition-duration: 300ms;
}

/* ============================================
   BADGE CONTRAST FIXES — DARK MODE
   Corrige le problème teal-sur-teal illisible
   ============================================ */

/* badge-teal : texte très clair sur fond sombre — lisible partout */
html.dark .badge-teal,
[data-theme="dark"] .badge-teal,
[data-mode="dark"] .badge-teal {
  background: color-mix(in srgb, var(--flowayz-teal) 15%, var(--bg-primary)) !important;
  color: var(--flowayz-teal) !important;
  border: 1px solid color-mix(in srgb, var(--flowayz-teal) 35%, transparent) !important;
}

/* badge-accent (sidebar & ailleurs) : fond solide, texte contrasté */
html.dark .badge-accent,
[data-theme="dark"] .badge-accent,
[data-mode="dark"] .badge-accent {
  background: var(--accent) !important;
  color: var(--accent-contrast, #fff) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   PREMIUM PRIMARY CTA — gradient + sheen + reflet animé (façon lemlist / Rollizi).
   Accent-aware (suit --accent-h/s/l → presets + custom). Scopé aux CTA PRIMAIRES
   uniquement (secondaires/outline/ghost restent sobres). Pas de zoom : lift
   translateY only (règle no-zoom-hover). Reflet animé seulement si l'utilisateur
   accepte le mouvement. CTA signature du landing (.vt-*) explicitement préservés.
   ============================================================================ */
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn),
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn),
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn),
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn) {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  border: 1px solid var(--accent-edge, transparent) !important;
  background: var(--accent-gradient, var(--accent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 22px -8px var(--accent),
    0 2px 6px -2px rgba(15, 23, 42, 0.18) !important;
  transition:
    box-shadow 0.22s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.22s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.2s ease !important;
}

.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):hover,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):hover {
  background: var(--accent-gradient-hover, var(--accent-hover)) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 30px -8px var(--accent),
    0 3px 10px -2px rgba(15, 23, 42, 0.22) !important;
}

.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):active,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):active,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):active,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 5px rgba(15, 23, 42, 0.20),
    0 4px 12px -6px var(--accent) !important;
}

/* Reflet (sous le contenu via z-index). Pseudo non rendu sur <input> — OK, ces
   boutons gardent gradient + glow + lift. */
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn) > *,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn) > *,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn) > *,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn) > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
  .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
  .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
  .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn)::before {
    transition: transform 0.75s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before,
  .btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before,
  .btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before,
  .auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before {
    transform: translateX(130%);
  }
}