/* Intro accueil — logo centré puis transition vers le hero (inspiré React Bits : glow, blur-in, shimmer) */

body.hero-intro-active {
  overflow: hidden;
}

body.hero-intro-active .nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.hero-intro-done .nav {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body.hero-intro-active .hero-scroll {
  opacity: 0;
}

body.hero-intro-done .hero-scroll {
  animation: heroScrollIn 0.6s ease 0.9s forwards;
}

@keyframes heroScrollIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Couche intro plein écran */
.hero-intro-layer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(0, 245, 212, 0.08) 0%, transparent 55%),
    rgba(10, 10, 11, 0.97);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.hero-intro-layer--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-intro-ring {
  position: absolute;
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  border-radius: 50%;
  border: 1px solid rgba(0, 245, 212, 0.2);
  animation: introRingPulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

.hero-intro-ring--2 {
  width: min(85vw, 600px);
  height: min(85vw, 600px);
  border-color: rgba(254, 228, 64, 0.12);
  animation-delay: -1.2s;
  animation-duration: 4.2s;
}

@keyframes introRingPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.35; }
  50% { transform: scale(1.05); opacity: 0.7; }
}

.hero-intro-glow {
  position: absolute;
  width: min(90vw, 640px);
  height: min(50vh, 320px);
  background: radial-gradient(ellipse at center, rgba(0, 245, 212, 0.35) 0%, transparent 68%);
  filter: blur(40px);
  opacity: 0.55;
  animation: introGlowBreath 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes introGlowBreath {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.08); }
}

.hero-intro-clone {
  position: relative;
  z-index: 2;
  max-width: min(680px, 92vw);
  width: auto;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
  filter: drop-shadow(0 0 60px rgba(0, 245, 212, 0.45));
  animation: introLogoFloat 5s ease-in-out infinite;
  will-change: transform, left, top, width, height;
}

.hero-intro-clone.hero-intro-clone--moving {
  animation: none;
  filter: drop-shadow(0 0 40px rgba(0, 245, 212, 0.35));
}

@keyframes introLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-intro-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 1.75rem;
  max-width: 22rem;
}

.hero-intro-welcome {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  letter-spacing: 0.12em;
  color: var(--blanc);
  opacity: 0;
  animation: introTextIn 0.9s var(--ease-out) 0.4s forwards;
}

.hero-intro-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gris);
  line-height: 1.45;
  opacity: 0;
  animation: introTextIn 0.6s var(--ease-out) 0.5s forwards;
}

.hero-intro-hint strong {
  color: var(--turquoise);
  font-weight: 600;
}

@keyframes introTextIn {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-intro-bar {
  position: absolute;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 70vw);
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.hero-intro-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--turquoise), var(--jaune));
  border-radius: 999px;
}

.hero-intro-skip {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--gris);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.hero-intro-skip:hover {
  color: var(--turquoise);
  border-color: rgba(0, 245, 212, 0.35);
  background: rgba(0, 245, 212, 0.08);
}

/* Pendant l'intro : contenu hero masqué (logo réel invisible) */
body.hero-intro-active .hero-logo {
  visibility: hidden;
}

body.hero-intro-active .hero-content > *:not(.hero-logo-wrap) {
  opacity: 0 !important;
  animation: none !important;
  transform: translateY(20px);
  pointer-events: none;
}

body.hero-intro-active .hero-logo-wrap {
  display: none;
}

/* Après intro : pas de gros logo (déjà dans la barre de navigation) */
body.hero-intro-done .hero-logo-wrap {
  display: none !important;
}

/* Hero compact — tout visible d'un coup d'œil */
body.page-home.hero-intro-done .hero,
body.page-home.hero-intro-skip-all .hero {
  min-height: 0;
  height: auto;
  align-items: flex-start;
  justify-content: flex-start;
  padding: max(4.75rem, calc(env(safe-area-inset-top) + 3.5rem)) var(--space-md) var(--space-lg);
}

body.page-home.hero-intro-done .hero-content,
body.page-home.hero-intro-skip-all .hero-content {
  padding: 0;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

body.page-home.hero-intro-done .hero-label,
body.page-home.hero-intro-skip-all .hero-label {
  margin-bottom: 0.35rem;
  margin-top: 0;
}

body.page-home.hero-intro-done .hero-home-lead,
body.page-home.hero-intro-skip-all .hero-home-lead {
  animation: heroBlurIn 0.5s var(--ease-out) 0.12s forwards;
  opacity: 0;
}

body.page-home.hero-intro-done .hero-home-card--primary,
body.page-home.hero-intro-skip-all .hero-home-card--primary {
  opacity: 0;
  animation: heroBlurIn 0.5s var(--ease-out) 0.24s forwards;
}

body.page-home.hero-intro-done .hero-home-row,
body.page-home.hero-intro-skip-all .hero-home-row {
  opacity: 0;
  animation: heroBlurIn 0.5s var(--ease-out) 0.36s forwards;
}

body.page-home.hero-intro-done .hero-address-spotlight,
body.page-home.hero-intro-skip-all .hero-address-spotlight {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
}

body.page-home.hero-intro-done .hero-buttons,
body.page-home.hero-intro-skip-all .hero-buttons {
  margin-bottom: 0.5rem;
}

body.page-home.hero-intro-done .hero-google-review,
body.page-home.hero-intro-skip-all .hero-google-review {
  margin-top: 0.75rem;
}

body.page-home.hero-intro-done .hero-secondary-entry,
body.page-home.hero-intro-skip-all .hero-secondary-entry {
  margin-top: 0.5rem;
}

body.page-home.hero-intro-done .hero-social,
body.page-home.hero-intro-skip-all .hero-social {
  margin-top: 0.75rem;
}

body.page-home.hero-intro-done .hero-scroll {
  display: none;
}

/* Révélation rapide */
body.hero-intro-done .hero-label {
  animation: heroBlurIn 0.5s var(--ease-out) 0.05s forwards;
}

body.hero-intro-done .hero-social {
  animation: heroBlurIn 0.5s var(--ease-out) 0.48s forwards;
}

@keyframes heroBlurIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Shimmer discret sur CTA principal après intro */
body.hero-intro-done .btn-hero-primary-xl {
  position: relative;
  overflow: hidden;
}

body.hero-intro-done .btn-hero-primary-xl::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 58%
  );
  transform: translateX(-120%);
  animation: heroBtnShimmer 2.8s ease-in-out 1.1s 2;
  pointer-events: none;
}

@keyframes heroBtnShimmer {
  to { transform: translateX(120%); }
}

/* Sans intro (réduit / skip immédiat) */
body.hero-intro-skip-all .hero-intro-layer {
  display: none;
}

body.hero-intro-skip-all .hero-logo,
body.hero-intro-skip-all .hero-label,
body.hero-intro-skip-all .hero-subtitle,
body.hero-intro-skip-all .hero-buttons,
body.hero-intro-skip-all .hero-google-review,
body.hero-intro-skip-all .hero-secondary-entry,
body.hero-intro-skip-all .hero-social {
  animation: fadeUp 0.8s var(--ease-out) forwards;
}

@media (max-width: 600px) {
  .hero-intro-clone {
    max-height: 36vh;
  }
  .hero-intro-copy {
    margin-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro-layer,
  .hero-intro-ring,
  .hero-intro-glow,
  .hero-intro-clone {
    animation: none !important;
  }
}