/* ==========================================================================
   DARKSIDE × CHERRY BLOSSOM — Page de choix
   Une devanture de nuit. Le côté survolé s'allume, l'autre reste dans l'ombre.
   S'appuie sur les tokens de style.css.
   ========================================================================== */

.choice-page {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--ink);
}

.choice {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* ------------------------------------------------------------- La devanture */

.choice__stage { position: absolute; inset: 0; z-index: 0; }

/* Les trois états sont superposés au pixel près. Le JS pilote la parallaxe
   via --fx / --fy pour qu'ils bougent ensemble. */
.choice__facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06) translate3d(var(--fx, 0px), var(--fy, 0px), 0);
  will-change: transform, opacity;
}
.choice__facade--base { position: relative; filter: brightness(0.7) contrast(1.06); }
.choice__facade--left,
.choice__facade--right { opacity: 0; transition: opacity 0.85s var(--ease); }
.choice.is-left  .choice__facade--left  { opacity: 1; }
.choice.is-right .choice__facade--right { opacity: 1; }

.choice__night {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6,5,5,0.92) 0%, rgba(6,5,5,0.28) 42%, rgba(6,5,5,0.55) 100%),
    radial-gradient(120% 90% at 50% 55%, rgba(6,5,5,0) 30%, rgba(6,5,5,0.8) 100%);
}

/* Halos d'appoint — le fondu photographique fait déjà l'essentiel du travail,
   ceux-ci ne servent qu'à étendre la lumière au-delà du cadre de la vitrine. */
.choice__glow {
  position: absolute; top: 8%; bottom: 12%;
  width: 56%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
  mix-blend-mode: screen;
}
.choice__glow--left {
  left: -6%;
  background: radial-gradient(closest-side at 58% 46%,
    rgba(232, 196, 128, 0.42) 0%,
    rgba(214, 168, 92, 0.20) 42%,
    rgba(199, 164, 78, 0) 78%);
}
.choice__glow--right {
  right: -6%;
  background: radial-gradient(closest-side at 42% 46%,
    rgba(232, 196, 128, 0.42) 0%,
    rgba(214, 168, 92, 0.20) 42%,
    rgba(199, 164, 78, 0) 78%);
}
.choice.is-left  .choice__glow--left  { opacity: 0.55; }
.choice.is-right .choice__glow--right { opacity: 0.55; }

/* ---------------------------------------------------- Entrée dans le bâtiment
   Au clic, la devanture est poussée vers l'avant depuis la vitrine choisie :
   l'origine de la transformation est calée sur la vitre, pas sur le centre de
   l'écran. Le reste de l'interface s'efface pendant que la caméra avance, puis
   un voile noir referme le plan — le site d'arrivée reprend la main dessus avec
   son propre canvas qui se pose. */
.choice.is-entering .choice__stage {
  transform: scale(2.6);
  transition: transform 1.05s cubic-bezier(0.6, 0, 0.9, 0.5);
}
.choice.is-entering-left  .choice__stage { transform-origin: 30% 46%; }
.choice.is-entering-right .choice__stage { transform-origin: 69% 46%; }

.choice.is-entering .choice__halves,
.choice.is-entering .choice__seam,
.choice.is-entering .choice__head,
.choice.is-entering .choice__foot {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

/* Le voile qui referme le plan */
.choice__veil {
  position: absolute; inset: 0; z-index: 20;
  background: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.choice.is-entering .choice__veil { opacity: 1; transition-delay: 0.52s; }

.choice__grain {
  position: absolute; inset: -50%; opacity: 0.045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(3) infinite;
}

/* ------------------------------------------------------------- Les moitiés */

.choice__halves {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
}

.half {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 0 clamp(24px, 5vw, 90px) clamp(90px, 16vh, 170px);
  text-decoration: none;
  transition: background 0.8s var(--ease);
}
.half--left  { justify-content: flex-start; }
.half--right { justify-content: flex-end; text-align: right; }

/* Le côté délaissé s'assombrit encore un peu */
.choice.is-right .half--left,
.choice.is-left  .half--right { background: rgba(6, 5, 5, 0.42); }

.half__inner {
  display: flex; flex-direction: column;
  gap: 14px;
  max-width: 30ch;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.half--right .half__inner { align-items: flex-end; }
.choice.is-loaded .half__inner { transform: none; opacity: 1; }
.choice.is-loaded .half--right .half__inner { transition-delay: 0.12s; }

.half__eyebrow {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
.half__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: var(--fg);
  transition: color 0.7s var(--ease);
}
.half__meta {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.half__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-bottom: 6px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-soft);
  border-bottom: 1px solid var(--line);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), gap 0.5s var(--ease);
}
.half__arrow { transition: transform 0.5s var(--ease); }

.half:hover .half__name { color: var(--accent-lite); }
.half:hover .half__cta { color: var(--accent); border-bottom-color: var(--accent); gap: 20px; }
.half:hover .half__arrow { transform: translateX(4px); }
.half:focus-visible { outline: 1px solid var(--accent); outline-offset: -14px; }

/* ------------------------------------------------------- Couture et chrome */

.choice__seam {
  position: absolute; z-index: 3;
  left: 50%; top: 14%; bottom: 14%;
  width: 1px; transform: translateX(-0.5px);
  background: linear-gradient(to bottom, transparent, var(--line-gold) 22%, var(--line-gold) 78%, transparent);
  opacity: 0.5;
  transition: opacity 0.8s var(--ease);
}
.choice.is-hovering .choice__seam { opacity: 0.85; }

.choice__head {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  padding: clamp(22px, 4vh, 40px) clamp(24px, 5vw, 60px);
  text-align: center;
}
.choice__mark {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(12px, 1.3vw, 15px);
  margin-right : 5.rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--fg-soft);
}
.choice__mark i { font-style: normal; color: var(--accent); }

.choice__foot {
  position: absolute; z-index: 3; bottom: 0; left: 0; right: 0;
  padding: 0 clamp(24px, 5vw, 60px) clamp(22px, 4vh, 40px);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

/* ------------------------------------------------------------- Responsive */
/* Sous 820px on empile : moitié haute tatouage, moitié basse coiffeur.
   Les halos suivent le même principe, en haut et en bas. */
@media (max-width: 820px) {
  .choice__halves { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }

  .half { align-items: center; padding: 0 var(--pad); }
  .half--left  { justify-content: center; align-items: flex-end; padding-bottom: clamp(20px, 4vh, 40px); }
  .half--right { justify-content: center; align-items: flex-start; text-align: center; padding-top: clamp(20px, 4vh, 40px); }
  .half__inner { align-items: center; text-align: center; }
  .half--right .half__inner { align-items: center; }
  .half__name { font-size: clamp(34px, 12vw, 62px); }

  .choice__seam {
    left: 12%; right: 12%; width: auto; top: 50%; bottom: auto; height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(to right, transparent, var(--line-gold) 22%, var(--line-gold) 78%, transparent);
  }

  .choice__glow { top: auto; bottom: auto; left: -20%; right: -20%; width: auto; height: 62%; }
  .choice__glow--left  { top: -8%;    background: radial-gradient(closest-side at 50% 62%, rgba(232,196,128,0.40), rgba(199,164,78,0) 78%); }
  .choice__glow--right { bottom: -8%; background: radial-gradient(closest-side at 50% 38%, rgba(232,196,128,0.40), rgba(199,164,78,0) 78%); }

  .choice.is-right .half--left,
  .choice.is-left  .half--right { background: rgba(6, 5, 5, 0.34); }

  .choice__foot { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .choice__facade { transform: none; }
  .choice.is-entering .choice__stage { transform: none; transition: none; }
  .choice__veil { transition: none; }
  .choice__facade--left, .choice__facade--right { transition: none; }
  .choice__grain { animation: none; }
  .half__inner { opacity: 1 !important; transform: none !important; transition: none; }
  .choice__glow { transition: none; }
}