/* =========================================================
   Base
========================================================= */
:root {
  /* Earth Heatmap (AQI-inspired, non-neon) */
  --heat-cool: #7b8f7a; /* moss */
  --heat-warm: #d6b98c; /* sand */
  --heat-hot: #c97a4a; /* clay */
  --special-sauce: #4ac9a7;
  --heat-veryhot: #9f3f2c; /* rust */
  --heat-after: #6b3b6e; /* dusk plum */
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100%;
  background-image: url("/assets/images/clouds.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body {
  margin: 0;
  font-family:
    "Nunito",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial;
  color: #222;
  overflow-x: hidden;
  background: transparent;
}

.tile-zone {
  padding-right: 0;
}

.modules-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;

  gap: 2.5rem;
  padding: 2rem 2.5rem;

  align-items: center; /* vertically center mixed-height tiles */

  scroll-padding-left: 2.5rem;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #1a38b2 transparent;
}

.modules-gallery::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   Video Tile — Atmospheric Edge Attenuation
========================================================= */

.video-entry {
  scroll-snap-align: start;
  flex: 0 0 280px;
  height: 90vh;

  position: relative;
  overflow: hidden;

  background: none;
  border: none;
  box-shadow: none;

  --overlay-pad-x: 1.2rem;
  --overlay-pad-bottom: 1.2rem;

  will-change: opacity, filter;
  transition: opacity 0.25s ease;
}

.video-entry:active {
  opacity: 0.92;
}

/* =========================================================
   Video Layer
========================================================= */

.video-entry video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter: contrast(0.98) saturate(0.98);
  transition: filter 0.45s ease;
}

.video-entry:hover video {
  filter: hue-rotate(65deg) saturate(1.35) contrast(1.1) brightness(1.02);
}

.video-entry:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--heat-hot) 55%, transparent),
    inset 0 -18px 28px -18px
      color-mix(in srgb, var(--heat-warm) 65%, transparent),
    inset 0 0 36px color-mix(in srgb, var(--heat-after) 30%, transparent);
}

/* Near-rectangular drift profiles */
.drift-a {
  clip-path: polygon(0% 0%, 100% 1%, 99% 100%, 1% 99%);
}

.drift-b {
  clip-path: polygon(1% 0%, 100% 0%, 98% 100%, 0% 99%);
}

.drift-c {
  clip-path: polygon(0% 1%, 99% 0%, 100% 99%, 1% 100%);
}

.drift-d {
  clip-path: polygon(1% 1%, 99% 0%, 100% 98%, 0% 99%);
}

/* =========================================================
   Overlay Content — Unboxed / Annotative
========================================================= */

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 1.4rem var(--overlay-pad-x) var(--overlay-pad-bottom);

  background: rgba(10, 18, 35, 0.52);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);

  color: #e8edf7;
  text-shadow: none;

  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s ease;
}

.video-entry:hover .video-overlay {
  transform: translateY(0%);
  opacity: 1;
}

.video-overlay h3 {
  margin: 0 0 0.3rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.video-overlay p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
  max-width: 22ch;
}

/* =========================================================
   README Tile — Always Visible Annotation
========================================================= */

.video-entry:first-child .video-overlay {
  transform: translateY(0%) !important;
  opacity: 1 !important;
  pointer-events: auto;
  transition: none;
}

/* =========================================================
   Tile Shapes — Editorially Matched
========================================================= */

/* ── BIO / READ.ME ──────────────────────────────────────
   Wide document spread: open page, a spread you lean into.
   Slight tilt on all four corners — feels like a laid-out folio.
*/
.tile--doc {
  clip-path: polygon(0.5% 0%, 99.5% 1.2%, 99% 100%, 1% 98.8%);
}

/* ── AIR QUALITIES ──────────────────────────────────────
   Circle: cyclical, atmospheric, air moves in loops.
*/
.tile--circle {
  border-radius: 9999px !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  flex: 0 0 340px;
  --overlay-pad-x: 2.4rem;
  --overlay-pad-bottom: 2.2rem;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow: hidden;
}

/* ── UNEARTHING AIR ─────────────────────────────────────
   Wide trapezoid: suggests a geological cross-section,
   a dig, something horizontal and layered. Bottom edge
   angles inward slightly — like strata tapering.
*/
.tile--trapezoid {
  clip-path: polygon(0% 0%, 100% 0%, 97% 100%, 3% 100%);
}

/* ── INVESTIGATIONS ─────────────────────────────────────
   Sharp asymmetric polygon: a redacted document corner,
   something cut, scrutinized, slightly wrong on purpose.
   More pronounced skew than the drift series.
*/
.tile--redacted {
  clip-path: polygon(0% 0%, 96% 3%, 100% 97%, 4% 100%);
}

/* ── BIOTECH ────────────────────────────────────────────
   Pill / stadium: cellular, organic, capsule form.
*/
.tile--pill {
  border-radius: 9999px !important;
  flex: 0 0 260px;
  height: 420px; /* constrained so the capsule arcs are visible */
  align-self: center;
  --overlay-pad-x: 2rem;
  --overlay-pad-bottom: 2rem;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow: hidden;
}

/* ── TEACHING & TALKING ─────────────────────────────────
   Generous rounded corners: approachable, conversational.
*/
.tile--rounded {
  border-radius: 28px !important;
  --overlay-pad-x: 1.4rem;
  --overlay-pad-bottom: 1.4rem;
}

/* ── EMBEDDINGS ─────────────────────────────────────────
   Tall narrow column with subtle drift-b skew:
   columnar, vectorial, precise. Slightly not-orthogonal
   hints at high-dimensional space.
   Narrower than default — emphasizes the column feel.
*/
.tile--vector {
  flex: 0 0 220px;
}

/* =========================================================
   Wide tile base (bio + unearthing air)
========================================================= */

.video-entry--wide {
  flex: 0 0 420px;
}

.video-entry--wide video {
  object-position: 50% 50%;
}

/* =========================================================
   Disabled state
========================================================= */

.video-entry.is-disabled {
  cursor: default;
}

.video-entry.is-disabled:hover video {
  filter: none;
}

/* =========================================================
   Scroll Cue
========================================================= */

.scroll-cue {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  letter-spacing: 0.5px;

  background: rgba(0, 0, 0, 0.35);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;

  animation: fadeHint 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 100;
}

@keyframes fadeHint {
  0%,
  100% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}

/* =========================================================
   Top Navigation
========================================================= */

.top-nav {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;

  display: flex;
  gap: 1.25rem;
  z-index: 50;

  font-family: "IBM Plex Sans", "Nunito", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.4px;

  background: transparent !important;
}

.top-nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.top-nav a:hover {
  color: #fff;
  opacity: 1;
}

/* =========================================================
   Heat-map scrollbar
========================================================= */

.modules-gallery::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to right,
    var(--heat-cool),
    var(--heat-warm),
    var(--heat-hot),
    var(--heat-veryhot),
    var(--heat-after)
  );
  border-radius: 6px;
}

.modules-gallery {
  scrollbar-color: var(--special-sauce) transparent;
}

/* =========================================================
   Accessibility
========================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}