/* ==========================================================================
   AREPO — the way to the gate (js/arepo/intro.js, config js/config/arepo-intro.js)
   A full-screen stage over the AREPO room, moved on stop by stop (gestures, not scrolling). Everything on the
   stage is moved by transform / opacity only (no filters); ALIX is drawn on one canvas.
   black / greys / off-white, red only for the gate
   ========================================================================== */
.aintro { position: fixed; inset: 0; z-index: 31; overflow: hidden; overscroll-behavior: none; touch-action: none;
  background: #000; color: var(--offwhite); font-family: var(--font-grotesk); outline: none;
  opacity: 0; transition: opacity .9s var(--ease-out); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.aintro::-webkit-scrollbar { display: none; }
.aintro[hidden] { display: none; }
.aintro.is-open { opacity: 1; }
.aintro.is-leaving { opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.aintro__track { position: absolute; inset: 0; }
.aintro__stage { position: absolute; inset: 0; overflow: hidden; background: #000; }

/* the three shots: a scene box (1672 × 941, the backgrounds' px) placed by the camera */
.ashot { position: absolute; inset: 0; opacity: 0; }
.ascene { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; will-change: transform; }
.ascene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
/* the gate's opening breathes (a soft red ellipse over it, no blur filter) */
.aintro__glow { position: absolute; left: 688px; top: 95px; width: 320px; height: 660px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 52, 40, .5), rgba(212, 15, 22, .22) 55%, rgba(212, 15, 22, 0));
  mix-blend-mode: screen; animation: aintro-glow 4.6s ease-in-out infinite alternate; }
@keyframes aintro-glow { from { opacity: .35; } to { opacity: .85; } }

/* ALIX */
.aintro__alix { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.aintro__leaves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 4; }   /* above the fog wall: the big leaf falls through it */
.aintro__alix.is-front { z-index: 2; }   /* the reverse shot: above the low fog (it stays behind her) */
.aintro__wall { z-index: 3; }   /* the fog wall of the transition always passes in front of her */

/* low fog drifting over every shot (TENET's painted fog, as in the AREPO room) */
.aintro__fog { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; overflow: hidden; pointer-events: none; opacity: .75;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%), radial-gradient(var(--hrx, 1px) var(--hry, 1px) at var(--hx, -99px) var(--hy, -99px), rgba(0, 0, 0, var(--ha, 1)), #000);
          mask-image: linear-gradient(to bottom, transparent, #000 30%), radial-gradient(var(--hrx, 1px) var(--hry, 1px) at var(--hx, -99px) var(--hy, -99px), rgba(0, 0, 0, var(--ha, 1)), #000);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* (--hx --hy --hrx --hry --ha, set by the script: a soft clearing in the fog around ALIX on the walkway) */
.aintro__fog span { position: absolute; left: -1024px; width: calc(100% + 2048px); top: 0; bottom: 0; background-repeat: repeat-x; will-change: transform; }
.aintro__fog span:first-child { background-image: url('../assets/tenet/fog/valley.webp'); background-size: 1024px 100%; opacity: .8;
  animation: aintro-drift-l 40s linear infinite; }
.aintro__fog span:last-child { top: 30%; bottom: -10%; background-image: url('../assets/tenet/fog/floor.webp'); background-size: 1024px 100%; opacity: .88;
  animation: aintro-drift-r 27s linear infinite; }
/* the mist hanging in the sky: the same textures upside down, drifting slowly across the top */
.aintro__fogtop { position: absolute; left: 0; right: 0; top: 0; height: 58%; overflow: hidden; pointer-events: none; opacity: .7;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 45%); mask-image: linear-gradient(to top, transparent, #000 45%); }
.aintro__fogtop span { position: absolute; left: -1024px; width: calc(100% + 2048px); background-repeat: repeat-x; will-change: transform; }
.aintro__fogtop span:first-child { top: -8%; height: 70%; background-image: url('../assets/tenet/fog/valley.webp'); background-size: 1024px 100%; opacity: .55;
  animation: aintro-drift-top-r 64s linear infinite; }
.aintro__fogtop span:last-child { top: 18%; height: 62%; background-image: url('../assets/tenet/fog/floor.webp'); background-size: 1024px 100%; opacity: .45;
  animation: aintro-drift-top-l 46s linear infinite; }
@keyframes aintro-drift-top-r { from { transform: translateX(-1024px) scaleY(-1); } to { transform: translateX(0) scaleY(-1); } }
@keyframes aintro-drift-top-l { from { transform: translateX(0) scaleY(-1); } to { transform: translateX(-1024px) scaleY(-1); } }
@keyframes aintro-drift-l { from { transform: translateX(0); } to { transform: translateX(-1024px); } }
@keyframes aintro-drift-r { from { transform: translateX(-1024px); } to { transform: translateX(0); } }

/* the fog wall between the first shot and the reverse shot, and the fog sweeping past during the turn */
.aintro__wall, .aintro__sweep { position: absolute; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.aintro__wall { left: -10%; right: -10%; top: -30%; bottom: -30%;
  background: url('../assets/tenet/fog/floor.webp') 0 18% / 1024px 42% repeat-x,
              url('../assets/tenet/fog/valley.webp') 0 70% / 1024px 46% repeat-x,
              linear-gradient(to bottom, rgba(214, 212, 207, 0), #d6d4cf 22%, #cfccc6 78%, rgba(207, 204, 198, 0)); }
.aintro__sweep { top: 0; bottom: 0; left: -40%; width: 180%;
  background: url('../assets/tenet/fog/valley.webp') 0 30% / 1024px 70% repeat-x,
              url('../assets/tenet/fog/floor.webp') 300px 85% / 1024px 60% repeat-x,
              linear-gradient(to right, rgba(200, 198, 193, 0), rgba(200, 198, 193, .92) 30%, rgba(200, 198, 193, .92) 70%, rgba(200, 198, 193, 0)); }

/* the veil the fog wall leaves behind ALIX in the reverse shot (under her canvas: she stays clear) */
.aintro__veil { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; background: #d3d1cc; }
.aintro__veil span { position: absolute; top: -20%; bottom: -20%; left: -1024px; width: calc(100% + 2048px); opacity: .9;
  background: url('../assets/tenet/fog/valley.webp') 0 20% / 1024px 50% repeat-x, url('../assets/tenet/fog/floor.webp') 0 85% / 1024px 55% repeat-x;
  animation: aintro-drift-r 70s linear infinite; }
.rm .aintro__veil span { animation: none; }

/* the reverse shot's composition: darker masses on both sides (more on the left, the right stays open for the
   balloon), a lighter sky behind her head (a soft disc, no blur filter; placed and scaled by the script) */
.aintro__frame { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12) 26%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .38)),
              linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 30%); }
.aintro__light { position: absolute; left: 0; top: 0; width: 120vh; height: 120vh; margin: -60vh 0 0 -60vh; border-radius: 50%; pointer-events: none;
  opacity: 0; transform-origin: 50% 50%; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(240, 237, 230, .85), rgba(236, 233, 226, .42) 38%, rgba(236, 233, 226, .1) 70%, rgba(236, 233, 226, 0)); }

/* the red light of the gate filling the screen */
.aintro__red { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aintro__redcore { position: absolute; left: 0; top: 0; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%; opacity: 0;
  /* a glow, not a solid disc: translucent, brightest at the centre, fading out softly, added to the light (screen) */
  background: radial-gradient(closest-side, rgba(255, 120, 100, .78), rgba(255, 52, 40, .55) 22%, rgba(212, 15, 22, .34) 48%,
              rgba(170, 10, 16, .16) 72%, rgba(140, 8, 12, 0));
  mix-blend-mode: screen; transform: scale(0); will-change: transform, opacity; }
.aintro__redfill { position: absolute; inset: 0; background: #a30d13; opacity: 0; }
.aintro.is-flash .aintro__redfill { opacity: 1; transition: opacity .45s ease; }

/* the lines (top left), the scroll cue */
.aintro__head { position: absolute; z-index: 6; left: clamp(20px, 4vw, 64px); top: clamp(26px, 6vh, 64px); pointer-events: none; }
.aintro__lines { margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); font: 500 11px/1.75 var(--font-grotesk); letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.aintro__cue { margin: clamp(26px, 5vh, 46px) 0 0; font: 500 11px/1 var(--font-grotesk); letter-spacing: .32em; text-transform: uppercase; opacity: .85;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }   /* (over the light fog too) */
.aintro__cue::after { content: ''; display: block; width: 1px; height: 34px; margin-top: 14px; background: linear-gradient(currentColor 50%, transparent 50%) 0 0 / 1px 68px;
  animation: aintro-cue 1.8s ease-in-out infinite; }
@keyframes aintro-cue { from { background-position: 0 -34px; } to { background-position: 0 34px; } }

/* the balloon by her head (placed by the script) */
.aintro__balloon { position: absolute; z-index: 6; left: 0; top: 0; margin: 0; padding: 16px clamp(18px, 1.9vw, 28px) 15px; opacity: 0;
  background: #111; border: 1px solid rgba(241, 237, 228, .12); border-radius: 999px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  font: 500 clamp(9.5px, .74vw, 12px)/1.6 var(--font-grotesk); letter-spacing: .3em; text-transform: uppercase; text-align: center;
  width: max-content; max-width: min(420px, 74vw);   /* a long line wraps onto two */
  pointer-events: none; will-change: transform, opacity; }
/* a balloon of a few characters ("..."): bigger marks, a wider bubble, so it still reads as a balloon */
.aintro__balloon.is-short { min-width: clamp(84px, 6.4vw, 112px); text-align: center; padding-top: 10px; padding-bottom: 13px;
  font: 600 clamp(22px, 1.9vw, 30px)/1 var(--font-grotesk); letter-spacing: .22em; text-indent: .22em; }
.aintro__balloon.is-short::after { margin-top: 6px; text-indent: 0; }
.aintro__balloon::after { content: ''; display: block; width: 22px; height: 2px; margin: 10px auto 0; background: var(--red); }
.aintro__balloon::before { content: ''; position: absolute; left: -2px; bottom: -9px; width: 26px; height: 22px; background: #111;
  border-left: 1px solid rgba(241, 237, 228, .12); clip-path: polygon(0 100%, 30% 0, 100% 0); }

/* skip (bottom left) */
.aintro__skip { position: absolute; z-index: 7; left: clamp(16px, 4vw, 64px); bottom: clamp(14px, 4vh, 40px); padding: 10px 0; border: 0; background: none;
  color: rgba(241, 237, 228, .62); font: 500 11px/1 var(--font-grotesk); letter-spacing: .34em; text-transform: uppercase; cursor: pointer; transition: color .3s; }
.aintro__skip:hover, .aintro__skip:focus-visible { color: var(--offwhite); outline: none; }
.aintro__skip:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.aintro__skip::after { content: ' →'; letter-spacing: 0; }

@media (max-width: 760px) {
  .aintro__lines { font-size: 10px; }
  .aintro__balloon { padding: 16px 20px 15px; letter-spacing: .26em; max-width: 62vw; }   /* (clear of the SCROLL cue on the left) */
}
.rm .aintro__glow, .rm .aintro__fog span, .rm .aintro__fogtop span, .rm .aintro__cue::after { animation: none; }
.rm .aintro__fogtop span { transform: scaleY(-1); }