/* Intro behind the loading and sign-in screens (js/ui/Intro.js). Only transform and opacity are animated (compositor-only);
   no filters or backdrop blur over the moving photos. */
#intro { position: fixed; inset: 0; z-index: 35; /* over the game and its HUD (≤ 30), under the sign-in screen (#social, 40) and loading (50) */ overflow: hidden; background: #000; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
#intro[hidden] { display: none; }
#intro.in { opacity: 1; }
#intro.out { opacity: 0; transition-duration: .9s; }
.intro-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease-in-out; }
.intro-slide.top { z-index: 1; }
.intro-slide.on { opacity: 1; }
.intro-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); will-change: transform; backface-visibility: hidden; }
.intro-slide.kb img { animation: intro-kb 10.6s linear forwards; /* crossfade in + hold + crossfade out */ }
@keyframes intro-kb { from { transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0)); } to { transform: translate3d(var(--x1), var(--y1), 0) scale(var(--s1)); } }

/* film grain: a small tile, jittered in steps */
.intro-grain { position: absolute; inset: -128px; z-index: 2; opacity: .35; background-repeat: repeat; animation: intro-grain 1s steps(6) infinite; }
@keyframes intro-grain { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-40px, 22px, 0); } 40% { transform: translate3d(31px, -57px, 0); } 60% { transform: translate3d(-63px, -12px, 0); } 80% { transform: translate3d(18px, 49px, 0); } 100% { transform: translate3d(-24px, -33px, 0); } }

/* cinema letterbox, sliding in */
.intro-bar { position: absolute; left: 0; right: 0; height: 8vh; z-index: 3; background: #000; transform: scaleY(0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .3s; }
.intro-bar.top { top: 0; transform-origin: top; } .intro-bar.bottom { bottom: 0; transform-origin: bottom; }
#intro.in .intro-bar { transform: scaleY(1); }

/* a flash of light as the first photo comes up */
.intro-flash { position: absolute; inset: 0; z-index: 4; background: #fff6dc; opacity: 0; }
#intro.in .intro-flash { animation: intro-flash 1.6s ease-out .15s both; }
@keyframes intro-flash { 0% { opacity: 0; } 12% { opacity: .45; } 100% { opacity: 0; } }

/* caption: place and time of day */
.intro-cap { position: absolute; z-index: 5; inset-inline-start: calc(5vw + var(--sal)); top: calc(8vh + 28px + var(--sat)); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.intro-cap .place { font-size: clamp(18px, 2.4vw, 30px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.intro-cap .when { font-size: clamp(12px, 1.2vw, 15px); color: var(--accent); letter-spacing: .08em; margin-top: 6px; padding-top: 6px; position: relative; }
.intro-cap .when::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 64px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
[dir=rtl] .intro-cap .when::before { transform-origin: 100% 50%; }
.intro-cap .place, .intro-cap .when { opacity: 0; }
.intro-cap.show .place { animation: intro-cap 6.8s ease both .5s; }
.intro-cap.show .when { animation: intro-cap 6.4s ease both .9s; }
.intro-cap.show .when::before { animation: intro-line 1s cubic-bezier(.2, .8, .2, 1) both 1.1s; }
@keyframes intro-cap { 0% { opacity: 0; transform: translate3d(-24px, 0, 0); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(12px, 0, 0); } }
[dir=rtl] .intro-cap.show .place, [dir=rtl] .intro-cap.show .when { animation-name: intro-cap-rtl; }
@keyframes intro-cap-rtl { 0% { opacity: 0; transform: translate3d(24px, 0, 0); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(-12px, 0, 0); } }
@keyframes intro-line { to { transform: scaleX(1); } }

/* the title, poster style */
.intro-logo { position: absolute; z-index: 5; inset-inline-start: calc(5vw + var(--sal)); bottom: calc(8vh + 30px + var(--sab)); color: #fff; line-height: .9;
  font: italic 900 clamp(44px, 7.5vw, 104px)/.9 Impact, Haettenschweiler, "Arial Black", "Segoe UI", "Noto Kufi Arabic", sans-serif; letter-spacing: .01em;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 5px 0 #000, 0 0 40px rgba(0,0,0,.7); opacity: 0; transform: scale(1.25) skewX(-6deg); }
.intro-logo small { display: block; margin-top: 10px; font: 700 clamp(11px, 1.15vw, 16px) "Segoe UI", Tahoma, "Noto Kufi Arabic", sans-serif; letter-spacing: .5em; text-transform: uppercase; color: var(--accent); -webkit-text-stroke: 0; text-shadow: 0 2px 6px #000; }
#intro.in .intro-logo { animation: intro-logo 1.1s cubic-bezier(.16, 1.2, .3, 1) 1s forwards; }
@keyframes intro-logo { to { opacity: 1; transform: scale(1) skewX(-6deg); } }

/* theme music on/off (above the loading and sign-in screens) */
#introMusic { position: fixed; z-index: 65; inset-inline-start: calc(14px + var(--sal)); bottom: calc(max(6px, 4vh - 16px) + var(--sab)); max-width: min(360px, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 13px/1 "Segoe UI", Tahoma, "Noto Kufi Arabic", sans-serif; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); border-radius: 18px; padding: 8px 14px; cursor: pointer; }
#introMusic[hidden] { display: none; }
#introMusic:hover { background: rgba(0,0,0,.8); }
#introMusic.on { border-color: var(--accent); }
#introMusic.waiting { animation: intro-pulse 1.6s ease-in-out infinite; }
@keyframes intro-pulse { 50% { border-color: var(--accent); } }

/* the loading and sign-in screens over the intro */
body.intro-on #loading { background: none; place-items: end center; padding-bottom: calc(8vh + 18px + var(--sab)); }
body.intro-on .loading-box { text-shadow: 0 1px 4px #000; }
body.intro-on .loading-box h1, body.intro-on .loading-box .sub { display: none; }
body.intro-on .loading-box .bar { background: rgba(255,255,255,.18); margin-bottom: 6px; }
body.intro-on #loadingText, body.intro-on .loading-box .beta-note { color: #e3e9f1; }
body.intro-on #auth { background: none; }
body.intro-on #auth .auth-box { background: rgba(8, 12, 20, .86); border: 1px solid rgba(255,255,255,.08); }
@media (min-width: 900px) {
  /* wide screens: the form moves aside so the photos and the title stay in view */
  body.intro-on #auth { justify-items: end; padding-inline-end: calc(5vw + var(--sar)); }
  body.intro-on #loading { place-items: end; padding-inline-end: calc(5vw + var(--sar)); }
}
@media (max-width: 899px) {
  .intro-logo { inset-inline-start: 0; inset-inline-end: 0; text-align: center; bottom: auto; top: calc(8vh + 10px + var(--sat)); font-size: 40px; }
  .intro-cap { display: none; }
  body.intro-on #auth { align-items: start; padding-top: calc(8vh + 110px + var(--sat)); }
  #introMusic { bottom: calc(10px + var(--sab)); }
  .intro-grain { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-slide.kb img, .intro-grain, .intro-flash, #introMusic.waiting { animation: none !important; }
  .intro-logo { opacity: 1; transform: skewX(-6deg); animation: none !important; }
  .intro-cap.show .place, .intro-cap.show .when { animation: none; opacity: 1; }
  .intro-cap.show .when::before { animation: none; transform: none; }
}