/* ==========================================================================
   Drop Bears — poster layer
   Joel: "still meh and avg".
   The problem was never the words. It was nine left-aligned text blocks in a
   1200px box with identical rhythm. This layer breaks the container, makes the
   bear the star, uses the faction colours as structure instead of decoration,
   and alternates loud full-bleed moments with tight quiet ones.
   ========================================================================== */

/* ------------------------------------------------------------- full bleed -- */

.bleed {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #06060A;
}

.bleed__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ================================================================== HERO -- */

.poster {
  position: relative;
  min-height: 96vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #06060A;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 759px) { .poster { min-height: 92vh; } }

.poster__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(.45) contrast(1.08) brightness(.52);
}

/* warm the plate towards the brand so the photo is not a grey rectangle */
.poster__wash {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 26% 18%, rgba(240, 98, 26, .32) 0%, transparent 58%),
    linear-gradient(180deg, rgba(6,6,10,.82) 0 14%, rgba(6,6,10,.42) 40%, rgba(6,6,10,.90) 82%, #06060A 100%);
}

/* The crop has a hard cut on its left side where the branch is sliced. Anchor
   the bear to the LEFT so that edge sits off screen, and move the copy to the
   right half. */
.poster__bear {
  position: absolute;
  z-index: 2;
  top: -40px; left: -18vw; right: auto;
  width: min(104vw, 520px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: 56% 0%;
  /* feather the right and bottom; the left cut is off screen so it needs none */
  -webkit-mask-image: radial-gradient(ellipse 96% 86% at 42% 42%, #000 62%, transparent 99%);
          mask-image: radial-gradient(ellipse 96% 86% at 42% 42%, #000 62%, transparent 99%);
  --art-op: .78;
  /* lands after the headline, overshoots, settles, then holds */
  animation:
    db-fall 1500ms cubic-bezier(.42, 0, .28, 1) 1250ms both,
    db-sway 8s ease-in-out 2750ms infinite;
}
@media (min-width: 760px)  { .poster__bear { width: min(72vw, 780px); left: -10vw; right: auto; top: -55px; --art-op: .9; } }
@media (min-width: 1200px) { .poster__bear { width: 960px; left: -6vw; right: auto; top: -70px; --art-op: 1; } }

/* dark floor painted OVER the bear so the copy always sits on black */
.poster::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg,
    var(--ink) 0 20%,
    rgba(19, 20, 19, .94) 42%,
    rgba(19, 20, 19, .62) 68%,
    transparent 100%);
}

.poster__in {
  position: relative; z-index: 4;
  width: 100%;
  padding-bottom: var(--s6);
}
@media (min-width: 900px) { .poster__in { padding-bottom: var(--s7); } }

/* the headline breaks the container and runs off the left edge */
.poster h1 {
  font-size: clamp(4rem, 17vw, 15rem);
  font-stretch: 125%;
  line-height: .8;
  letter-spacing: -.035em;
  margin-left: -.055em;
  text-shadow: 0 6px 60px rgba(0, 0, 0, .75);
}

.poster__sub {
  font-size: clamp(1.0625rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: #EFE9DD;
  max-width: 30ch;
  margin: var(--s4) 0 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .9);
  font-weight: 500;
}

.poster__cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

/* thin faction rule pinned to the very bottom of the hero */
.poster__rule {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 5px;
  background: linear-gradient(90deg,
    var(--t-blue) 0 33.33%, var(--t-red) 33.33% 66.66%, var(--t-green) 66.66% 100%);
}

/* ===================================================== THREE TEAM COLUMNS -- */
/* The faction colours become the structure of a whole screen, not three cards. */

.factions {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) { .factions { grid-template-columns: repeat(3, 1fr); } }

.faction {
  position: relative;
  min-height: 34vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--s4);
  isolation: isolate;
}
@media (min-width: 820px) { .faction { min-height: 72vh; padding: var(--s5); } }

.faction img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: grayscale(.9) contrast(1.1) brightness(.4);
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
}
.faction::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity 500ms var(--ease);
}
.faction--g::after { background: var(--t-green); opacity: .78; }
.faction--b::after { background: var(--t-blue);  opacity: .78; }
.faction--r::after { background: var(--t-red);   opacity: .72; }

.faction::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(6,6,10,.88) 0 22%, rgba(6,6,10,.25) 60%, transparent 100%);
}

.faction:hover img { transform: scale(1.04); filter: grayscale(.7) contrast(1.1) brightness(.5); }
.faction:hover::after { opacity: .6; }

.faction__body { position: relative; z-index: 3; }
.faction__n {
  font-family: var(--display); font-weight: 900; font-stretch: 100%;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  letter-spacing: -.02em;
  /* MANTICORE at 5vw overran its column at 1280px */
  font-size: clamp(1.5rem, 3.3vw, 2.75rem);
  line-height: .9; color: var(--bone);
  text-shadow: 0 2px 24px rgba(0,0,0,.8);
}
.faction__d {
  margin: var(--s2) 0 0; max-width: 26ch;
  color: #EFE9DD; font-size: .9375rem; line-height: 1.5;
  text-shadow: 0 1px 14px rgba(0,0,0,.9);
}

/* the line that sits across the three columns */
.factions__over {
  position: absolute; z-index: 4; top: var(--s4); left: 0; right: 0;
  text-align: center; pointer-events: none;
}
.factions__over p {
  display: inline-block; margin: 0;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bone);
  background: rgba(6, 6, 10, .78);
  padding: 10px 16px;
  border: 1px solid rgba(239, 233, 221, .18);
}

/* =========================================================== THE STRIKE -- */
/* The "nothing is coming to save you" poster. One screen, one idea. */

.strike {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: #06060A;
  border-bottom: 1px solid var(--line);
}
.strike img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: grayscale(1) contrast(1.15) brightness(.34);
}
.strike::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top right, transparent calc(50% - 2px), rgba(224, 84, 83, .9) 50%, transparent calc(50% + 2px)),
    linear-gradient(to top left,  transparent calc(50% - 2px), rgba(224, 84, 83, .9) 50%, transparent calc(50% + 2px));
}
.strike__in { position: relative; z-index: 2; width: 100%; }
.strike h2 {
  font-size: clamp(2.5rem, 9vw, 8rem);
  font-stretch: 112%;
  line-height: .86;
  text-shadow: 0 4px 44px rgba(0,0,0,.85);
}
.strike__sub {
  margin: var(--s4) 0 0; max-width: 42ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: #EFE9DD;
  text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.strike__tag {
  display: inline-block; margin-top: var(--s4);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone);
  background: rgba(6,6,10,.8); padding: 9px 13px;
  border-left: 3px solid var(--t-red);
}

/* ============================================================ AUSTRALIA -- */

.ozone {
  position: relative; overflow: hidden;
  background: #06060A;
  padding-block: var(--s7);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .ozone { padding-block: var(--s8); } }

.ozone img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: grayscale(.85) brightness(.3);
}
.ozone::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,6,10,.95) 0 42%, rgba(6,6,10,.6) 72%, rgba(6,6,10,.85) 100%);
}
.ozone__in { position: relative; z-index: 2; }

/* ================================================================ CLOSE -- */

.close {
  position: relative; overflow: hidden;
  background: #06060A;
  min-height: 86vh;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
}
.close__bear {
  position: absolute; z-index: 1;
  right: -20vw; bottom: -10vh;
  width: min(120vw, 760px);
  mix-blend-mode: screen; opacity: .7;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 86% 82% at 62% 42%, #000 56%, transparent 96%);
          mask-image: radial-gradient(ellipse 86% 82% at 62% 42%, #000 56%, transparent 96%);
}
@media (min-width: 900px) { .close__bear { right: -4vw; bottom: -12vh; width: 900px; opacity: .85; } }

.close__in { position: relative; z-index: 2; width: 100%; }
.close h2 {
  font-size: clamp(2.75rem, 10vw, 9rem);
  font-stretch: 118%; line-height: .84;
  text-shadow: 0 4px 50px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------ quiet block -- */
/* Deliberately narrow and plain, so the loud sections have something to be
   loud against. */

.quiet { max-width: 760px; }

/* ---------------------------------------------------------- scroll cue ---- */

.cue {
  position: absolute; z-index: 5; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(239,233,221,.65);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cue span { display: block; width: 1px; height: 26px; background: linear-gradient(180deg, rgba(239,233,221,.55), transparent); animation: db-cue 2.4s ease-in-out infinite; }
@keyframes db-cue { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 759px) { .cue { display: none; } }

/* ------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .poster__bear { animation: none; opacity: 1; transform: none; }
  .cue span { animation: none; }
  .faction img, .faction::after { transition: none; }
}

/* ============================================================ CLIP OF THE WEEK -- */
/* Framed like a scope reticle rather than a generic card, so it belongs to the
   optics world the logo already lives in. */

.clip {
  position: relative;
  background: var(--char);
  border: 1px solid var(--line);
  padding: var(--s5) var(--s4);
}
@media (min-width: 900px) { .clip { padding: var(--s7) var(--s6); } }

/* corner brackets */
.clip::before, .clip::after,
.clip .clip__c1, .clip .clip__c2 {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--ember);
  pointer-events: none;
}
.clip::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.clip::after  { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.clip .clip__c1 { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.clip .clip__c2 { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.clip__grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .clip__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s7); } }

.clip h2 { font-size: clamp(2.25rem, 6vw, 4.5rem); }

.clip__when {
  display: inline-block;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lens);
  border: 1px solid rgba(255, 165, 31, .35);
  padding: 7px 11px;
  margin-bottom: var(--s3);
}

.clip__how { border-top: 1px solid var(--line); margin-top: var(--s2); }
.clip__row {
  display: grid; grid-template-columns: 34px 1fr;
  gap: var(--s3); align-items: baseline;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line-soft);
}
.clip__n {
  font-family: var(--display); font-weight: 900; font-stretch: 92%;
  font-size: 1.125rem; color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.clip__t { font-size: .9375rem; color: var(--soft); line-height: 1.55; }
.clip__t b { color: var(--bone); font-weight: 700; }

/* the clip panel leads with a frame from the game rather than a bare heading */
.clip__shot {
  position: relative;
  margin: calc(var(--s5) * -1) calc(var(--s4) * -1) var(--s5);
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 900px) {
  .clip__shot {
    margin: calc(var(--s7) * -1) calc(var(--s6) * -1) var(--s6);
    min-height: 340px;
  }
}
.clip__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: contrast(1.08) brightness(.62);
}
.clip__shot::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(16,16,24,.96) 0 18%, rgba(16,16,24,.55) 55%, rgba(16,16,24,.25) 100%);
}
.clip__shot__in { position: relative; z-index: 2; padding: var(--s4); width: 100%; }
@media (min-width: 900px) { .clip__shot__in { padding: var(--s5) var(--s6); } }
.clip__shot h2 { margin-top: var(--s2); text-shadow: 0 3px 30px rgba(0,0,0,.8); }