/* ==========================================================================
   Research — filters, experiment tiles, and the task animations

   Loaded only by research.html. Base, navigation, sections, and footer come
   from styles.css; all values come from tokens.css.
   ========================================================================== */

/* ==========================================================================
   Filters
   ========================================================================== */

/* Filtering needs JavaScript, so the bar is hidden unless JS is running.
   Without it every experiment is listed, which is the correct fallback. */
.filters {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
}

.js .filters {
  display: flex;
}

.filter {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.filter:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* ==========================================================================
   Tiles
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: border-color var(--duration-medium) var(--ease),
    transform var(--duration-medium) var(--ease);
}

.tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.tile[hidden] {
  display: none;
}

/* The visual carries the tile, so it takes the whole width and a wide frame. */
.tile__visual {
  aspect-ratio: 16 / 8;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-8);
}

.tile__name {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* The question, not the name, is the thing a visitor should read first. */
.tile__question {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.tile__metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.tile__figure {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tile__measure {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.tile__note {
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.tile__tags li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.tile__cta {
  margin-top: auto;
  padding-top: var(--space-8);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.tile__cta span {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease);
}

.tile:hover .tile__cta span {
  transform: translateX(3px);
}

.tiles__empty {
  margin-top: var(--space-12);
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  text-align: center;
}

/* ==========================================================================
   Task scenes

   Each element carries a sensible static position of its own; the animation
   only moves it from there. With motion disabled the scene still reads as a
   frame from the task rather than collapsing to one edge.
   ========================================================================== */

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---- Dino ---- */

.scene--dino {
  background: linear-gradient(
    180deg,
    var(--surface-base),
    color-mix(in srgb, var(--accent) 3%, var(--surface-base))
  );
}

.scene__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26%;
  height: 1px;
  background: var(--border-strong);
}

/* Traced from the gameplay footage, so it is taller than it is wide. Sized by
   the width that gives it the same standing height as before. */
.scene__dino {
  position: absolute;
  left: 18%;
  bottom: 26%;
  width: 7%;
  max-width: 28px;
  animation: dino-jump 3.2s var(--ease) infinite;
}

.scene__dino svg,
.scene__cactus svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--accent);
}

@keyframes dino-jump {
  0%,
  16% {
    transform: translateY(0);
  }
  24% {
    transform: translateY(-34px);
  }
  32%,
  66% {
    transform: translateY(0);
  }
  74% {
    transform: translateY(-34px);
  }
  82%,
  100% {
    transform: translateY(0);
  }
}

.scene__cactus {
  position: absolute;
  bottom: 26%;
  width: 4.5%;
  max-width: 18px;
  opacity: 0.75;
}

/* Base positions double as the static frame when motion is off. */
.scene__cactus--a {
  left: 62%;
  animation: cactus-run 3.2s linear infinite;
}

.scene__cactus--b {
  left: 92%;
  width: 3.5%;
  animation: cactus-run 3.2s linear infinite;
  animation-delay: 1.6s;
}

@keyframes cactus-run {
  from {
    left: 105%;
  }
  to {
    left: -12%;
  }
}

/* ---- Asteroid dodger ---- */

/* This scene keeps the game's own palette rather than the page's. It is a
   depiction of a screen, the way a screenshot is, and a starfield only reads
   as stars when the sky is darker than they are; inverted onto paper the same
   dots read as dust. The dino tile stays light for the same reason, since that
   game really is dark on white. The values below are deliberately local and
   must not be promoted into tokens.css. */
.scene--space {
  --void: #0b1220;
  --star: #e9eff7;
  --rock: #9fb0c4;
  /* The page accent is sized to be read on paper and vanishes on the void, so
     the craft takes a lighter tint of the same hue. */
  --craft: #34d399;

  background: radial-gradient(
      ellipse 80% 65% at 50% 0%,
      color-mix(in srgb, var(--accent-secondary) 34%, transparent),
      transparent 72%
    ),
    var(--void);
}

.scene__stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--star) 0.8px, transparent 1px),
    radial-gradient(circle, var(--star) 0.6px, transparent 0.9px);
  background-size: 54px 44px, 31px 37px;
  background-position: 0 0, 17px 11px;
  opacity: 0.55;
}

.scene__rock {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--rock);
  border-radius: 46% 54% 40% 60% / 55% 40% 60% 45%;
}

.scene__rock--a {
  left: 16%;
  top: 12%;
  animation: rock-fall 3.6s linear infinite;
}

.scene__rock--b {
  left: 39%;
  top: 46%;
  width: 10px;
  height: 10px;
  animation: rock-fall 4.4s linear infinite;
  animation-delay: 0.9s;
}

.scene__rock--c {
  left: 63%;
  top: 24%;
  width: 17px;
  height: 17px;
  animation: rock-fall 4s linear infinite;
  animation-delay: 1.8s;
}

.scene__rock--d {
  left: 84%;
  top: 62%;
  width: 11px;
  height: 11px;
  animation: rock-fall 3.2s linear infinite;
  animation-delay: 2.5s;
}

@keyframes rock-fall {
  from {
    top: -14%;
    transform: rotate(0deg);
  }
  to {
    top: 108%;
    transform: rotate(180deg);
  }
}

.scene__ship {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 7%;
  max-width: 30px;
  translate: -50% 0;
  animation: ship-weave 6.4s ease-in-out infinite;
}

.scene__ship svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--craft);
}

@keyframes ship-weave {
  0%,
  100% {
    left: 26%;
  }
  50% {
    left: 74%;
  }
}

/* ==========================================================================
   Closing actions
   ========================================================================== */

.build__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.build__actions span {
  display: inline-block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile__visual {
    aspect-ratio: 16 / 7;
  }
}

@media (max-width: 620px) {
  .tile__body {
    padding: var(--space-6);
  }

  .filters {
    gap: var(--space-1);
  }

  .filter {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}