/* ==========================================================================
   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 72% 18%, rgba(244, 89, 10, .30) 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 bear is the star now: big, top-anchored, overlapping the headline */
.poster__bear {
  position: absolute;
  z-index: 2;
  top: -40px; right: -90px;
  width: min(74vw, 440px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: 64% 0%;
  -webkit-mask-image: radial-gradient(ellipse 88% 84% at 64% 40%, #000 58%, transparent 97%);
          mask-image: radial-gradient(ellipse 88% 84% at 64% 40%, #000 58%, transparent 97%);
  animation: db-drop-in 1200ms cubic-bezier(.17,.84,.44,1) both,
             db-sway 8s ease-in-out 1200ms infinite;
}
@media (min-width: 760px)  { .poster__bear { width: min(58vw, 660px); right: -40px; top: -60px; } }
@media (min-width: 1200px) { .poster__bear { width: 820px; right: 2vw; top: -80px; } }

.poster__in {
  position: relative; z-index: 3;
  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: 4;
  height: 5px;
  background: linear-gradient(90deg,
    var(--t-green) 0 33.33%, var(--t-blue) 33.33% 66.66%, var(--t-red) 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: 118%;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.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: 4; 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; }