/* ==========================================================================
   MYRIAGE — La scène de l'accueil
   --------------------------------------------------------------------------
   Une photo d'atelier où chaque objet mène à une piste. Au survol d'un
   objet ou de son repère, le reste de la pièce s'assombrit, l'écran
   clignote ou la table s'illumine. Au clic, l'image zoome sur l'objet
   avant de changer de page (transitions.js).

   Les coordonnées (en % de l'image) ont été calées dans Claude Design sur
   le visuel final, grille à l'appui — voir le handoff. Elles vivent dans
   les attributs style du markup (pages/index.body.html).
   ========================================================================== */

.scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  /* Aperçu flou de 340 octets, visible le temps que l'image arrive */
  --scene-ph: url("data:image/webp;base64,UklGRkwBAABXRUJQVlA4IEABAACQBwCdASowABQAPu1mq06ppaOiMBqoATAdiWIAuzNDYsVoDbBFMyl+ifCogTq/BEELzWIPSJx6TpbPzumdfLktR8RZxdAA/N6Zl5tx9cLBg+vVPTjiN+15uZrxTbQGeYBtFARB+yjIb090lMRW70lVybPzymvt/BbKhcIyu+lX5tBgxm7V+DF8M32Qahmraww+AU+uxDYH8k18L4AUq3hEc8V1fkC1g18KkFF79pX4rNNjNnQ7si9qLe8l1vcVD4VMdtfXiRju6FjNaXuv10GqkcZ1f8zBpAl09Sh882jH9KHqquXbyfRmnsGxCT7iXFWL2YlJLMD7KjaTuee0zV9MfAipwC2fifEvAqsLO5UfxI70KDT2OxGU2L1F2i3I9EEa303BNLd6Vx6Y6FIa5X9lkx9nISQvDhFlZ+dgRIAAAA==");
  background: var(--c-surface) var(--scene-ph) center / cover no-repeat;
}

.scene__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3167 / 1343;
  overflow: hidden;
}

.scene__img,
.scene__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene__img img {
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.scene.is-zooming .scene__img img {
  transform: scale(var(--zoom, 3));
  transition: transform var(--t-zoom) var(--ease-zoom);
}

/* Assombrissement : un projecteur centré sur l'objet survolé */
.scene__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%),
    rgba(20, 18, 12, 0) 0 7%, rgba(20, 18, 12, .62) 26%);
  transition: opacity .4s ease;
}
.scene[data-spot] .scene__spot { opacity: 1; }
.scene.is-zooming .scene__spot { opacity: 0; }

/* Zones lumineuses posées sur les objets. Invisibles au repos, cliquables. */
.scene__glow {
  position: absolute;
  cursor: pointer;
}
.scene__glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.scene__glow--screen { border-radius: 2px; }
.scene__glow--screen::before {
  background: rgba(200, 222, 255, .32);
  box-shadow: 0 0 34px 10px rgba(200, 222, 255, .3);
}
.scene__glow--table { border-radius: 50%; }
.scene__glow--table::before {
  background: radial-gradient(closest-side, rgba(255, 214, 140, .6), rgba(255, 214, 140, 0));
}
.scene[data-spot="video"] .scene__glow[data-for="video"]::before,
.scene[data-spot="saas"]  .scene__glow[data-for="saas"]::before  { opacity: 1; animation: flicker .9s linear both; }
.scene[data-spot="auto"]  .scene__glow[data-for="auto"]::before  { opacity: 1; animation: pulse 1.4s ease-in-out infinite; }

/* Repères : une pastille qui respire + une étiquette */
.hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  transform: translate(-7px, -50%);
  scroll-snap-align: center;
  transition: opacity .25s;
}
.hotspot--rev { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.hotspot:hover { color: var(--c-text); }

.hotspot__dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: ring 2.2s ease-out infinite;
}
.hotspot__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--r-pill);
  background: rgba(31, 28, 20, .9);
  color: var(--c-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.hotspot__num {
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0;
}
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label,
.hotspot.is-lit .hotspot__label { background: var(--c-accent); color: var(--c-on-accent); }

.scene.is-zooming .hotspot,
.scene.is-zooming .scene__glow { opacity: 0; }

.scene-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.scene-caption__touch { display: none; }

@keyframes flicker {
  0% { opacity: 0; } 6% { opacity: .85; } 10% { opacity: .15; } 18% { opacity: 1; }
  24% { opacity: .3; } 32% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(220, 194, 106, .7), 0 0 0 1px rgba(31, 28, 20, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(220, 194, 106, 0), 0 0 0 1px rgba(31, 28, 20, .5); }
  100% { box-shadow: 0 0 0 0 rgba(220, 194, 106, 0), 0 0 0 1px rgba(31, 28, 20, .5); }
}

/* --------------------------------------------------------------------------
   Mobile : la pièce défile à l'horizontale, un repère par écran
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .scene {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .scene__stage { width: auto; height: 440px; }
  .scene-caption__touch { display: inline; }
  .scene-caption__pointer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot__dot { animation: none; }
  .scene__glow::before { animation: none !important; }
  .scene.is-zooming .scene__img img { transform: none; }
}

/* --------------------------------------------------------------------------
   Entrée dans l'atelier (ordinateur, mouvement autorisé)
   --------------------------------------------------------------------------
   scene.js ajoute .scene-track--on et pilote --open de 0 à 1 selon le
   défilement. À 0, on ne voit qu'une fenêtre sombre sur le centre de la pièce ;
   à mesure qu'on défile, l'ouverture grandit, l'image avance un peu et la
   lumière rasante se retire. À 1, le rendu est strictement celui d'avant :
   même image, mêmes repères. Sans JS, sur mobile ou avec mouvement réduit,
   la classe n'est jamais posée et rien de tout cela n'existe.
   -------------------------------------------------------------------------- */
.scene__veil,
.scene__rays,
.scene-caption__hint { display: none; }
.scene-caption { position: relative; }

.scene-track--on {
  height: calc(100svh - var(--header-h) + 120vh);
}
.scene-track--on .scene-pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* L'aperçu flou passe du cadre à la scène, que l'ouverture découpe */
.scene-track--on .scene { background: none; }
.scene-track--on .scene__stage {
  background: var(--c-surface) var(--scene-ph) center / cover no-repeat;
  clip-path: inset(calc((1 - var(--open, 1)) * 19%) calc((1 - var(--open, 1)) * 30%) round var(--r-sm));
}
/* 0,88 → 1 : l'image reste toujours plus large que l'ouverture, aucun bord n'apparaît */
.scene-track--on .scene__img img {
  transform: scale(calc(.88 + .12 * var(--open, 1)));
  will-change: transform;
}

.scene-track--on .scene__veil {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(26, 24, 19, 0) 30%, rgba(26, 24, 19, .78) 100%);
  opacity: calc(1 - var(--open, 1));
}
.scene-track--on .scene__rays {
  display: block;
  position: absolute;
  inset: -10% -20%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(104deg,
    rgba(255, 222, 150, 0) 0 5%, rgba(255, 222, 150, .16) 5% 9%, rgba(255, 222, 150, 0) 9% 16%);
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 70%);
  mask-image: linear-gradient(100deg, #000, transparent 70%);
  transform: translateX(calc(var(--open, 1) * -9%));
  opacity: calc((1 - var(--open, 1)) * .9);
}

/* Les repères n'apparaissent, et ne répondent, que lorsque la pièce est ouverte */
.scene-track--on .hotspot,
.scene-track--on .scene__glow,
.scene-track--on .scene-caption__pointer,
.scene-track--on .scene-caption__touch {
  opacity: calc((var(--open, 1) - .75) * 4);
}
.scene-track--on:not(.is-live) .hotspot,
.scene-track--on:not(.is-live) .scene__glow { pointer-events: none; }

.scene-track--on .scene-caption__hint {
  display: block;
  position: absolute;
  inset: 0;
  opacity: calc(1 - var(--open, 1) * 5);
}

@media print {
  .scene-track--on { height: auto; }
}

/* --------------------------------------------------------------------------
   Écran d'entrée (accueil, une fois par session) — voir entree.js
   --------------------------------------------------------------------------
   Invisible par défaut : seul html.has-entree, posé par le petit script de
   index.html quand c'est utile, l'affiche. Sans JS, jamais de calque.
   Provisoire : une image fixe ; la vidéo remplacera .entree__img.
   -------------------------------------------------------------------------- */
.entree { display: none; }

html.has-entree { overflow: hidden; }
html.has-entree .entree {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: var(--c-bg);
}

.entree__img,
.entree__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entree__img img { transform-origin: 50% 62%; }

/* Vidéo d'arrivée : posée sur l'image, qui reste dessous tant qu'elle n'a pas démarré */
.entree__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 62%;
}
.entree.has-video .entree__video { opacity: 1; }

.entree__skip {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: var(--gutter, 24px);
  z-index: 2;
}
.entree__skip[hidden] { display: none; }

/* Légende du toc-toc et de la voix (texte lu = texte affiché) */
.entree__caption {
  position: absolute;
  left: 50%;
  bottom: max(9vh, 40px);
  z-index: 2;
  width: max-content;
  max-width: min(36rem, calc(100% - 2 * var(--gutter, 24px)));
  margin: 0;
  padding: 10px 18px;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
  color: var(--c-text);
  background: rgba(26, 24, 19, .72);
  border-radius: 6px;
  animation: entree-fade .4s ease both;
}
.entree__caption[hidden] { display: none; }
@keyframes entree-fade { from { opacity: 0; } to { opacity: 1; } }

/* Pendant la vidéo : le texte et les boutons s'effacent, seule l'image reste */
.entree.is-playing .entree__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}

.entree__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 96px var(--gutter, 24px) max(40px, env(safe-area-inset-bottom));
  /* le texte ne repose jamais sur la photo nue */
  background: linear-gradient(to top, rgba(26, 24, 19, .94) 0%, rgba(26, 24, 19, .82) 55%, rgba(26, 24, 19, 0) 100%);
}
.entree__title {
  margin: 0;
  font-size: clamp(44px, 9vw, 112px);
  line-height: .95;
}
.entree__text {
  max-width: 34ch;
  margin: 0;
  color: var(--c-text);
  font-size: 18px;
}
.entree__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.entree__hint { margin: 0; }

.entree__panel > * { animation: entree-in .7s var(--ease-out, ease-out) both; }
.entree__panel > :nth-child(2) { animation-delay: .08s; }
.entree__panel > :nth-child(3) { animation-delay: .16s; }
.entree__panel > :nth-child(4) { animation-delay: .24s; }
.entree__panel > :nth-child(5) { animation-delay: .32s; }
@keyframes entree-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Sortie : la caméra avance dans la pièce pendant que l'écran s'efface */
.entree.is-leaving {
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease .3s;
}
.entree.is-leaving .entree__img img {
  transform: scale(1.14);
  transition: transform 1.15s var(--ease-zoom, ease-in-out);
}
.entree.is-leaving .entree__panel {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Fin de la vidéo : la caméra s'abaisse lentement et se pose dans le fauteuil
   (léger rebond), puis tient la pose avant que l'écran s'efface (cf. entree.js). */
.entree.is-sitting .entree__video {
  animation: entree-sit 2.2s cubic-bezier(.45, .05, .3, 1) both;
}
@keyframes entree-sit {
  0%   { transform: none; }
  62%  { transform: translateY(-3.2%) scale(1.095); }
  82%  { transform: translateY(-2.6%) scale(1.08); }
  100% { transform: translateY(-2.8%) scale(1.085); }
}

@media (prefers-reduced-motion: reduce) {
  .entree__panel > * { animation: none; }
  .entree__caption { animation: none; }
  .entree.is-sitting .entree__video { animation: none; }
  .entree.is-leaving,
  .entree.is-leaving .entree__img img,
  .entree.is-leaving .entree__panel { transition: none; }
  .entree.is-leaving .entree__img img { transform: none; }
}

@media print {
  .entree { display: none !important; }
}

@media print {
  .scene { display: none !important; }
}