/* ==========================================================================
   SUMMIT CITY RP — CINEMATIC LAYER
   --------------------------------------------------------------------------
   Loaded after styles.css. Everything here is the APEX-style treatment:

     1. Video hero
     2. Live Discord member pill in the nav
     3. Staff org chart
     4. Partners grid
     5. Command page

   Kept as its own file rather than woven into styles.css so the treatment
   can be adjusted, or removed, without touching the original sheet.
   ========================================================================== */


/* ══════════════════════════════ 1. VIDEO HERO ══════════════════════════════
   Sits at the same layer as .hero__photo: above the drawn sky, below the fog
   and the content. The scrim is doing real work — gameplay footage is bright
   and busy, and the logo plus both CTAs have to stay readable over whatever
   frame happens to be on screen when someone lands on the page. */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* Tuned against the real footage, which is night capture averaging luma
     23-46 before it gets here. An aggressive knock-down (the obvious choice
     for bright daytime gameplay) crushes the city into flat black and throws
     away the thing the video was added for. Barely touch it instead. */
  filter: saturate(.95) brightness(.88) contrast(1.08);
}

.hero__videoScrim {
  position: absolute;
  inset: 0;
  /* Light, for the same reason. The logo and CTAs sitting on top are near-white
     (--snow) over a scene this dark, so legibility is already comfortable —
     the scrim only has to stop the brightest streetlights and headlights from
     clashing with the text, not black the whole frame out. */
  background:
    radial-gradient(70% 55% at 50% 45%, var(--scrim-1), transparent 78%),
    linear-gradient(180deg, var(--scrim-2) 0%, rgba(5, 10, 22, .18) 38%, var(--void) 97%);
}

/* With video running, the drawn range and starfield would fight it — exactly
   the same reasoning as .hero.has-photo in the base sheet. */
.hero.has-video .hero__range,
.hero.has-video .hero__stars,
.hero.has-video .hero__aurora { display: none; }


/* ══════════════════ 2. LIVE DISCORD MEMBER PILL ══════════════════
   Replaces the plain "Join Discord" nav button. It ships showing only the
   label; main.js reveals the count once /api/discord answers. Because the
   label is present from first paint the pill only grows by the width of the
   digits when the number lands, so the nav never jumps. */

.nav__discord {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  flex: none;
  background: linear-gradient(180deg, rgba(30, 111, 217, .22), rgba(30, 111, 217, .10));
  border: 1px solid rgba(59, 142, 255, .42);
  color: var(--snow);
  transition:
    background .25s var(--ease),
    border-color .25s var(--ease),
    transform .25s var(--ease),
    box-shadow .25s var(--ease);
}

.nav__discord:hover {
  background: linear-gradient(180deg, rgba(59, 142, 255, .34), rgba(30, 111, 217, .18));
  border-color: var(--glow);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(30, 111, 217, .32);
}

.nav__discordIcon { display: flex; flex: none; }
.nav__discordIcon svg { width: 20px; height: 20px; color: var(--ice); }

.nav__discordBody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
  min-width: 0;
}

.nav__discordCount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--snow);
  /* Tabular figures so a count ticking 998 -> 1,004 does not reflow the pill. */
  font-variant-numeric: tabular-nums;
}

.nav__discordLabel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Before a count arrives the label is carrying the whole pill, so it needs to
   be sized like a button label rather than like a caption. */
.nav__discord[data-state="idle"] .nav__discordLabel,
.nav__discord[data-state="error"] .nav__discordLabel {
  font-size: 14px;
  letter-spacing: .09em;
  color: var(--snow);
}

/* Once live, a slow ring pulse — the same trick APEX use to pull the eye to
   the count. Deliberately gentle: it repeats forever, on every page. */
.nav__discord[data-state="live"] { animation: discordPulse 3.4s var(--ease) infinite; }
.nav__discord[data-state="live"]:hover { animation: none; }

@keyframes discordPulse {
  0%   { box-shadow: 0 0 0 0   rgba(59, 142, 255, .42); }
  62%  { box-shadow: 0 0 0 9px rgba(59, 142, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(59, 142, 255, 0); }
}


/* ══════════════════════════════ 3. ORG CHART ══════════════════════════════
   Tiers stack vertically with a connector spine drawn between them. APEX draw
   theirs as a measured SVG, which needs JavaScript to stay correct on every
   resize; this uses pseudo-element rules instead, so it survives any viewport
   and any number of cards without a single layout measurement. */

.orgchart {
  margin-top: clamp(48px, 7vw, 84px);
  padding-top: clamp(32px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.orgchart__heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--snow);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.orgchart__tiers {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orgtier {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orgtier__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}

/* The spine. Every tier after the first grows a vertical line reaching up to
   the tier above, which is what makes the stack read as a hierarchy at all. */
.orgtier + .orgtier::before {
  content: '';
  display: block;
  width: 2px;
  height: 38px;
  background: linear-gradient(180deg, transparent, var(--summit));
  box-shadow: 0 0 10px rgba(59, 142, 255, .5);
  margin-bottom: 18px;
}

.orgtier__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  position: relative;
}

/* A horizontal rail above rows holding more than one card, tying the siblings
   together. Suppressed on single-card rows, where it would be a stray line. */
.orgtier__row[data-multi="1"]::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(59, 142, 255, .55) 12%,
    rgba(59, 142, 255, .55) 88%,
    transparent);
  pointer-events: none;
}

.orgcard {
  --accent: var(--summit);
  width: 200px;
  padding: 22px 16px 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  position: relative;
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    background .3s var(--ease),
    box-shadow .3s var(--ease);
}

.orgcard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .85;
}

.orgcard:hover {
  transform: translateY(-4px);
  background: var(--card-hi);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:
    0 14px 34px rgba(3, 7, 15, .55),
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.orgcard__avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  object-fit: cover;
  background: var(--surface);
}

/* Initial-letter stand-in when nobody has uploaded an avatar yet, so a team
   page that is still being filled in looks deliberate rather than broken. */
.orgcard__initial {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  color: var(--accent);
  background: radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.orgcard__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--snow);
  line-height: 1.15;
}

.orgcard__rank {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ice);
  letter-spacing: .02em;
}

.orgcard__team {
  margin-top: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* An unfilled seat is stated plainly rather than dressed up as a person. */
.orgcard.is-vacant { opacity: .62; }
.orgcard.is-vacant .orgcard__name { color: var(--muted); }


/* ══════════════════════════════ 4. PARTNERS ══════════════════════════════ */

.partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.partner {
  --accent: var(--summit);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}

.partner:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow:
    0 18px 40px rgba(3, 7, 15, .5),
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.partner__banner {
  aspect-ratio: 8 / 3;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 26%, var(--surface)), var(--midnight));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner__banner img { width: 100%; height: 100%; object-fit: cover; }

/* No banner supplied — the partner initial stands in, tinted to their accent
   so the grid still reads as a set of distinct brands. */
.partner__bannerInitial {
  font-family: var(--display);
  font-weight: 800;
  font-size: 52px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 75%, var(--snow));
  opacity: .55;
}

.partner__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.partner__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--snow);
}

.partner__desc {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  /* Partner blurbs are written by the partners and vary wildly in length.
     Clamping keeps the grid tidy without editing anybody else's copy. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.partner__cta {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.partner__cta::after {
  content: '';
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: width .25s var(--ease);
}

.partner:hover .partner__cta::after { width: 24px; }


/* ══════════════════════════════ 5. COMMAND PAGE ══════════════════════════════ */

.cmd-hero {
  position: relative;
  padding: clamp(140px, 16vw, 190px) var(--pad) clamp(48px, 7vw, 72px);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(30, 111, 217, .20), transparent 65%),
    linear-gradient(180deg, #04080f, var(--void));
  border-bottom: 1px solid var(--line);
}

.cmd-hero__eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ice);
}

.cmd-hero__title {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 7vw, 72px);
  line-height: .98;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--snow);
}

.cmd-hero__sub {
  margin: 16px auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 16px;
}

/* Department tabs */
.cmd-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(28px, 4vw, 40px) auto 0;
}

.cmd-tab {
  --accent: var(--summit);
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(18, 32, 58, .4);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition:
    color .25s var(--ease),
    border-color .25s var(--ease),
    background .25s var(--ease),
    box-shadow .25s var(--ease);
}

.cmd-tab:hover { color: var(--snow); border-color: var(--summit); }

.cmd-tab[aria-selected="true"] {
  color: var(--snow);
  border-color: var(--accent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

.cmd-panel { padding-block: clamp(48px, 7vw, 80px); }

.cmd-panel__head {
  text-align: center;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}

.cmd-panel__title {
  --accent: var(--summit);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 42px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--snow);
}

.cmd-panel__title::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.cmd-panel__blurb { margin-top: 14px; color: var(--muted); }

.cmd-division { margin-bottom: clamp(34px, 4.5vw, 52px); }

.cmd-division__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* Rule that fills the space to the right of the division name. */
.cmd-division__name::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.cmd-division__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

/* A division that is still recruiting says so, rather than rendering as an
   empty grid that looks like a rendering bug. */
.cmd-division__open {
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--dim);
  font-size: 14px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The command page footer sits directly on the last panel, so it needs its
   own top rule that the home page's footer gets from the final CTA. */
.cmd-foot { border-top: 1px solid var(--line); }


/* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */

@media (max-width: 720px) {
  .orgcard { width: min(200px, 44vw); }
  .orgtier__row[data-multi="1"]::before { left: 6%; right: 6%; }
}

@media (max-width: 520px) {
  /* On a narrow nav the number carries the meaning on its own; the word
     "Members" is the first thing worth losing. */
  .nav__discord[data-state="live"] .nav__discordLabel { display: none; }
  .nav__discord { padding: 8px 14px 8px 11px; }
  .orgcard { width: 100%; max-width: 280px; }
  .orgtier__row[data-multi="1"]::before { display: none; }
}


/* ══════════════════════════════ MOTION PREFERENCES ══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .nav__discord[data-state="live"] { animation: none; }
  .hero__video video { display: none; }
}