/* =========================================================================
   immersive.css — couche ajoutée (ne modifie ni le texte ni la structure)
   1. photo de fond fixe plein écran, avec débord pour le panoramique
   2. brouillard cerise-titane : #3A0714 + backdrop-filter blur(20px)
   3. ouverture du brouillard autour du curseur (pointeurs fins uniquement)
   4. voiles translucides pour que la photo respire sous les surfaces
   5. typographie Inter + rythme d'espacement
   6. particules retirées + mouvement réduit
   ======================================================================= */

/* --- 1. Fond photo fixe ------------------------------------------------ */
html {
  background-color: #160207;
}

body {
  background-color: transparent;
}

.ig-bg {
  position: fixed;
  /* débord de 4 % : le panoramique à la souris n'expose jamais un bord */
  inset: -4%;
  z-index: -2;
  pointer-events: none;
  background:
    /* vignette cinématographique : les bords s'assombrissent doucement,
       le centre respire — la profondeur vient de la lumière, pas d'une
       nouvelle couleur (palette cerise existante) */
    radial-gradient(
      132% 96% at 50% 38%,
      rgba(14, 2, 5, 0) 32%,
      rgba(14, 2, 5, 0.34) 70%,
      rgba(9, 1, 3, 0.74) 100%
    ),
    linear-gradient(180deg, rgba(22, 2, 7, 0.42), rgba(22, 2, 7, 0.66)),
    url("assets/img/bg-cherry-fair.jpg") center center / cover no-repeat;
  transform: scale(1);
  transform-origin: 50% 45%;
  /* seule couche animée en continu : la parallaxe reste sur le compositeur */
  will-change: transform;
}

/* --- 2. Brouillard cerise-titane -------------------------------------- */
.ig-fog {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(58, 7, 20, 0.74) 0%,
    rgba(46, 6, 16, 0.82) 48%,
    rgba(22, 2, 7, 0.9) 100%
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* --- 3. Ouverture du brouillard autour du curseur ----------------------
   Ajoutée par immersive.js uniquement quand la souris a bougé : le
   brouillard se fend en cercle doux à l'endroit du pointeur, la photo
   nette transparaît. Sur écran tactile, le masque n'est jamais posé.   */
.ig-fog.ig-parting {
  --mx: 50%;
  --my: 40%;
  --mr: 170px;
  -webkit-mask-image: radial-gradient(
    circle var(--mr) at var(--mx) var(--my),
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 56%,
    #000 100%
  );
  mask-image: radial-gradient(
    circle var(--mr) at var(--mx) var(--my),
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 56%,
    #000 100%
  );
}

/* pointeur sans souris : pas de masque, donc aucun coût de peinture */
@media (hover: none), (pointer: coarse) {
  .ig-fog.ig-parting {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --- 4. Voiles : la photo transparaît sous les surfaces opaques -------- */
:root {
  --bg: rgba(42, 10, 18, 0.42);
  --bg-2: rgba(50, 12, 22, 0.46);
  --panel: rgba(61, 16, 32, 0.64);
  --beige: rgba(50, 12, 22, 0.46);
  --beige-deep: rgba(61, 16, 32, 0.62);
  --cream: rgba(36, 8, 16, 0.44);
  --cream-hi: rgba(74, 22, 38, 0.56);
  --chocolate: rgba(28, 6, 11, 0.56);
  --chocolate-deep: rgba(18, 4, 7, 0.72);
}

/* surfaces codées en dur dans la feuille d'origine */
.hero,
.page-hero,
.cream-bar,
.ticker {
  background-color: rgba(42, 10, 18, 0.4);
}

.site-footer {
  background-color: rgba(28, 6, 11, 0.58);
}

/* menu mobile : lisibilité avant tout */
@media (max-width: 1040px) {
  .nav {
    background-color: rgba(42, 10, 18, 0.95);
  }
}

/* --- 5. Typographie propre : Inter ------------------------------------ */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.nav a,
.eyebrow,
.tile-word,
.mega-title,
.loader-word,
.pt-word,
.h-big,
button,
input,
textarea,
select {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* --- 6. Rythme d'espacement (marges uniquement) ------------------------ */
main section p {
  max-width: 68ch;
}

.lead {
  max-width: 64ch;
}

.glass > p:last-child,
.info-card > p:last-child,
.tile > p:last-child,
.footer-brand p:last-child {
  margin-bottom: 0;
}

.btn-row {
  margin-top: 1.6rem;
}

.section-head + * {
  margin-top: 0;
}

/* --- 6bis. Hero : tout le bloc de texte aligné sur l'axe du wordmark ----
    Le sous-titre restait « ragged » (aligné à gauche dans sa colonne
    centrée) : on centre le texte du hero. Aucun changement de contenu. */
.hero-inner {
  text-align: center;
}

/* La règle éditoriale `main section p` force le texte à gauche : le
   sous-titre du hero retrouve l'axe du bloc (logo + boutons centrés). */
.hero .hero-tag {
  text-align: center;
}

/* --- 7. Particules retirées -------------------------------------------
   Le champ de sucre (12 <i> animés en boucle) ne tourne plus : on le
   retire aussi du rendu pour ne laisser aucun point immobile.         */
.sugar-snow {
  display: none;
}

/* --- 8. Mouvement réduit : brouillard statique, sans parallaxe -------- */
@media (prefers-reduced-motion: reduce) {
  .ig-bg,
  .ig-fog {
    transition: none !important;
    animation: none !important;
  }

  .ig-fog.ig-parting {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ig-bg {
    will-change: auto;
  }
}

@media (max-width: 768px) {
  .ig-bg {
    transform: none;
  }
}

/* --- 9. Vibe Immersive Garden : profondeur, ombres, cadres vivants ------
    Rien ici ne touche au texte ni aux couleurs : uniquement des ombres
    superposées (ambiante + contact), une révélation plus lente et une
    courbe « cinéma ». Ombres en palette (encre cerise/noire), jamais de
    couleur nouvelle.                                                          */

/* 9.1 Élévation des surfaces blanches : ombre douce + lumière du haut */
.glass,
.card,
.info-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 28px 56px -28px rgba(14, 2, 5, 0.42),
    0 10px 24px -14px rgba(14, 2, 5, 0.3);
}

/* 9.2 Panneaux sombres sur photo : ancrage au sol, lévitation douce */
.tile {
  box-shadow:
    0 24px 48px -26px rgba(0, 0, 0, 0.55),
    0 8px 18px -12px rgba(0, 0, 0, 0.35);
}

/* 9.3 Cadre photo encadré comme une œuvre (profondeur d'accroche) */
.gallery-story .story-photo {
  box-shadow:
    0 2px 8px rgba(24, 4, 10, 0.16),
    0 34px 70px -30px rgba(24, 4, 10, 0.55);
}

/* 9.4 Grand format : liseré de lumière en dedans + ombre portée profonde */
.mega-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 60px 120px -60px rgba(0, 0, 0, 0.8);
}

/* 9.5 Boutons pleins : ombre courte, ancrés au dessus de la photo */
.btn:not(.btn-ghost) {
  box-shadow: 0 12px 28px -14px rgba(10, 1, 4, 0.5);
}

/* 9.6 Survols (pointeur fin) : l'ombre s'approfondit, pas de transform
       (les cartes sont déjà pilotées en 3D par le tilt — on ne se bat
       jamais contre le script, seulement contre l'absence d'ombre) */
@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .info-card:hover,
  .tile:hover {
    box-shadow:
      0 40px 80px -34px rgba(14, 2, 5, 0.52),
      0 14px 30px -16px rgba(14, 2, 5, 0.36);
  }

  .btn:not(.btn-ghost):hover {
    box-shadow: 0 18px 38px -14px rgba(10, 1, 4, 0.62);
  }
}

/* 9.7 Révélations plus lentes, courbe expo-sortie : même texte, même
       montée de 30 px, respiration « jardin immersif » */
.js .rv {
  transition:
    opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
    translate 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 9.8 Les trois secteurs « lèvent » : lettres éclatées par immersive.js,
       animées avec le MÊME ressort que les tuiles du programme
       (keyframes letterSpring déjà présentes dans la feuille d'origine).
       Le décalage reste de 42 ms par lettre ; la carte possède déjà son
       propre data-delay, les deux se superposent proprement. */
.card h3 .wd {
  display: inline-block;
  white-space: nowrap;
}
.card h3 .ls {
  display: inline-block;
  transform-origin: 50% 100%;
}
.card.rv.in h3 .ls {
  animation: letterSpring 0.62s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

/* 9.10 Les trois secteurs : tuile éditoriale moderne ----------------------
    · titre grand, serré, centré (typographie contemporaine)
    · filet doré qui se dessine sous le mot à l'apparition
    · vague de lettres au survol + éclat lumineux traversant la tuile
    · au repos (tactile) : très lente respiration du titre
    Tout est transform/opacity : la cadence reste à 60 fps, et rien ici
    ne touche au texte ni aux couleurs (or et blanc existants).          */
.card {
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: clamp(190px, 21vw, 260px);
}
.card h3 {
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  letter-spacing: 0.01em;
  line-height: 1.06;
}
.card h3::after {
  content: "";
  display: block;
  width: 3.4em;
  height: 1px;
  margin: 0.95em auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.9) 22%,
    rgba(255, 255, 255, 0.9) 78%,
    transparent
  );
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.card.rv.in h3::after {
  transform: scaleX(1);
}

/* cadre intérieur façon galerie : filet pâle qui se pose à l'apparition
   de la tuile, puis s'éclaircit au survol (remplace entièrement l'ancien
   ::before à masque de style.css : aucun résidu conservé) */
.card::before {
  display: block;
  content: "";
  position: absolute;
  inset: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1px;
  background: none;
  -webkit-mask: none;
  mask: none;
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition:
    opacity 0.9s ease 0.5s,
    border-color 0.5s ease;
}
.card.rv.in::before {
  opacity: 1;
}

/* éclat lumineux qui traverse la tuile au survol */
.card::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 68%
  );
}

@media (hover: hover) and (pointer: fine) {
  .card:hover::after {
    animation: igSheen 0.9s ease-out;
  }

  /* le cadre intérieur s'éclaircit au survol */
  .card:hover::before {
    border-color: rgba(255, 255, 255, 0.34);
  }

  /* vague de lettres : chaque lettre rebondit avec 26 ms de retard */
  .card.rv.in:hover h3 .ls {
    animation: igWave 0.55s ease;
    animation-delay: calc(var(--i, 0) * 26ms);
  }
}

/* tactile : le titre respire très doucement (une seule couche animée) */
@media (hover: none), (pointer: coarse) {
  .card h3 {
    animation: igFloat 5.2s ease-in-out infinite;
  }
  .card:nth-child(2) h3 {
    animation-delay: 0.7s;
  }
  .card:nth-child(3) h3 {
    animation-delay: 1.4s;
  }
}

@keyframes igSheen {
  from {
    opacity: 1;
    transform: translateX(-115%);
  }
  to {
    opacity: 1;
    transform: translateX(115%);
  }
}
@keyframes igWave {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-0.16em);
  }
}
@keyframes igFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}