body{isolation:isolate}.poster-wall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--theme-bg,#100a23)}
body:has(.poster-wall) #ambient-bg{display:none!important}
.poster-wall-grid{position:absolute;inset:-30% -20%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.1vw;transform:rotate(-12deg) scale(1.05);opacity:.4;animation:posterDrift 90s ease-in-out infinite alternate;will-change:transform}
.poster-wall-tile{position:relative;overflow:hidden;border-radius:1vw;aspect-ratio:2/3;background:var(--theme-panel,#241636);box-shadow:0 1rem 2rem #0005;animation:posterGlow 24s ease-in-out infinite alternate;animation-delay:var(--poster-delay)}
.poster-wall-tile>img{width:100%;height:100%;object-fit:cover;display:block}.poster-wall-brand{position:absolute;right:5%;bottom:4%;display:flex;align-items:center;gap:.3rem;padding:.25rem .4rem;background:#100a23d9;color:#fff;font:700 clamp(8px,.65vw,14px)/1.2 system-ui;border-radius:.45rem}.poster-wall-brand img{width:1.25em;height:1.25em;border-radius:25%}
.poster-wall::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-bg,#100a23) 62%,transparent),color-mix(in srgb,var(--theme-bg,#100a23) 96%,transparent) 32% 68%,color-mix(in srgb,var(--theme-bg,#100a23) 62%,transparent)),linear-gradient(0deg,var(--theme-bg,#100a23),transparent 80%)}
@keyframes posterDrift{to{transform:rotate(-12deg) scale(1.05) translateY(-5%)}}@keyframes posterGlow{to{filter:saturate(.65) brightness(.8)}}
@media(max-width:600px){.poster-wall-grid{inset:-12% -42%;grid-template-columns:repeat(4,minmax(0,1fr));gap:2vw;opacity:.3}.poster-wall-tile{border-radius:2vw}.poster-wall-brand{font-size:9px}.poster-wall::after{background:linear-gradient(90deg,color-mix(in srgb,var(--theme-bg,#100a23) 80%,transparent),color-mix(in srgb,var(--theme-bg,#100a23) 95%,transparent) 25% 75%,color-mix(in srgb,var(--theme-bg,#100a23) 80%,transparent))}}
@media(prefers-reduced-motion:reduce){.poster-wall-grid,.poster-wall-tile{animation:none!important;will-change:auto}}.reduce-motion .poster-wall-grid,.reduce-motion .poster-wall-tile{animation:none!important;will-change:auto}
@media(forced-colors:active){.poster-wall{display:none}}@media print{.poster-wall{display:none}}
/* All external captions stay beneath the original, unobscured cover. */
html .marquee-item{height:auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;align-self:stretch}
html .marquee-item img{height:auto!important;aspect-ratio:2/3;object-fit:cover;flex:0 0 auto!important}
html .marquee-title{position:static!important;inset:auto!important;box-sizing:border-box;width:100%!important;background:var(--theme-surface,#241636)!important;color:var(--theme-text,#fff)!important;font-size:clamp(.75rem,1vw,.95rem)!important;line-height:1.45;padding:.6rem .45rem!important;z-index:auto!important;white-space:normal;overflow-wrap:anywhere;flex:1}

body:has(.poster-wall)>:is(main,footer,.main-layout,.container,.content,.app-container,.premium-card,.top-ask-wrap,.live-strip,.upgrade-ribbon){position:relative;z-index:1}
body:has(.poster-wall)::before,body:has(.poster-wall)::after{display:none!important}

/* ===== POSTER WALL — CINEMATIC TREATMENT =====
   The wall existed but read as texture rather than as entertainment. Three
   things were muting it: the grid sat at 40% opacity, the readability veil
   was 96% opaque straight through the centre where posters actually show,
   and posterGlow animated TOWARD saturate(.65) brightness(.8) — actively
   draining colour out of the artwork over 24 seconds.

   These rules come after the originals so they win on cascade order without
   editing the minified base file. Content still sits on .premium-card
   surfaces with their own opaque backgrounds, so raising the wall behind
   them changes atmosphere without touching text contrast. */

/* Real posters, readable as posters. */
.poster-wall-grid {
  opacity: .62;
  filter: saturate(1.15) contrast(1.06);
}

/* Lift the veil in the centre. 96% -> 86% is the single change that makes the
   artwork legible; below about 80% text over the gaps starts to suffer. */
.poster-wall::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--theme-bg, #100a23) 52%, transparent),
      color-mix(in srgb, var(--theme-bg, #100a23) 86%, transparent) 30% 70%,
      color-mix(in srgb, var(--theme-bg, #100a23) 52%, transparent)),
    linear-gradient(0deg, var(--theme-bg, #100a23), transparent 78%),
    /* Vignette: pulls the eye to the centre and gives the wall depth rather
       than reading as flat wallpaper. */
    radial-gradient(ellipse 120% 80% at 50% 45%, transparent 30%,
      color-mix(in srgb, var(--theme-bg, #100a23) 55%, transparent) 100%);
}

/* Glow now ADDS warmth instead of removing it — the tiles breathe between
   neutral and slightly richer, which reads as living artwork rather than
   a static screenshot. */
@keyframes posterGlow {
  0%   { filter: saturate(1) brightness(.92); }
  100% { filter: saturate(1.28) brightness(1.08); }
}

/* PROJECTOR SWEEP
   A soft warm beam drifting across the wall, like light moving over a cinema
   foyer. Deliberately slow (28s) and low-contrast: an effect you notice on
   the second look, not one that competes with the page. transform/opacity
   only, so it composites on the GPU and costs nothing in layout. */
.poster-wall::before {
  content: '';
  position: absolute;
  top: -30%; bottom: -30%; left: -40%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent,
    rgba(240, 216, 120, .07) 35%,
    rgba(255, 243, 163, .13) 50%,
    rgba(240, 216, 120, .07) 65%,
    transparent);
  filter: blur(22px);
  transform: skewX(-12deg);
  animation: posterSweep 28s cubic-bezier(.45, 0, .55, 1) infinite;
  z-index: 1;
}
@keyframes posterSweep {
  0%        { left: -45%; opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { left: 115%; opacity: 0; }
}

/* Gold edge on each tile so the poster grid picks up the brand rather than
   floating as unrelated artwork. */
.poster-wall-tile {
  box-shadow: 0 1rem 2rem #0006, inset 0 0 0 1px rgba(228, 192, 108, .18);
}

/* MOBILE: raised too, but less — a phone screen is mostly content, so the
   wall has proportionally less room to breathe before it crowds text. */
@media (max-width: 600px) {
  .poster-wall-grid { opacity: .46; filter: saturate(1.12) contrast(1.04); }
  .poster-wall::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--theme-bg, #100a23) 72%, transparent),
        color-mix(in srgb, var(--theme-bg, #100a23) 90%, transparent) 25% 75%,
        color-mix(in srgb, var(--theme-bg, #100a23) 72%, transparent)),
      linear-gradient(0deg, var(--theme-bg, #100a23), transparent 82%);
  }
  /* The sweep is the first thing to go on a phone: least value, most cost. */
  .poster-wall::before { display: none; }
}

/* TV / large screens: the wall is the room's ambience, so let it show. */
@media (min-width: 2560px) {
  .poster-wall-grid { opacity: .7; }
}

/* Every effect here is decoration, so all of it stops. */
@media (prefers-reduced-motion: reduce) {
  .poster-wall::before { animation: none; opacity: 0; }
  .poster-wall-grid { filter: saturate(1.1); }
}
.reduce-motion .poster-wall::before { animation: none; opacity: 0; }