/* ==========================================================================
   Drop Bears — v2 scene layer
   Joel's note: "very ai like, no animation, no WARDOGS ref".
   This kills the stat-rail / four-up-facts / 01-02-03-steps formula and
   replaces it with three devices built out of the game's own mechanics,
   all of which move.
   ========================================================================== */

/* ------------------------------------------------ THE DROP (core motion) -- */
/* A drop bear drops. Everything on this site arrives from above. */

@keyframes db-drop-in {
  from { opacity: 0; transform: translateY(-64px) rotate(-2.4deg); }
  to   { opacity: var(--art-op, 1); transform: translateY(0) rotate(0deg); }
}
@keyframes db-sway {
  0%, 100% { transform: rotate(-0.7deg) translateY(0); }
  50%      { transform: rotate(0.7deg) translateY(6px); }
}
@keyframes db-lens-wake {
  0%   { opacity: .15; }
  18%  { opacity: 1; }
  26%  { opacity: .3; }
  38%  { opacity: 1; }
  100% { opacity: 1; }
}

.hero__art--bear {
  --art-op: .72;
  transform-origin: 62% 0%;
  animation: db-drop-in 1100ms cubic-bezier(.17,.84,.44,1) both,
             db-sway 7.5s ease-in-out 1100ms infinite;
}
@media (min-width: 760px)  { .hero__art--bear { --art-op: .78; } }
@media (min-width: 1100px) { .hero__art--bear { --art-op: .92; } }

/* headline drops word by word */
.drop-word { display: inline-block; }
.js .drop-word {
  opacity: 0;
  transform: translateY(-40px);
  animation: db-word 760ms cubic-bezier(.17,.84,.44,1) forwards;
  animation-delay: calc(var(--i) * 85ms + 200ms);
}
@keyframes db-word { to { opacity: 1; transform: none; } }

/* the canopy rule draws itself across, then the NVG lenses wake up */
.canopy { border-top: 0; }
.canopy::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.canopy.in::after { transform: scaleX(1); }
.canopy::before { opacity: 0; }
.canopy.in::before { animation: db-lens-wake 900ms ease-out 620ms forwards; }

/* ------------------------------------------- DEVICE A: THE CONTROL ZONE -- */

.zone { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; }
@media (min-width: 1000px) { .zone { grid-template-columns: 1fr 1.05fr; gap: var(--s7); } }

.zone__plate {
  position: relative; aspect-ratio: 1;
  background: var(--char); border: 1px solid var(--line);
}
.zone__plate svg { width: 100%; height: 100%; display: block; }

.zone__grid line { stroke: #1D1E28; stroke-width: 1; }
.zone__frame { fill: none; stroke: var(--line); stroke-width: 1; }
.zone__tick  { stroke: var(--faint); stroke-width: 1.5; }
.zone__scale { fill: var(--faint); font-family: var(--mono); font-size: 13px; letter-spacing: .14em; }

.zone__ring {
  fill: rgba(244, 89, 10, .07);
  stroke: var(--ember); stroke-width: 1.5; stroke-dasharray: 7 9;
  transform-origin: 260px 260px;
  animation: db-ring 26s linear infinite;
}
@keyframes db-ring { to { transform: rotate(360deg); } }

.zone__core {
  fill: var(--ember); opacity: .2;
  transform-origin: 260px 260px;
  animation: db-core 3.4s ease-in-out infinite;
}
@keyframes db-core {
  0%, 100% { transform: scale(.82); opacity: .14; }
  50%      { transform: scale(1);   opacity: .32; }
}

.zone__push path { stroke-width: 1.5; fill: none; stroke-dasharray: 5 7; }
.zone__t1 .zone__arrow { fill: var(--ember); } .zone__t1 path { stroke: var(--ember); }
.zone__t2 .zone__arrow { fill: var(--bone); }  .zone__t2 path { stroke: #6E6B78; }
.zone__t3 .zone__arrow { fill: #8A8794; }      .zone__t3 path { stroke: #4A4854; }

.zone__t1 { animation: db-push 7s ease-in-out infinite; }
.zone__t2 { animation: db-push 7s ease-in-out .9s infinite; }
.zone__t3 { animation: db-push 7s ease-in-out 1.8s infinite; }
@keyframes db-push {
  0%, 100% { opacity: .3; }
  42%      { opacity: 1; }
  70%      { opacity: .5; }
}

/* three teams racing to 100 */
.race { border-top: 1px solid var(--line); margin-top: var(--s5); }
.race__row {
  display: grid; grid-template-columns: 92px 1fr 54px;
  gap: var(--s3); align-items: center;
  padding-block: var(--s3); border-bottom: 1px solid var(--line-soft);
}
.race__n { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.race__t { height: 10px; background: var(--steel); position: relative; overflow: hidden; }
.race__f {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: #4A4854;
  transition: width 1900ms cubic-bezier(.22,.61,.36,1);
}
.race__row--us .race__f { background: var(--ember); }
.race__row--us .race__n { color: var(--ember); }
.race__v {
  font-family: var(--mono); font-size: .9375rem; color: var(--bone);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------ DEVICE B: THE LOADOUT SPLIT -- */

.loadout { border-top: 1px solid var(--line); }
.loadout__fig {
  font-family: var(--display); font-weight: 900; font-stretch: 92%;
  font-size: clamp(3.25rem, 10vw, 7.5rem); line-height: .86;
  color: var(--ember); font-variant-numeric: tabular-nums;
  padding-top: var(--s4);
}
.loadout__bar {
  display: flex; height: 56px; margin-top: var(--s4);
  border: 1px solid var(--line); background: var(--char); overflow: hidden;
}
.loadout__seg {
  display: flex; align-items: center; padding-inline: var(--s3);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  width: 0; transition: width 1500ms cubic-bezier(.22,.61,.36,1);
}
.loadout__seg--yes { background: var(--ember); color: #0B0B10; font-weight: 700; }
.loadout__seg--no {
  background: repeating-linear-gradient(135deg, #16171F 0 7px, #101018 7px 14px);
  color: var(--faint); text-decoration: line-through;
  border-left: 1px solid var(--line);
}
.loadout__keys { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 700px) { .loadout__keys { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.loadout__key { font-family: var(--mono); font-size: .8125rem; line-height: 1.65; color: var(--soft); }
.loadout__key b { color: var(--bone); font-weight: 700; display: block; margin-bottom: 4px; }
.loadout__key--no { color: var(--faint); }

/* -------------------------------------- DEVICE C: THE SERVER BROWSER ----- */

.browser { border: 1px solid var(--line); background: var(--char); overflow: hidden; }

.browser__bar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3); border-bottom: 1px solid var(--line); background: var(--steel);
}
.browser__title {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); margin-right: auto;
}
.browser__chip {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); padding: 6px 10px;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.browser__chip.on { color: #0B0B10; background: var(--ember); border-color: var(--ember); }

.browser__head, .browser__row {
  display: grid;
  grid-template-columns: 1fr 56px 54px;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  align-items: center;
}
@media (min-width: 820px) {
  .browser__head, .browser__row { grid-template-columns: 1fr 104px 128px 60px 72px; gap: var(--s3); }
}
.browser__head {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
}
.browser__row {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .8125rem; color: #7E7B88;
  min-height: 48px;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), background .35s var(--ease);
}
.browser.in .browser__row { opacity: 1; transform: none; }
.browser.in .browser__row:nth-of-type(2) { transition-delay: 70ms; }
.browser.in .browser__row:nth-of-type(3) { transition-delay: 140ms; }
.browser.in .browser__row:nth-of-type(4) { transition-delay: 210ms; }
.browser.in .browser__row:nth-of-type(5) { transition-delay: 280ms; }
.browser.in .browser__row:nth-of-type(6) { transition-delay: 350ms; }

.browser.filtered .browser__row--out { opacity: .22; }

.browser__row--us {
  color: var(--bone);
  background: rgba(244, 89, 10, .09);
  box-shadow: inset 3px 0 0 var(--ember);
}
.browser__row--us .browser__name { color: var(--ember); font-weight: 700; }
.browser__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser__hide { display: none; }
@media (min-width: 820px) { .browser__hide { display: block; } }

/* NVG scan sweep across our row once the list settles */
.browser.in .browser__row--us::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 0 38%, rgba(255,165,31,.24) 50%, transparent 62% 100%);
  transform: translateX(-100%);
  animation: db-scan 1600ms ease-out 900ms 1;
  pointer-events: none;
}
@keyframes db-scan { to { transform: translateX(100%); } }

/* ---------------------------------------------- asymmetric discord block -- */

.disc { text-align: left; }
.disc__grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: end; }
@media (min-width: 900px) { .disc__grid { grid-template-columns: 1.3fr auto; gap: var(--s7); } }
.disc .lede { margin-inline: 0; }
.disc .btn { margin-top: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .hero__art--bear,
  .js .drop-word,
  .canopy.in::before,
  .zone__ring, .zone__core, .zone__t1, .zone__t2, .zone__t3,
  .browser.in .browser__row--us::after {
    animation: none !important;
  }
  .hero__art--bear { opacity: var(--art-op); transform: none; }
  .js .drop-word   { opacity: 1; transform: none; }
  .canopy::before  { opacity: 1; }
  .canopy::after   { transform: scaleX(1); transition: none; }
  .browser__row    { opacity: 1; transform: none; transition: none; }
  .race__f, .loadout__seg { transition: none; }
}