/* ============================================
   STORY FILM — Animations
   Scroll reveals · Hero · Transitions · Hover
   ============================================ */

/* --- Page fade-in --- */
.page-wrapper {
  animation: pageFadeIn 600ms ease-out both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }

/* --- Hero animations --- */
.hero-title-line {
  opacity: 0;
  transform: translateY(30px);
  animation: heroSlideUp 0.8s ease-out forwards;
}

.hero-title-line:nth-child(2) {
  animation-delay: 200ms;
}

@keyframes heroSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Animated words (spring-like cycling) --- */
.word-carousel {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 1.1em;
}

.word-carousel .word {
  position: absolute;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.word-carousel .word.active {
  opacity: 1;
  transform: translateY(0);
}

.word-carousel .word.exit-up {
  opacity: 0;
  transform: translateY(-120%);
}

/* --- Nav animation --- */
#nav {
  animation: navFadeIn 600ms ease-out both;
  animation-delay: 300ms;
  opacity: 0;
}

@keyframes navFadeIn {
  to { opacity: 1; }
}

/* --- Image hover --- */
.img-hover {
  overflow: hidden;
}

.img-hover img,
.img-hover .placeholder-img {
  transition: transform 0.6s ease;
}

.img-hover:hover img,
.img-hover:hover .placeholder-img {
  transform: scale(1.02);
}

/* --- Custom cursor --- */
.custom-cursor {
  width: 24px;
  height: 24px;
  border: 0.5px solid #ffffff;
  background: transparent;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  /* difference → le cercle s'inverse automatiquement selon le fond :
     blanc sur fond sombre, encre sur fond clair */
  mix-blend-mode: difference;
  transition: transform 0.08s ease, opacity 0.3s ease;
  opacity: 0;
}

.custom-cursor.visible {
  opacity: 1;
}

/* Pendant l'intro : on masque le curseur custom pour qu'il ne passe pas
   par-dessus les mots révélés dans le disque magnétique */
body.intro-active .custom-cursor {
  opacity: 0 !important;
}

/* ============================================
   INTRO OVERLAY — écran noir d'accueil
   Scroll / clic / touche → fade → révèle le site
   ============================================ */
body.intro-active {
  overflow: hidden;
}
body.intro-active .page-wrapper {
  animation: none;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.intro-gone .page-wrapper {
  opacity: 1;
  transform: scale(1);
}

#intro-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
#intro-overlay.intro-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* La visibility passe à hidden APRÈS le fade (sortie seulement) */
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 1.3s;
}
#intro-overlay.intro-hidden .intro-inner {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-inner {
  text-align: center;
  color: var(--ink);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: introFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Repères en coins — remplissent l'espace avec un code éditorial */
.intro-corner {
  position: absolute;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(26, 24, 21, 0.5);
  opacity: 0;
  animation: introCornerFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.intro-corner-tl { top: 40px; left: 52px; }
.intro-corner-tr { top: 40px; right: 52px; }
.intro-corner-bl { bottom: 40px; left: 52px; }
.intro-corner-br { bottom: 40px; right: 52px; }

@keyframes introCornerFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.intro-corner-bl, .intro-corner-br {
  animation-name: introCornerFadeUp;
}
@keyframes introCornerFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .intro-corner { font-size: 8px; letter-spacing: 0.25em; }
  .intro-corner-tl, .intro-corner-tr { top: 24px; }
  .intro-corner-bl, .intro-corner-br { bottom: 24px; }
  .intro-corner-tl, .intro-corner-bl { left: 24px; }
  .intro-corner-tr, .intro-corner-br { right: 24px; }
}

@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intro-label {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(26, 24, 21, 0.55);
}

.intro-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.intro-little {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: 0.05em;
  color: rgba(26, 24, 21, 0.7);
}
.intro-story {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(72px, 14vw, 180px);
  letter-spacing: -0.01em;
  line-height: 0.9;
}
.intro-film {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(44px, 8vw, 110px);
  letter-spacing: 0.02em;
  line-height: 0.9;
  margin-top: -4px;
  color: rgba(26, 24, 21, 0.85);
}

.intro-sub {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(26, 24, 21, 0.55);
  padding-top: 12px;
  border-top: 0.5px solid rgba(26, 24, 21, 0.2);
  padding-left: 40px;
  padding-right: 40px;
}

.intro-scroll-cue {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(26, 24, 21, 0.5);
}
.intro-arrow {
  font-size: 14px;
  animation: introBounce 2s ease-in-out infinite;
  color: rgba(26, 24, 21, 0.75);
}
@keyframes introBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@media (max-width: 600px) {
  .intro-inner { gap: 22px; }
  .intro-sub { letter-spacing: 0.35em; padding: 10px 24px 0; }
}

/* ============================================
   Magnetic Logo — un seul disque ivoire de taille
   fixe qui balaie tout le bloc .intro-logo et révèle
   un logo-miroir (votre / histoire / d'amour) par
   masque overflow:hidden + contre-translation.
   ============================================ */
.mg-block {
  position: relative;
  cursor: none;
  user-select: none;
}
.mg-block-disc {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--ink);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  will-change: transform, width, height;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mg-block.mg-block-hovered .mg-block-disc {
  width: 220px;
  height: 220px;
}
.mg-block-mirror {
  /* top:50%/left:50% → le miroir démarre au CENTRE du disque.
     Le disque lui-même est translate(x, y) translate(-50%, -50%)
     depuis le coin haut-gauche du logo, donc son centre est à (x, y)
     en coords logo. Du coup l'origine du miroir est aussi à (x, y).
     La contre-translation translate(-x, -y) ramène le miroir à (0, 0),
     parfaitement superposé au logo d'origine. */
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
  pointer-events: none;
  will-change: transform;
}
/* Les mots miroirs adoptent les mêmes classes (.intro-little / .intro-story
   / .intro-film) donc héritent naturellement de la typo. On force juste
   l'italique romantique et l'encre sombre pour le rendu dans le disque. */
.mg-block-mirror .intro-little,
.mg-block-mirror .intro-story,
.mg-block-mirror .intro-film {
  color: var(--bg);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}
/* Dans le disque, le texte révélé est plus petit pour tenir dans le cercle */
.mg-block-mirror .intro-story {
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.mg-block-mirror .intro-film {
  font-size: clamp(26px, 4vw, 46px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin-top: 2px;
}
/* "Votre" : légèrement agrandi pour un meilleur équilibre visuel
   avec histoire / d'amour, sans casser l'alignement vertical
   (le row du miroir suit toujours la hauteur du "Little" d'origine). */
.mg-block-mirror .intro-little {
  font-size: clamp(26px, 3.8vw, 40px);
}