/* ── this page runs its own theme: deeper ground, cyan trim, chrome pulled back ── */
/* tokens must sit on an ancestor of BOTH the page div and the footer */
body:has(.oaa) { --oaa-ground: #07080b; --oaa-panel: #0d1015; --oaa-line: #1e242e;
  --oaa-line-hot: #2b3644; --oaa-cyan: #4fc3e8; --oaa-amber: #e0a22c;
  --footer-from: #0d1015; --footer-to: #07080b;
  /* the shared game parts in site.css */
  --game-line: var(--oaa-line); --game-line-hot: var(--oaa-line-hot); --game-panel: var(--oaa-panel);
  --game-accent: var(--oaa-amber); --game-accent-alt: var(--oaa-cyan);
  background: #07080b; }
.oaa { background: var(--oaa-ground); --lightbox-accent: var(--oaa-cyan); --shell: 1240px; --gutter: 40px; }
@media (max-width: 560px) { .oaa { --gutter: 20px; } }
body:has(.oaa) ::selection { background: rgba(79,195,232,0.3); }

/* hero: the trailer is the first thing on the page */
.oaa-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--oaa-line); }
.oaa-hero__veil { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(7,8,11,0.2) 0%, rgba(7,8,11,0.62) 58%, rgba(7,8,11,0.78) 100%); }
.oaa-hero__in { position: relative; z-index: 2; padding-top: clamp(86px,10vw,140px); padding-bottom: 40px; }
.oaa-title { display: block; width: 100%; max-width: 880px; height: auto; aspect-ratio: 1880/225; margin: 0 auto clamp(18px,2.4vw,30px); }

/* inside the shared .game-video frame, a local poster until pressed, so nothing
   is requested from YouTube on page load; trailer.js swaps the player in on click */
.oaa-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: #000; cursor: pointer; display: grid; place-items: center; }
.oaa-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.82; transition: opacity var(--dur-base) ease; }
.oaa-poster__play { position: relative; width: 84px; height: 84px; padding-left: 5px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(7,8,11,0.62); border: 1px solid var(--oaa-cyan);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) ease; }
.oaa-poster:hover img, .oaa-poster:focus-visible img { opacity: 1; }
.oaa-poster:hover .oaa-poster__play,
.oaa-poster:focus-visible .oaa-poster__play { transform: scale(1.08); background: rgba(7,8,11,0.82); }
.oaa-poster:focus-visible { outline: 2px solid var(--oaa-cyan); outline-offset: -4px; }

/* bands ride above the fixed ambient layer (z-index 1) */
.oaa-band { position: relative; z-index: 2; padding: 40px 0; border-bottom: 1px solid var(--oaa-line); }
.oaa-feat:first-child { padding-top: 0; }
.oaa-feat:last-child { padding-bottom: 0; }
.oaa-band:last-of-type { border-bottom: 0; }

/* the shared zoom focus ring is site-orange; this page uses its own trim */
.oaa [data-shot]:focus-visible { outline-color: var(--oaa-cyan); }

.oaa-feat { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 40px; align-items: start; padding: 40px 0; }
.oaa-feat + .oaa-feat { border-top: 1px solid var(--oaa-line); }
.oaa-feat:nth-child(even) .oaa-feat__shot { order: 2; }
/* a button, so the screenshot opens from the keyboard like any other control */
.oaa-feat__shot { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid var(--oaa-line-hot); background: #000; }
.oaa-feat__banner { display: block; width: 100%; height: auto; aspect-ratio: 846/135; margin-bottom: 40px; }
.oaa-feat__copy p { color: rgb(var(--text-rgb) / 0.72); line-height: var(--lh-copy); text-wrap: pretty; }

.oaa-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
@media (max-width: 560px) { .oaa-grid { grid-template-columns: 1fr; } }
.oaa-shot { position: relative; display: block; margin: 0; overflow: hidden;
  border: 1px solid var(--oaa-line); background: #000; }
.oaa-shot__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; }
.oaa-shot__zoom:focus-visible { outline-offset: -4px; }   /* the figure clips anything drawn outside it */
.oaa-shot img { display: block; width: 100%; height: auto; transition: transform 620ms var(--ease); }
.oaa-shot:is(:hover, :focus-within) img { transform: scale(1.04); }
.oaa-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  font-size: 13px; color: rgb(var(--text-rgb) / 0.92); opacity: 0; transform: translate3d(0,10px,0);
  background: linear-gradient(0deg, rgba(7,8,11,0.9) 0%, rgba(7,8,11,0) 100%);
  transition: opacity 340ms var(--ease), transform 420ms var(--ease); }
.oaa-shot:is(:hover, :focus-within) figcaption { opacity: 1; transform: translate3d(0,0,0); }

@media (max-width: 820px) {
  .oaa-feat { grid-template-columns: 1fr; }
  .oaa-feat:nth-child(even) .oaa-feat__shot { order: 0; }
}
.oaa-space { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.oaa-space > i { position: absolute; display: block; }
/* each layer is inflated by one full tile on BOTH axes, and travels exactly one tile, so the loop is seamless and never uncovers the viewport */
.oaa-stars { top: 0; left: 0; background-repeat: repeat; }
.oaa-stars--far {
  background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.55) 50%, transparent 51%),
                    radial-gradient(1px 1px at 130px 90px, rgba(198,214,255,0.42) 50%, transparent 51%),
                    radial-gradient(1px 1px at 220px 160px, rgba(160,205,255,0.5) 50%, transparent 51%),
                    radial-gradient(1px 1px at 70px 210px, rgba(255,236,214,0.38) 50%, transparent 51%),
                    radial-gradient(1px 1px at 248px 44px, rgba(226,196,255,0.34) 50%, transparent 51%),
                    radial-gradient(1px 1px at 176px 246px, rgba(255,255,255,0.3) 50%, transparent 51%);
  background-size: 280px 280px; width: calc(100% + 280px); height: calc(100% + 280px);
  animation: oaa-drift-far 240s linear infinite; }
.oaa-stars--mid {
  background-image: radial-gradient(1.4px 1.4px at 60px 50px, rgba(255,255,255,0.78) 50%, transparent 51%),
                    radial-gradient(1.4px 1.4px at 260px 140px, rgba(150,214,255,0.64) 50%, transparent 51%),
                    radial-gradient(1.4px 1.4px at 160px 300px, rgba(255,224,176,0.6) 50%, transparent 51%),
                    radial-gradient(1.4px 1.4px at 344px 232px, rgba(206,178,255,0.44) 50%, transparent 51%),
                    radial-gradient(1.2px 1.2px at 92px 366px, rgba(255,255,255,0.5) 50%, transparent 51%);
  background-size: 400px 400px; width: calc(100% + 400px); height: calc(100% + 400px);
  animation: oaa-drift-mid 140s linear infinite; }
.oaa-stars--near {
  background-image: radial-gradient(2.4px 2.4px at 120px 80px, rgba(255,255,255,0.92) 50%, transparent 51%),
                    radial-gradient(2.2px 2.2px at 480px 360px, rgba(255,186,120,0.78) 50%, transparent 51%),
                    radial-gradient(2.2px 2.2px at 320px 520px, rgba(120,214,255,0.78) 50%, transparent 51%),
                    radial-gradient(2px 2px at 560px 120px, rgba(226,170,255,0.6) 50%, transparent 51%),
                    radial-gradient(1.8px 1.8px at 60px 452px, rgba(255,255,255,0.6) 50%, transparent 51%);
  background-size: 620px 620px; width: calc(100% + 620px); height: calc(100% + 620px);
  animation: oaa-drift-near 80s linear infinite; }
.oaa-neb { inset: -20%; opacity: 0.5; mix-blend-mode: screen;
  background: radial-gradient(46% 38% at 18% 22%, rgba(224,127,44,0.16) 0%, transparent 70%),
              radial-gradient(52% 44% at 82% 68%, rgba(44,141,224,0.16) 0%, transparent 72%),
              radial-gradient(38% 30% at 55% 105%, rgba(79,195,232,0.12) 0%, transparent 70%); }
@keyframes oaa-drift-far  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-280px,-280px,0); } }
@keyframes oaa-drift-mid  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-400px,-400px,0); } }
@keyframes oaa-drift-near { from { transform: translate3d(0,0,0); } to { transform: translate3d(-620px,-620px,0); } }

/* slow-rolling cloud noise: low-frequency fBm, two layers at different scales and speeds */
/* the filter region must equal the tile exactly, or stitchTiles has nothing to stitch
   and every tile edge shows; each layer is also inflated by one full tile and travels
   exactly one tile, so the loop never reveals an edge */
.oaa-cloud { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background-repeat: repeat; }
.oaa-cloud--a { opacity: 0.30; background-size: 900px 900px;
  width: calc(100% + 900px); height: calc(100% + 900px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='900' height='900' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.46 0 0 0 0 0.72 0 0 0 -1.5 0.72'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");
  animation: oaa-cloud-a 320s linear infinite; }
.oaa-cloud--b { opacity: 0.22; background-size: 1300px 1300px;
  width: calc(100% + 1300px); height: calc(100% + 1300px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1300' height='1300'%3E%3Cfilter id='d' x='0' y='0' width='1300' height='1300' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0021' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.38 0 0 0 0 0.20 0 0 0 -1.7 0.78'/%3E%3C/filter%3E%3Crect width='1300' height='1300' filter='url(%23d)'/%3E%3C/svg%3E");
  animation: oaa-cloud-b 470s linear infinite; }
@keyframes oaa-cloud-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-900px,-900px,0); } }
@keyframes oaa-cloud-b { from { transform: translate3d(-1300px,0,0); } to { transform: translate3d(0,-1300px,0); } }

.oaa-band--panel { background: rgba(13,16,21,0.82); }

/* last, so it outranks the animations above without !important */
@media (prefers-reduced-motion: reduce) {
  .oaa-stars, .oaa-cloud { animation: none; }
}