/* ========================================================================
   DEPTH — Atelier 26 (portail). Ambiance commune aux boutiques.
   Monochrome. Additif : atmosphère + aurore + grain + vignette.
   ======================================================================== */

/* Fond vivant */
body {
  background:
    radial-gradient(125% 105% at 50% 118%, rgba(0,0,0,.7), transparent 55%),
    radial-gradient(100% 75% at 50% -12%, rgba(232,230,223,.05), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Aurores lumineuses en mouvement lent (visibles dans les interstices) */
body::before {
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 20% 16%, rgba(232,230,223,.11), transparent 60%),
    radial-gradient(48vw 48vw at 84% 10%, rgba(196,194,186,.08), transparent 62%),
    radial-gradient(54vw 54vw at 62% 98%, rgba(232,230,223,.07), transparent 60%);
  mix-blend-mode: screen;
  animation: auroraDrift 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
  50%  { transform: translate3d(3%, 4%, 0)  scale(1.20) rotate(4deg); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
}

/* Grain — matière sur toute la surface (portes comprises) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .11; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Vignette cinématique (injectée par depth.js) */
.fx-vignette {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 50%, rgba(0,0,0,.5) 100%);
}

/* Le relief 3D des portes est appliqué en JS (transform inline) */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ===== Portes : matière · lumière · ombre (comme les cartes des boutiques) ===== */
.door { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }

/* Arête lumineuse en haut + creux d'ombre à la jointure centrale (relief entre les 2 panneaux) */
@media (min-width: 721px) {
  .door--nocap { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset -44px 0 80px -44px rgba(0,0,0,.72); }
  .door--on    { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset  44px 0 80px -44px rgba(0,0,0,.72); }
}
@media (max-width: 720px) {
  .door--nocap { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -44px 80px -44px rgba(0,0,0,.72); }
  .door--on    { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0  44px 80px -44px rgba(0,0,0,.72); }
}

/* Voile de lumière subtil en haut de chaque porte */
.door__overlay { box-shadow: inset 0 70px 90px -70px rgba(255,255,255,.07); }

/* Bouton « Entrer » : relief tactile + balayage de lumière (comme les boutons des sites) */
.door__btn { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -12px rgba(0,0,0,.7); }
.door__btn::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.door:hover .door__btn::after { animation: doorSweep .8s ease; }
@keyframes doorSweep { 0% { left: -70%; opacity: 0; } 18% { opacity: .9; } 100% { left: 140%; opacity: 0; } }

/* ===== Switch entre les portes : entrée plus fluide (zoom « plongée » + easing doux) ===== */
.portal.pushing .door { transition: flex 1s cubic-bezier(.6,0,.2,1) !important; }
.portal.pushing .door.is-chosen .door__bg {
  transform: scale(1.12) !important;
  filter: brightness(.76) saturate(1.02) !important;
  transition: transform 1.05s var(--ease), filter 1.05s ease !important;
}
.portal.pushing .door.is-out { opacity: .8; }
.portal.pushing .door.is-out .door__content { transition: opacity .5s ease, transform .5s ease !important; }