/* Variante A — Les portes du ciel : deux grandes portes dorées pivotent en 3D, un éclair de lumière, le chérubin apparaît.
   Sections = plaques d'ivoire à double filet doré et coins ciselés. */
.v-a {
  --ink: #3d1a2c;
  --names: #4b1f35;
  --accent: #8a5f17;
  --accent-strong: #6e4a10;
  --on-accent: #fff8ee;
  --focus: #5a2a7a;
}

/* plaques */
.v-a .panel__in,
.v-a .hero__text,
.v-a .finale__text {
  background: linear-gradient(180deg, rgba(255, 249, 242, .87), rgba(251, 239, 236, .83));
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .85), inset 0 0 0 8px rgba(255, 249, 242, 0), inset 0 0 0 9px rgba(201, 161, 74, .38), 0 20px 56px rgba(40, 34, 92, .36);
}
.v-a .panel__in::before, .v-a .panel__in::after,
.v-a .hero__text::before, .v-a .hero__text::after,
.v-a .finale__text::before, .v-a .finale__text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 62px;
  background: url('../assets/orn-corner-l.webp') left top / 62px auto no-repeat, url('../assets/orn-corner-r.webp') right top / 62px auto no-repeat;
  pointer-events: none;
}
.v-a .panel__in::before, .v-a .hero__text::before, .v-a .finale__text::before { top: 0; }
.v-a .panel__in::after, .v-a .hero__text::after, .v-a .finale__text::after { bottom: 0; transform: scaleY(-1); }
.v-a .panel { transform-origin: 50% 100%; }

/* ouverture : les portes */
.gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; }
.gate__stage { position: relative; width: var(--card-w); height: 100svh; perspective: 1900px; perspective-origin: 50% 42%; pointer-events: auto; }
.gate__door { position: absolute; top: 0; width: 50%; height: 100%; backface-visibility: hidden; transition: transform 2.4s cubic-bezier(.62, 0, .22, 1) .45s; will-change: transform; }
.gate__door img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gate__door--l { left: 0; transform-origin: 0 50%; box-shadow: 8px 0 30px rgba(20, 10, 40, .45); }
.gate__door--r { right: 0; transform-origin: 100% 50%; box-shadow: -8px 0 30px rgba(20, 10, 40, .45); }
.gate__door::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 20, 70, 0), rgba(40, 20, 70, .55)); opacity: 0; transition: opacity 2.4s ease .45s; }
.gate__door--r::after { background: linear-gradient(270deg, rgba(40, 20, 70, 0), rgba(40, 20, 70, .55)); }
body.is-opening .gate__door--l { transform: rotateY(-112deg); }
body.is-opening .gate__door--r { transform: rotateY(112deg); }
body.is-opening .gate__door::after { opacity: 1; }

.gate__light { position: absolute; inset: -4%; background: radial-gradient(ellipse at 50% 46%, #fffaf0 0, rgba(255, 238, 210, .85) 24%, rgba(255, 230, 200, 0) 68%); opacity: 0; mix-blend-mode: screen; }
body.is-opening .gate__light { animation: flash 3s ease-out .5s both; }
@keyframes flash { 0% { opacity: 0; transform: scale(.7); } 28% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

.gate__seal { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 12px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); transition: opacity .5s ease, transform .6s var(--ease); }
.gate__seal img { width: clamp(96px, 28vw, 132px); height: auto; filter: drop-shadow(0 10px 18px rgba(20, 10, 40, .6)); animation: sealPulse 2.6s ease-in-out infinite; }
.gate__seal span { padding: 9px 20px; border-radius: 999px; background: rgba(37, 26, 58, .86); color: #f9efdc; font-family: var(--font-caps); font-weight: 600; font-size: 1.12rem; letter-spacing: .16em; box-shadow: 0 0 0 1px rgba(214, 177, 92, .8); }
.gate__seal:hover img { filter: drop-shadow(0 10px 22px rgba(255, 214, 140, .75)) brightness(1.1); }
.gate__seal:focus-visible { outline: 3px solid #fff4d6; outline-offset: 8px; border-radius: 16px; }
body.is-opening .gate__seal { opacity: 0; transform: translate(-50%, -50%) scale(1.5); pointer-events: none; }
@keyframes sealPulse { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }

body.is-open .gate, body.no-intro .gate { display: none; }

/* le chérubin « respire » en arrière-plan des portes puis revient à son cadre */
.v-a .stage { will-change: transform; }
.v-a .stage__video { transform: scale(1.2); transition: transform 3.8s var(--ease) .3s; }
.v-a.is-opening .stage__video, .v-a:not(.is-locked) .stage__video { transform: scale(1); }
.v-a .hero .r { transform: translate3d(0, 34px, 0) scale(.96); }
.v-a .hero .r.in { transform: none; }