/* ==========================================================================
   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%);
}

/* ------------------------------------------------- mascot + brand lockup -- */
/* Rebuilt 2026-10-11 against Joel's banner artwork. The mascot is a real
   cutout with its own alpha, so unlike the old bear it needs no screen blend
   and no dark plate under it. It sits left and the lockup sits right, the
   same arrangement as the banners. */

.poster__mascot {
  position: absolute;
  z-index: 2;
  top: 4vh; left: -14vw; right: auto;
  width: min(96vw, 560px);
  height: auto;
  pointer-events: none;
  transform-origin: 56% 0%;
  --art-op: .40;
  /* The drop. Joel asked for this back when the hero was first built and I
     deleted it along with the old bear, which was the wrong call: the mascot
     is a DROP bear, so it should arrive by dropping. Lands after the
     headline, overshoots, settles, then breathes. */
  animation:
    db-fall 1500ms cubic-bezier(.42, 0, .28, 1) 700ms both,
    db-sway 8s ease-in-out 2200ms infinite;
}

@media (min-width: 860px) {
  .poster { align-items: center; }
  /* Pushed further off the left edge so the claws stop short of the copy
     column. The artwork is clipped at the frame edge in Joel's banners too,
     so losing the left third is on brand rather than a compromise. */
  .poster__mascot { left: -13vw; width: min(48vw, 650px); top: -2vh; --art-op: 1; }
  /* Two columns, same split as the banners: art left, lockup right. A grid
     rather than max-width on each child, so nothing can escape the column
     and land back on top of the mascot. */
  .poster__in {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    padding-bottom: var(--s5);
  }
  .poster__in > * { grid-column: 2; }
}
@media (min-width: 1280px) {
  .poster__mascot { left: -9vw; width: 740px; }
  .poster__in { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }
}

/* Corner brackets. Straight off the artwork, and the one decorative device
   this hero gets. */
.poster__brk {
  position: absolute; z-index: 5;
  width: 26px; height: 26px;
  border: 3px solid var(--ember);
  pointer-events: none;
}
.poster__brk--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.poster__brk--br { bottom: 26px; right: 22px; border-left: 0; border-top: 0; }
@media (min-width: 860px) {
  .poster__brk { width: 34px; height: 34px; }
  .poster__brk--tl { top: 30px; left: 30px; }
  .poster__brk--br { bottom: 34px; right: 30px; }
}

/* Eyebrow: ember square, caps, the // separator. From the banner. */
.lock__eye {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
}
.lock__sq { width: 9px; height: 9px; background: var(--ember); flex: none; }
.lock__eye i { font-style: normal; color: var(--ember); letter-spacing: .1em; }

/* The lockup. Wide and heavy, as drawn.
   Scoped to .poster so it beats the old `.poster h1` rule below, which is
   element+class and would otherwise win and blow this up to 17vw. */
.poster .lock__h {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-stretch: 125%;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.02em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 6px 60px rgba(0, 0, 0, .75);
}

/* Mode badges: one filled, the rest outlined. Square, never pills. */
.lock__badges { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s3) 0 0; }
.badge {
  display: inline-block;
  padding: 7px 12px;
  border: 2px solid var(--bone);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
}
.badge--fill { background: var(--ember); border-color: var(--ember); color: #131413; }

.lock__sub {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: #EFE9DD;
  max-width: 46ch;
  margin: var(--s3) 0 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .9);
}

/* Feature row with the diamond separators from the artwork. This is Joel's
   own brand device, not a generic chip strip, so the diamonds stay. */
.lock__feat {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin: var(--s3) 0 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
}
.lock__feat span { display: flex; align-items: center; gap: 8px; }
.lock__feat span::before { content: "\25C6"; color: var(--ember); font-size: .6875rem; }

.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%;
  --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 so copy sits on black. Phones only: there the mascot sits behind
   the lockup, so the text needs the scrim. On desktop the copy clears the art
   entirely and this gradient would only dim the mascot's lower half. */
@media (max-width: 859px) {
  .poster::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 72%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(0deg,
      var(--ink) 0 18%,
      rgba(19, 20, 19, .92) 46%,
      rgba(19, 20, 19, .58) 74%,
      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(.5) brightness(.62);
}
.ozone::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(19,20,19,.92) 0 36%, rgba(19,20,19,.52) 70%, rgba(19,20,19,.76) 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;
}
@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); }

/* Live season numbers from our own players (server-rendered, see _middleware) */
.hero-stats-slot { margin-top: var(--s4); }
.hero-src { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; border: 1px solid var(--ember); background: rgba(11, 11, 16, .72); font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--bone); }
.hero-src__sq { width: 9px; height: 9px; background: var(--ember); flex: none; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s3) 0 0; }
.hero-stats dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #CFC7B9; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.hero-stats dd { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; color: var(--ember); font-variant-numeric: tabular-nums; text-shadow: 0 2px 22px rgba(0, 0, 0, .9); }