/* Dead Raid branding (loaded last on landing.html and index.html). Art: Midjourney, sources in art-src/deadraid/.
   ui/logo_emblem.webp (full-colour emblem, transparent) | ui/wordmark.webp (DEAD RAID title) | media/keyart.jpg | media/menu-bg.jpg (in-engine renders) */

/* every emblem slot shows the full-colour emblem (the old lockups tinted a white mask) */
.lg .lg-em u, .hl-em u { background: url(ui/logo_emblem.webp) center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; }
.brand-em, .final-em { background: url(ui/logo_emblem.webp) center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; }
.lg .lg-em, .hl-em, .final-em { filter: drop-shadow(0 0 16px rgba(208, 42, 29, .28)) drop-shadow(0 4px 10px rgba(0, 0, 0, .75)) !important; }

/* the DEAD RAID wordmark image replaces the old text lockup */
.lg-wm, .hl-wm { display: block; height: auto; max-width: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(0, 0, 0, .6)); user-select: none; -webkit-user-drag: none; }
.mm-brand.lg { display: flex !important; align-items: center; gap: 14px; }
.mm-brand.lg .lg-wm { width: clamp(180px, 22vw, 330px); }
@media (max-height: 760px) { .mm-brand.lg .lg-wm { width: clamp(150px, 18vw, 250px); } }
.ld-logo.lg.big .lg-wm { width: clamp(260px, 52vmin, 640px); }
h1.hero-logo .hl-wm { width: clamp(280px, 36vw, 620px); }
@media (max-width: 760px) { h1.hero-logo .hl-wm { width: min(78vw, 360px); } }

/* nav brand: compact text mark next to the emblem */
.brand-t b { letter-spacing: .06em !important; }

/* loading screen: an in-engine render of an empty room behind the logo */
#loading { background: radial-gradient(ellipse at 50% 55%, rgba(10, 7, 5, .35), rgba(5, 4, 3, .92) 75%), url(media/menu-bg.jpg) center / cover no-repeat, #050403 !important; }

/* in-engine art (rendered with the real game: public/_studio, tools/shot.mjs) */
.cls { overflow: hidden; }
.cls-art { display: block; width: calc(100% + 48px); max-width: none; margin: -26px -24px 18px; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 22%;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.squad-art { display: block; width: 100%; max-width: 1400px; margin: 0 auto 34px; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.final { background: linear-gradient(0deg, #0a0a09, rgba(10, 10, 9, .78) 40%, rgba(10, 10, 9, .78) 60%, #0a0a09), url(media/final-bg.jpg) center / cover fixed !important; }

/* ---- animated 3D logos (js/logo3d.js): the canvas replaces the emblem + wordmark image once it has drawn ---- */
.l3d { position: relative; }
.l3d .l3d-cv { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; }
.l3d.l3d-on { display: block !important; }
.l3d.l3d-on > :not(.l3d-cv) { display: none !important; }
.l3d.l3d-on .l3d-cv { position: relative; display: block; opacity: 1; }
.mm-brand.l3d-on { width: clamp(240px, 27vw, 420px); }
.ld-logo.l3d-on { width: clamp(320px, 86vmin, 980px); margin-bottom: 8px !important; }
h1.hero-logo.l3d-on { width: clamp(320px, 46vw, 780px); margin-left: -3%; }
@media (max-width: 760px) { h1.hero-logo.l3d-on { width: min(92vw, 420px); } }
.l3d[data-l3d="landing"] .l3d-cv { filter: drop-shadow(0 0 26px rgba(255, 96, 24, .32)) drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
.l3d[data-l3d="menu"] .l3d-cv { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .75)); }
.l3d[data-l3d="loading"] .l3d-cv { filter: drop-shadow(0 0 12px rgba(255, 34, 26, calc(.85 * var(--l3d-glow, 1)))) drop-shadow(0 0 54px rgba(255, 20, 16, calc(.6 * var(--l3d-glow, 1)))); }

/* ---- loading screens: a painted scene that moves (slow push-in, drifting fog, a breathing light, embers) ----
   everything here is transform / opacity only, so it keeps moving while the game is busy building the match */
#loading { background: #050403 !important; overflow: hidden; }
#loading > :not(.ld-bg) { position: relative; z-index: 1; }
.ld-bg, .ld-bg i { position: absolute; inset: 0; display: block; pointer-events: none; }
@keyframes ldPush { from { transform: scale(1.04) translate3d(-0.6%, 0.4%, 0); } to { transform: scale(1.15) translate3d(0.8%, -0.8%, 0); } }
.ld-light { background: radial-gradient(ellipse 30% 38% at 52% 44%, rgba(255, 40, 30, .42), transparent 70%); mix-blend-mode: screen; animation: ldLight 5.2s linear infinite; }
#loading.ld-match .ld-light { background: radial-gradient(ellipse 34% 30% at 27% 60%, rgba(255, 120, 30, .5), transparent 70%); animation-duration: 2.3s; }
@keyframes ldLight { 0%, 100% { opacity: .55; } 12% { opacity: 1; } 20% { opacity: .7; } 31% { opacity: .95; } 46% { opacity: .35; } 49% { opacity: .9; } 52% { opacity: .4; } 68% { opacity: 1; } 84% { opacity: .6; } }
.ld-bg .ld-fog { inset: auto 0 0 0; width: 200%; height: 62%; background: url(media/load-fog.webp) 0 100% / 50% 100% repeat-x; opacity: .5; animation: ldDrift 46s linear infinite; will-change: transform; }
.ld-bg .ld-fog.b { height: 82%; opacity: .28; animation-duration: 78s; animation-direction: reverse; }
#loading.ld-match .ld-fog { filter: sepia(1) saturate(2.4) hue-rotate(-18deg) brightness(.8); }
@keyframes ldDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ld-bg .ld-emb { display: none; inset: auto 0 0 0; height: 200%; background: url(media/load-embers.webp) 0 0 / 512px 512px; opacity: .8; animation: ldRise 30s linear infinite; will-change: transform; }
.ld-bg .ld-emb.b { background-size: 256px 256px; opacity: .45; animation-duration: 19s; }
#loading.ld-match .ld-emb { display: block; }
@keyframes ldRise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -1024px, 0); } }
.ld-vig { background: radial-gradient(ellipse at 50% 48%, rgba(5, 4, 3, .50), rgba(5, 4, 3, .30) 38%, rgba(5, 4, 3, .88) 100%); }
#loading #loadText { text-shadow: 0 2px 10px #000; }
@media (prefers-reduced-motion: reduce) { .ld-bg i { animation: none !important; } }

/* ---- loading indicator: the turning skull (js/logo3d.js "spinner") replaces the three cubes; stencil status line + a blood-red scan bar ---- */
#loading .spin.l3d-on { width: clamp(110px, 19vmin, 190px); margin: -6px 0 -10px; }
.l3d[data-l3d="spinner"] .l3d-cv { filter: drop-shadow(0 0 22px rgba(255, 30, 20, .45)) drop-shadow(0 10px 14px rgba(0, 0, 0, .8)); animation: ldBeat 1.85s ease-in-out infinite; }
@keyframes ldBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.05); } 24% { transform: scale(.99); } 36% { transform: scale(1.03); } 50% { transform: scale(1); } }
#loading #loadText { font-size: clamp(1.15rem, 2.6vmin, 1.7rem); font-weight: 700; letter-spacing: .42em; padding-left: calc(20px + .42em); color: #efe9dc; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 40, 28, .55), 0 2px 10px #000; animation: ldText 2.6s steps(1) infinite; }
@keyframes ldText { 0%, 100% { opacity: 1; } 91% { opacity: .35; } 93% { opacity: 1; } 96% { opacity: .5; } 98% { opacity: 1; } }
.ld-bar { width: clamp(220px, 34vmin, 380px); height: 3px; margin-top: -8px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.ld-bar i { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, #d02a1d 35%, #ff5a3c 70%, #fff 100%); box-shadow: 0 0 12px #ff3a20; animation: ldScan 1.5s cubic-bezier(.6, 0, .3, 1) infinite; will-change: transform; }
@keyframes ldScan { from { transform: translate3d(-110%, 0, 0); } to { transform: translate3d(290%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .l3d[data-l3d="spinner"] .l3d-cv, #loading #loadText, .ld-bar i { animation: none; } .ld-bar i { width: 100%; opacity: .6; } }

/* ---- loading screens, 2nd pass: nothing here needs the page's script thread, so it shows on the first paint and keeps moving
   while the game loads or builds a match. Logo and skull are pre-rendered from the 3D models (tools/logo_bake.mjs). ---- */
.ld-img { background: url(media/load-boot.jpg) center / cover no-repeat; animation: ldPush 26s ease-in-out infinite alternate; will-change: transform; }
.ld-img.b { background-image: url(media/load-match.jpg); opacity: 0; }
#loading.ld-match .ld-img.b { opacity: 1; }
.ldn { width: clamp(300px, 78vmin, 880px); aspect-ratio: 1320 / 250; perspective: 900px; margin-bottom: 4px; }
.ldn-in { position: relative; width: 100%; height: 100%; animation: ldnSway 7s ease-in-out infinite alternate; will-change: transform; }
.ldn-in img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
@keyframes ldnSway { from { transform: rotateY(-9deg) rotateX(3deg); } to { transform: rotateY(9deg) rotateX(-2deg); } }
.ldn-halo { filter: blur(26px) saturate(3) hue-rotate(-8deg) brightness(.8); transform: scale(1.03, 1.35); animation: ldnHalo 3.7s linear infinite; }
@keyframes ldnHalo { 0%, 100% { opacity: .9; } 8% { opacity: .6; } 10% { opacity: .95; } 47% { opacity: .8; } 49% { opacity: .45; } 52% { opacity: .9; } 80% { opacity: 1; } }
.ldn-on.s1 { clip-path: inset(0 84.5% 0 0); animation: ldnStrike .5s .15s steps(1) backwards, ldnF1 7.3s 1s steps(1) infinite; }
.ldn-on.s2 { clip-path: inset(0 61.4% 0 15.5%); animation: ldnStrike .5s .32s steps(1) backwards, ldnF2 11s 1s steps(1) infinite; }
.ldn-on.s3 { clip-path: inset(0 47.7% 0 38.6%); animation: ldnStrike .5s .50s steps(1) backwards, ldnF3 5.9s 1s steps(1) infinite; }
.ldn-on.s4 { clip-path: inset(0 20.5% 0 52.3%); animation: ldnStrike .5s .66s steps(1) backwards, ldnF1 9.1s 1.4s steps(1) infinite; }
.ldn-on.s5 { clip-path: inset(0 0 0 79.5%); animation: ldnStrike .5s .84s steps(1) backwards, ldnF2 6.4s 2s steps(1) infinite; }
@keyframes ldnStrike { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .1; } 60% { opacity: 1; } 75% { opacity: .3; } 100% { opacity: 1; } }
@keyframes ldnF1 { 0%, 100% { opacity: 1; } 61% { opacity: .15; } 62% { opacity: 1; } 63.5% { opacity: .1; } 65% { opacity: 1; } }
@keyframes ldnF2 { 0%, 100% { opacity: 1; } 30% { opacity: .2; } 30.8% { opacity: 1; } 78% { opacity: .08; } 81% { opacity: .9; } 81.6% { opacity: .1; } 84% { opacity: 1; } }
@keyframes ldnF3 { 0%, 100% { opacity: 1; } 44% { opacity: .1; } 52% { opacity: .1; } 52.6% { opacity: 1; } 53.4% { opacity: .2; } 54.5% { opacity: 1; } }
.ld-skull { position: relative; width: clamp(110px, 19vmin, 190px); aspect-ratio: 1; margin: -4px 0 -8px; filter: drop-shadow(0 0 22px rgba(255, 30, 20, .45)) drop-shadow(0 10px 14px rgba(0, 0, 0, .8)); animation: ldBeat 1.85s ease-in-out infinite; }
.ld-skull img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .ldn-in, .ldn-in img, .ld-skull { animation: none !important; } .ld-skull-a { display: none !important; } .ld-skull img { visibility: visible !important; } }