/* ==========================================================================
   ROSE CONNECT — introduction cinématographique (≈ 15 s)
   Les états sont pilotés par js/intro.js via des classes sur .intro :
   is-ribbon → is-wash → is-name → is-slogan → is-message → is-outro
   ========================================================================== */

.intro { display: none; }

html.has-intro body { overflow: hidden; }
html.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--rose-clair);
  color: var(--blanc);
}
html.has-intro .site-logo__ribbon { opacity: 0; }
/* Le site, entièrement couvert, n'est pas peint pendant l'intro (gain de fluidité sur mobile). */
html.has-intro:not(.site-revealing) .site { visibility: hidden; }

/* --- Scènes photographiques ---------------------------------------------- */

.intro__stage { position: absolute; inset: 0; z-index: 1; transition: opacity 1.2s ease; }

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.2s ease;
}
.scene.is-active { opacity: 1; z-index: 3; }
.scene.is-prev { z-index: 2; }

/* Mouvement de caméra simulé : très lent, centré sur le point d'intérêt (--pos). */
.scene--s1  { --kb-from: scale(1);    --kb-to: scale(1.07); --kb-dur: 4.4s; }
.scene--s2  { --kb-from: scale(1.03); --kb-to: scale(1.1);  --kb-dur: 3.4s; }
.scene--s3a { --kb-from: scale(1.08) translateX(1.5%); --kb-to: scale(1.08) translateX(-1.5%); --kb-dur: 3s; }
.scene--s3b { --kb-from: scale(1.1);  --kb-to: scale(1.03); --kb-dur: 3.6s; }

.scene .media-slot__img,
.scene .media-slot__video {
  transform-origin: var(--pos, 50% 50%);
  will-change: transform;
}
.scene.is-active .media-slot__img,
.scene.is-active .media-slot__video {
  animation: rc-kenburns var(--kb-dur, 4s) cubic-bezier(.3, .1, .3, 1) both;
}
@keyframes rc-kenburns {
  from { transform: var(--kb-from); }
  to   { transform: var(--kb-to); }
}

/* Voile discret pour la lisibilité des textes sur les photographies. */
.intro__scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(33, 16, 24, .66) 0%, rgba(33, 16, 24, .28) 32%, rgba(33, 16, 24, 0) 58%),
    linear-gradient(to bottom, rgba(33, 16, 24, .25) 0%, rgba(33, 16, 24, 0) 18%);
}

/* Fond rose très clair sur lequel se pose le ruban. */
.intro__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(ellipse at 45% 50%, #fff 0%, var(--rose-clair) 55%, #f7e3e8 100%);
  transition: opacity 1.6s ease;
}
.intro.is-wash .intro__wash { opacity: 1; }

/* --- Textes des scènes ----------------------------------------------------- */

.intro__captions {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  max-width: 17em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 4.2vw, 3.3rem);
  line-height: 1.12;
  color: var(--blanc);
  text-shadow: 0 2px 22px rgba(20, 8, 14, .45);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.caption.is-visible { opacity: 1; transform: none; }

.caption--trio { font-style: normal; max-width: none; }
.caption--trio span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.caption--trio.is-visible span { opacity: 1; transform: none; }
.caption--trio.is-visible span:nth-child(2) { transition-delay: .35s; }
.caption--trio.is-visible span:nth-child(3) { transition-delay: .7s; color: #ffd9e6; }

/* --- Ruban et nom de la plateforme ----------------------------------------- */

.intro__brand {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.4vw, 46px);
  padding: 0 var(--gutter);
  pointer-events: none;
}

.intro__ribbon-wrap {
  flex: none;
  width: clamp(84px, 10.5vw, 138px);
  aspect-ratio: 120 / 200;
  transform-origin: 0 0;
}

.intro__ribbon {
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: drop-shadow(0 16px 18px rgba(90, 20, 45, .28));
}

.intro.is-ribbon .intro__ribbon {
  animation: rc-ribbon-enter 2.1s cubic-bezier(.22, .68, .22, 1) both;
}
@keyframes rc-ribbon-enter {
  0%   { opacity: 0; transform: translate(62vw, 16vh) rotate(18deg); }
  14%  { opacity: 1; }
  62%  { transform: translate(9vw, -2vh) rotate(-5deg); }
  100% { opacity: 1; transform: none; }
}

.intro__brand-text { color: var(--encre); }

.intro__name,
.intro__slogan,
.intro__message {
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1), letter-spacing 1.6s ease;
}

/* Logotype vectorisé : il se dévoile de gauche à droite, comme un ruban qui se déroule. */
.intro__name { line-height: 0; }
.intro__wordmark {
  display: block;
  height: clamp(30px, 5.4vw, 66px);
  width: auto;
  overflow: visible;
  clip-path: inset(-10% 100% -10% 0);
  transition: clip-path 1.5s cubic-bezier(.65, 0, .25, 1) .1s;
}
.intro.is-name .intro__wordmark { clip-path: inset(-10% -2% -10% 0); }

.intro__slogan {
  margin-top: .5em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--encre-douce);
}

.intro__message {
  margin-top: 1.4em;
  padding-top: 1em;
  max-width: 28em;
  font-size: clamp(.98rem, 1.5vw, 1.18rem);
  font-weight: 500;
  color: var(--rose-soutenu-fonce);
  background: linear-gradient(var(--rose-soutenu), var(--rose-soutenu)) left top / 52px 2px no-repeat;
}

.intro.is-name .intro__name { opacity: 1; transform: none; }
.intro.is-slogan .intro__slogan { opacity: 1; transform: none; }
.intro.is-message .intro__message { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .intro__brand { flex-direction: column; text-align: center; gap: 22px; }
  .intro__ribbon-wrap { width: 70px; }
  .intro__wordmark { height: clamp(22px, 7.2vw, 40px); margin: 0 auto; }
  .intro__message { margin-left: auto; margin-right: auto; background-position: center top; }
}

/* --- Commandes ------------------------------------------------------------- */

.intro__controls {
  position: absolute;
  z-index: 8;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
}

.intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(51, 34, 42, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  color: var(--encre);
  font: 600 .92rem/1 var(--font-sans);
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(30, 10, 18, .35);
  transition: background-color .2s, transform .2s;
}
.intro__btn:hover { background: var(--blanc); }
.intro__btn svg { width: 20px; height: 20px; flex: none; }
.intro__btn[disabled] { cursor: not-allowed; opacity: .7; }

.intro__skip { margin-left: auto; }

.intro__sound .icon-wave { display: none; }
.intro__sound[data-state="on"] .icon-wave { display: block; }
.intro__sound[data-state="on"] .icon-mute { display: none; }

/* Onglet masqué : les animations CSS attendent avec la chronologie. */
.intro.is-paused *, .intro.is-paused { animation-play-state: paused !important; }

@media (max-width: 480px) {
  .intro__sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .intro__sound { padding: 0 13px; }
}

.intro__progress {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgba(255, 255, 255, .25);
}
.intro__progress span {
  display: block;
  height: 100%;
  background: var(--rose-soutenu);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Sortie vers le site --------------------------------------------------- */

.intro.is-outro { background: transparent; }
.intro.is-outro .intro__stage,
.intro.is-outro .intro__wash,
.intro.is-outro .intro__captions,
.intro.is-outro .intro__brand-text,
.intro.is-outro .intro__controls,
.intro.is-outro .intro__progress {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.intro.is-outro .intro__ribbon-wrap {
  transition: transform 1.4s cubic-bezier(.65, 0, .25, 1);
}

.intro.is-skipping { opacity: 0; transition: opacity .45s ease; }

/* --- Mouvements réduits ---------------------------------------------------- */

html.intro-reduced .scene.is-active .media-slot__img,
html.intro-reduced .scene.is-active .media-slot__video { animation: none; }
html.intro-reduced .intro.is-ribbon .intro__ribbon { animation: rc-fade-in 1.2s ease both; }
html.intro-reduced .caption,
html.intro-reduced .caption--trio span,
html.intro-reduced .intro__name,
html.intro-reduced .intro__slogan,
html.intro-reduced .intro__message { transform: none; }
html.intro-reduced .intro__wordmark { clip-path: none; transition: none; }
html.intro-reduced .intro.is-outro .intro__ribbon-wrap { opacity: 0; transition: opacity 1.1s ease; }

@keyframes rc-fade-in { from { opacity: 0; } to { opacity: 1; } }