/* ==========================================================================
   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 */
  background:
    var(--c-surface)
    url("data:image/webp;base64,UklGRkwBAABXRUJQVlA4IEABAACQBwCdASowABQAPu1mq06ppaOiMBqoATAdiWIAuzNDYsVoDbBFMyl+ifCogTq/BEELzWIPSJx6TpbPzumdfLktR8RZxdAA/N6Zl5tx9cLBg+vVPTjiN+15uZrxTbQGeYBtFARB+yjIb090lMRW70lVybPzymvt/BbKhcIyu+lX5tBgxm7V+DF8M32Qahmraww+AU+uxDYH8k18L4AUq3hEc8V1fkC1g18KkFF79pX4rNNjNnQ7si9qLe8l1vcVD4VMdtfXiRju6FjNaXuv10GqkcZ1f8zBpAl09Sh882jH9KHqquXbyfRmnsGxCT7iXFWL2YlJLMD7KjaTuee0zV9MfAipwC2fifEvAqsLO5UfxI70KDT2OxGU2L1F2i3I9EEa303BNLd6Vx6Y6FIa5X9lkx9nISQvDhFlZ+dgRIAAAA==")
    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: 10.5px;
  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; }
}

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