/* ─── Outer wrapper — perspective container ──────────────────────────────── */

.glass-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0px);
  width: min(400px, 36vw);
  z-index: 100;
  perspective: 900px;
  pointer-events: none;
}

/* ─── Inner — animation target + JS parallax + 3D container ─────────────── */
/*
   All transform values (translate, rotate, scale, parallax) are set via
   style.transform by the JS loop. CSS handles only opacity and pointer-events.
   No filter is ever set on this element so backdrop-filter on .glass-card-bg
   always renders correctly, even during entry/exit animation.
*/

.glass-card-inner {
  position: relative;
  border-radius: 20px;
  transform-style: preserve-3d;
  will-change: transform;

  opacity: 0;
  pointer-events: none;

  /* transition only active during exit — removed on entry so backdrop-filter
     is never composited at partial opacity, which would cause a blur glitch */
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Visible (resting) ──────────────────────────────────────────────────── */

.glass-card.gc-visible {
  /* All .glass-card elements share the same base z-index (100), so without
     this, paint order falls back to DOM order (fixed by flowedIdx at build
     time) — fine for a forward swap (the later, new card naturally paints
     over the old one) but backward, the old card is later in DOM and sits
     on top of the new one for its whole exit fade. Bumping the active card
     above the base guarantees it always wins regardless of direction. */
  z-index: 101;
}

.glass-card.gc-visible .glass-card-inner {
  opacity: 1;
  pointer-events: all;
  transition: none; /* instant — the 3D entry animation handles the reveal */
}

/* ─── Exit states ─────────────────────────────────────────────────────────── */

.glass-card.gc-exit-left,
.glass-card.gc-exit-right,
.glass-card.gc-exiting {
  z-index: 99;
}

.glass-card.gc-exit-left .glass-card-inner,
.glass-card.gc-exit-right .glass-card-inner,
.glass-card.gc-exiting .glass-card-inner {
  opacity: 0;
  /* inherits the base transition (0.45s) so the exit fades smoothly */
}

/* ─── Title graphic — floats centered over the whole viewport ───────────── */
/*
   Body-level sibling of .glass-card (see GlassCard.js _buildCard), not a
   descendant of .glass-card-inner — that element's transform makes it a
   containing block for position:fixed descendants, which would tie this to
   the card's own position/parallax tilt instead of the true viewport center.
*/

.gc-title-graphic {
  position: fixed;
  top: 25%;
  left: 58%;
  z-index: 150;
  width: min(200px, 15vw);
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 200;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gc-title-graphic.gc-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ─── Glass surface (backdrop-filter layer) ──────────────────────────────── */
/*
   Sits at translateZ(0) — the "floor" of the 3D scene.
   backdrop-filter here forces transform-style:flat for ITS children,
   but the parent (glass-card-inner) is the 3D context — not affected.
*/

.glass-card-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(11.15px);
  -webkit-backdrop-filter: blur(11.15px);
  background: #301b2fd4;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 2px rgb(255 255 255 / 14%) inset, -4px 4px 6px 2px #291a1e7d;
}

/* top-left shimmer */
.glass-card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 55%);
  pointer-events: none;
}

/* ─── Content layer — floats above the glass surface ─────────────────────── */
/*
   translate: 0 0 28px lifts the text 28px toward the viewer in the 3D scene.
   When glass-card-inner is tilted by JS parallax, this layer shifts relative
   to the surface — real layered depth, not just 2D parallax.
*/

.glass-card-content {
  position: relative;
  padding: 36px 36px;
  /* translate: 0 0 38px; */
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

.glass-card-eyebrow {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.gc-type-optional .glass-card-title {
  margin: 0 0 16px;
  color: #FFF;
  font-family: "Open Sans";
  font-size: clamp(1.1rem, 1.4vw, 2.5rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2; /* 120% */
  margin-bottom: 0.4vw;
}

/* "Page Title" type — a recurring section headline (eg. reused across
   several primary/optional panels within the same section), so it reads as
   bolder/branded rather than a normal per-screen title. One weight throughout. */
.glass-card-title--page {
  color: var(--secondary);
  font-weight: 800;
}

/* "Small Title" type — for flowed cards that need a lightweight heading
   rather than the full-size default (eg. a short label above a chart/image). */
.glass-card-title--small {
  font-size: clamp(0.85rem, 1vw, 1.2rem);
  margin-bottom: 8px;
}

.glass-card-body {
  margin: 0;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}

/* Also applied via panel.subtitleStyle === 'subtitle' (GlassCard.js) — reads
   as a proper subhead under the title rather than blending in with plain
   description copy. */
.gc-emphasis {
  font-size: clamp(0.95rem, 1.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

.glass-card-body--after-bullets {
  margin-top: 16px;
}

/* ─── Bullet list ─────────────────────────────────────────────────────────── */

.glass-card-bullets-title {
  margin: 14px 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.glass-card-bullets {
  list-style: none;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.glass-card-bullets li {
  position: relative;
  padding-left: 0px;
  font-size: 13px;
  line-height: 1.6;
}

.glass-card-bullets li::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--secondary);
}

/* Sub-bullets: nest a <ul> inside a bullet string, e.g.
   "Parent item<ul><li>Child item</li></ul>" */
.glass-card-bullets li > ul {
  list-style: none;
  margin: 10px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.glass-card-bullets li > ul > li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.glass-card-bullets li > ul > li::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.glass-card-footnote {
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
}

/* ─── Callout — linked to a card, sits absolute to its right ────────────── */
/*
   Appended as a child of the linked card's .glass-card-inner (see
   GlassCard.js _buildCallout), so it rides along with that card's own
   reveal/exit opacity and 3D parallax transform for free.
*/

.glass-card-callout {
  position: absolute;
  width: clamp(187px, 15vw, 250px);
  z-index: 5;
  opacity: 0;
  /* position offset lives in the standalone `translate` property (not
     `transform`) so the enter/leave keyframes below can animate `transform:
     scale(...)` alone without needing to know which side/edge this instance
     is anchored to. */
  transform: scale(0.5);
}

/* ─── Horizontal placement — which side of the linked card ───────────────── */
.glass-card-callout--right { left: 100%; right: auto; translate: -13% -50%; }
.glass-card-callout--left  { left: auto; right: 100%; translate:  8% -50%; }

/* ─── Vertical placement — which edge/center of the linked card ──────────── */
.glass-card-callout--top    { top: 0%;   bottom: auto; }
.glass-card-callout--center { top: 50%;  bottom: auto; }
.glass-card-callout--bottom { top: 100%; bottom: auto; }

/* ─── One-off position nudges ──────────────────────────────────────────────
   Per-callout override classes for cases where the shared hPos/vPos combos
   above don't land it where it needs to be. Applied via panel.calloutClass
   in the timeline JSON, on top of (not instead of) the hPos/vPos classes —
   keep these to a `margin` nudge so they don't fight the `translate` those
   classes already set. Tune the values live, no build step. */
.glass-card-callout--pd-clearance {
  translate: 55% -74%;
}

.glass-card-callout--safety-established {
  translate: 8% -100%;
}

.glass-card-callout.is-entering {
  animation: glass-card-callout-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.glass-card-callout.is-leaving {
  animation: glass-card-callout-leave 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes glass-card-callout-enter {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glass-card-callout-leave {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* Default shape: plain rounded rectangle, pink fill. */
.glass-card-callout-shape {
  position: relative;
  padding: 20px 14px;
  border-radius: 16px;
  background: var(--secondary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

/* Old rectangle gradient — opt in per-callout via panel.calloutShape =
   "gradient" (see GlassCard.js _buildCallout). Same rect shape as the
   default, just the original purple-to-pink fill instead of solid pink. */
.glass-card-callout-shape--gradient {
  background: linear-gradient(165deg, #e8477e 0%, #b1478d 45%, #6b4f9d 80%);
}

/* Legacy shape — opt in per-callout via panel.calloutShape = "arrow" (see
   GlassCard.js _buildCallout). Restores the old SVG arrow/gradient badge;
   background must be cleared so the pink rect default doesn't show behind it. */
.glass-card-callout-shape--arrow {
  aspect-ratio: 243 / 230;
  padding: 30px 17px 64px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.glass-card-callout-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

.glass-card-callout-number {
  margin: 0 0 8px;
  font-family: "Open Sans";
  font-size: clamp(1.2rem, 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.glass-card-callout-content {
  margin: 0;
  font-family: "Open Sans";
  font-size: clamp(0.78rem, 0.95vw, 3rem);
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

.glass-card-callout-footnote {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: #fff;
}

/* ─── Image card ─────────────────────────────────────────────────────────── */

.glass-card.gc-image-card {
  width: min(500px, 50vw);
}

/* When the text card is paired, shift it left to sit beside the image card */
.glass-card.gc-text-card.gc-paired {
  right: unset;
  left: 10vw;
  width: min(360px, 30vw);
}

.gc-image-card .glass-card-content {
  padding: 28px;
}

.glass-card-image-wrap {
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-card-image-wrap img {
  width: 100%;
  height: 100%;
  max-height: 50vh;
  object-fit: contain;
  /* object-position: left; */
  display: block;
  margin-right: auto;
}

/* One-off width overrides, targeted by filename so they don't affect any
   other panel that happens to share a section/type with these. */
.glass-card-image-wrap img[src*="IIIb_PROT-INURIA-BY-PATIENT-TYPE"],
.glass-card-image-wrap img[src*="VIIb_SAFETY-POST-TRANSPLANT-SUBGROUP"] {
  width: 75%;
}

.glass-card-image-wrap img[src*="VI_PHARMACODYNAMIC-RESULTS-C3-STAINING"] {
  width: 80%;
  margin-left: auto;
}

.glass-card-image-placeholder {
  font-size: 52px;
  opacity: 0.2;
  user-select: none;
}

/* ─── Table ──────────────────────────────────────────────────────────────── */

.gc-table {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 14px;
}

.gc-th {
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  line-height: 1.4;
}

.gc-td {
  padding: 8px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(15, 15, 26, 0.5);
  line-height: 1.5;
}

/* Lists nested inside a table cell (eg. a footnote-style breakdown under a
   headline stat) — same square marker as .glass-card-bullets, with the
   bullet hanging to the left of the text rather than indenting on top of it. */
.gc-td ul {
  list-style: none;
  margin: 6px 0 0 0px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gc-td li {
  position: relative;
}

.gc-td li::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #fff;
}

/* ─── Type: primary — persistent, left side ─────────────────────────────── */

.glass-card.gc-type-primary {
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(360px, 30vw);
}

.glass-card.gc-type-primary.gc-section-VIII {
  width: min(480px, 30vw);
}

.glass-card.gc-type-flowed.gc-section-VIII {
  transform: translateY(-15%);
  width: clamp(320px, 30vw, 820px);
}

.gc-type-primary .glass-card-inner {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Type: flowed — per-scroll-snap, right side ────────────────────────── */

.glass-card.gc-type-flowed {
  left: auto;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(320px, 40vw, 820px);
  
}

/* ─── Type: optional — centered overlay ─────────────────────────────────── */

.glass-card.gc-type-optional {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 72vw, 1200px);
  max-height: 100vh;
  z-index: 120;
}

.gc-type-optional.gc-section-II {
  width: clamp(300px, 50vw, 850px);
}

.gc-type-optional.gc-section-II .glass-card-image-wrap  {
  justify-content: flex-start;
}

.gc-type-optional.gc-section-II .glass-card-image-wrap img {
    width: 90%;
    height: auto;
    max-height: unset;
    object-fit: fill;
    /* object-fit: contain; */
    display: block;
}

.gc-type-optional .glass-card-inner {
  transform: scale(0.94) translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gc-type-optional.gc-visible .glass-card-inner {
  transform: scale(1) translateY(0);
}

/* ─── Backdrop (dims scene when optional is open) ───────────────────────── */

.gc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 115;
  cursor: pointer;
}

.gc-backdrop.gc-visible {
  display: block;
}

/* ─── Optional trigger buttons (inside primary card) ────────────────────── */

.gc-optional-btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

/* Opt-in via panel.optionalButtonsLayout = "row" — sits the trigger buttons
   side by side instead of stacked. */
.gc-optional-btns--row {
  flex-direction: row;
  flex-wrap: wrap;
}

.gc-optional-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.gc-optional-trigger__icon {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gc-optional-trigger__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px dotted var(--secondary);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gc-optional-trigger__circle {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.gc-optional-trigger__label {
  color: #fff;
  font-family: "Open Sans";
  font-size: clamp(0.875rem, 0.75
  vw, 1.375rem);
  font-weight: 600;
  line-height: 1.25;
}

.gc-optional-trigger:hover .gc-optional-trigger__icon::before {
  transform: scale(1.12);
}

/* ─── Patient Profiles link buttons (inside primary card) ───────────────── */

.gc-pp-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.gc-pp-main-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 1.5px solid var(--secondary);
  border-radius: 999px;
  padding: 14px 22px;
  color: #fff;
  font-family: "Open Sans";
  font-size: clamp(0.8125rem, 0.95vw, 1rem);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.gc-pp-main-btn:hover {
  background: rgba(252, 59, 110, 0.15);
}

.gc-pp-main-btn__arrow {
  flex: none;
  font-size: 1.1em;
  color: var(--secondary);
}

.gc-pp-patient-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gc-pp-patient-btn {
  background: var(--secondary);
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  color: #fff;
  font-family: "Open Sans";
  font-size: clamp(0.8125rem, 0.95vw, 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.gc-pp-patient-btn:hover {
  background: #e02d5c;
}

/* ─── Optional close button ─────────────────────────────────────────────── */

.gc-optional-close {
  position: absolute;
  background-color: #e02d5c;
  font-weight: 900;
  top: 15px;
  right: 15px;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  translate: 0 0 0px;
  transition: background 0.2s;
}

.gc-optional-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ─── Progress bar (primary card) ────────────────────────────────────────── */

.gc-progress-wrap {
  margin: 0 28px 24px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  translate: 0 0 38px;
}

.gc-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.65);
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.gc-type-optional .glass-card-callout {
  translate: -140% -50%;
  left: 100%;
  right: unset;
}

.gc-type-optional .glass-card-callout .glass-card-callout-content {
  font-size: clamp(0.78rem, 0.95vw, 3rem);
}

/* ─── Pagination (flowed card) ────────────────────────────────────────────── */

.gc-pager {
  margin-top: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  text-align: right;
}