@font-face {
  font-family: "Neue Helvetica";
  src: url("assets/fonts/NeueHelveticaPro55Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Helvetica";
  src: url("assets/fonts/NeueHelveticaPro75Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DOS";
  src: url("assets/fonts/DOS.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Layout (shared) */
  --stack-w: 360px;
  --stack-offset: 28px;
  --stack-gap: 12px;
  --card-radius: 12px;

  /* ===== Card / toast effect ===== */
  --card-blur: 0.6px;
  --card-saturate: 3;

  --card-amber-h: 16;
  --card-amber-s: 84%;
  --card-amber-l: 38%;
  --card-amber-a: 0;
  --card-tint-gradient-a: 0.59;
  --card-tint-gradient-b: 0.51;

  --card-caustic-opacity: 0.16;
  --card-caustic-mix: hard-light;

  --card-highlight-a: 0.53;
  --card-highlight-size: 1px;
  --card-inner-shadow-a: 0.41;

  --card-shadow-y: 9px;
  --card-shadow-blur: 55px;
  --card-shadow-a: 0.62;

  /* (Scene-wide bg glass effect is rendered in WebGL — see bg-webgl.js.) */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family:
    "Neue Helvetica",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  color: #fff;
  overflow: hidden;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.filters {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ---------- Picture-in-picture stream ---------- */
.pip {
  position: fixed;
  top: 28px;
  right: 28px;
  width: 250px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  z-index: 25;
  cursor: grab;
  touch-action: none; /* required for GSAP Draggable on touch devices */
  user-select: none;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid hsla(40, 100%, 88%, 0.12);
  background: #000;
  will-change: transform;
}
.pip:active {
  cursor: grabbing;
}
.pip__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pip__timestamp {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 2px 3px 6px;
  font-family: "DOS", "Fragment Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: hsla(40, 100%, 96%, 0.95);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  font-feature-settings: "tnum" 1; /* tabular nums for stable width */
  line-height: 1;
  height: 15px;
}

/* ---------- Background carousel thumbs ---------- */
.bg-thumbs {
  position: fixed;
  right: 16px;
  bottom: var(--stack-offset);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.bg-thumb {
  appearance: none;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid hsla(40, 100%, 88%, 0.18);
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transform: translateX(0);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.bg-thumb:hover {
  opacity: 1;
  transform: translateX(-4px);
  border-color: hsla(40, 100%, 88%, 0.45);
}
.bg-thumb.is-active {
  opacity: 1;
  border-color: hsl(36, 92%, 70%);
  box-shadow:
    0 0 0 1px hsl(36, 92%, 70%),
    0 6px 18px rgba(0, 0, 0, 0.55);
}
.bg-thumb > span {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* ---------- Card stack ---------- */
.card-stack {
  position: fixed;
  left: var(--stack-offset);
  bottom: var(--stack-offset);
  width: var(--stack-w);
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  z-index: 10;
}

.card,
.badge {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 var(--card-shadow-y) var(--card-shadow-blur)
      rgba(0, 0, 0, var(--card-shadow-a)),
    0 2px 6px rgba(0, 0, 0, 0.35);
  animation: card-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Top-left totem badge. Same layered glass surface as a card, but
   pinned to top-left and sized to the SVG's intrinsic aspect ratio. */
.badge {
  position: fixed;
  top: var(--stack-offset);
  left: var(--stack-offset);
  width: 80px;
  aspect-ratio: 109 / 311;
  z-index: 10;
}

.badge__content {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 10px 8px;
}

.badge__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(40, 10, 0, 0.55));
  pointer-events: none;
}
.card:nth-child(2) {
  animation-delay: 80ms;
}
.card:nth-child(3) {
  animation-delay: 160ms;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/*
 * Refraction layer (z=0).
 * A viewport-sized mirror of the background, positioned so its origin aligns
 * with the real .bg, then warped by feDisplacementMap. The card's
 * overflow:hidden clips it to card bounds — only the displaced patch behind
 * the card is visible.
 */
.card__refraction {
  position: absolute;
  /* Pulled outside the card so the mirror image is positioned in viewport space. */
  left: calc(var(--stack-offset) * -1);
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: url("assets/carousel/slide0.png") center center / cover no-repeat;
  filter: url(#amber-refract);
  will-change: filter;
  pointer-events: none;
}
/* Each card's refraction sits at a different vertical offset within the
   viewport. Computed via JS so we don't have to know the rendered heights. */

/* Glass blur layer (z=1) — softens the displaced backdrop. */
.card__glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
  background: transparent;
  pointer-events: none;
}

/* Amber tint (z=2). */
.card__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      hsla(
          var(--card-amber-h),
          var(--card-amber-s),
          var(--card-amber-l),
          var(--card-tint-gradient-a)
        )
        0%,
      hsla(
          var(--card-amber-h),
          var(--card-amber-s),
          calc(var(--card-amber-l) - 18%),
          var(--card-tint-gradient-b)
        )
        100%
    ),
    hsla(
      var(--card-amber-h),
      var(--card-amber-s),
      var(--card-amber-l),
      var(--card-amber-a)
    );
  pointer-events: none;
}

/*
 * Caustic surface (z=3).
 * The filter is self-generating: feTurbulence creates the heightfield and
 * feSpecularLighting renders bright amber highlights from it. The element's
 * own pixels are ignored — what you see is purely the filter output.
 * Blended `screen` to add bright ripples over the tint.
 */
.card__caustics {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  filter: url(#amber-caustics);
  opacity: var(--card-caustic-opacity);
  mix-blend-mode: var(--card-caustic-mix);
  pointer-events: none;
  /* A 1px transparent background ensures the element has paintable content
     for the filter to operate on in all browsers. */
  background: rgba(0, 0, 0, 0.001);
}

/* Glass rim + inner shadow for depth (z=4). */
.card__highlight {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 var(--card-highlight-size) 0
      hsla(40, 100%, 88%, var(--card-highlight-a)),
    inset var(--card-highlight-size) 0 0
      hsla(40, 100%, 80%, calc(var(--card-highlight-a) * 0.55)),
    inset 0 -1px 0 rgba(60, 20, 0, var(--card-inner-shadow-a)),
    inset 0 0 32px rgba(60, 20, 0, calc(var(--card-inner-shadow-a) * 0.6));
  border: 1px solid hsla(38, 90%, 70%, 0.22);
}

/* ---------- Card content ---------- */
.card__content {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 78px;
}

/* Non-featured cards: meta row (date + READ) above, title block below. */
.card:not(.card--featured) .card__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px 16px;
  min-height: 0;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__meta .card__eyebrow {
  margin-bottom: 0;
}

.card__title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__thumb {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: url("assets/background.png") center/cover no-repeat;
  border: 1px solid hsla(40, 100%, 88%, 0.2);
  box-shadow:
    inset 0 1px 0 hsla(40, 100%, 90%, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.card__body {
  min-width: 0;
}

.card__eyebrow {
  font-family:
    "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsla(40, 100%, 96%, 0.95);
  text-shadow: 0 1px 1px rgba(40, 10, 0, 0.55);
  margin-bottom: 11px;
}

.card__title {
  font-family: "Neue Helvetica", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(40, 100%, 97%);
  text-shadow: 0 1px 1px rgba(40, 10, 0, 0.55);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__subtitle {
  font-family: "Neue Helvetica", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(40, 100%, 97%);
  text-shadow: 0 1px 1px rgba(40, 10, 0, 0.55);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA: top-right "READ ↗" */
.card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Neue Helvetica", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsla(40, 100%, 96%, 0.95);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(40, 10, 0, 0.55);
  padding: 4px 0;
  transition: opacity 150ms ease;
}
.card__cta:hover {
  opacity: 0.75;
}
.card__cta svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}