@font-face {
  font-family: 'GeigyDuplexLLVIP';
  src: url('../fonts/GeigyDuplexLLVIP.ttf') format('truetype-variations');
  font-weight: 100 900; /* Standard range for variable fonts, adjust if known otherwise */
  font-style: normal; /* Assuming normal style, adjust if it's also variable italic */
}

/* Base */
body {
  margin: 0;
  background: #000;
  font-family: "GeigyDuplexLLVIP", sans-serif;
  color: #fff;
}

/* Overlay Title */
.overlay-title {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 20px;
  text-align: center;
  font-family: "GeigyDuplexLLVIP", sans-serif;
  font-size: clamp(1.875rem, 2.5vw, 2.5rem);
  color: white;
  opacity: 1;
  z-index: 90;
  pointer-events: auto;
  white-space: normal;
  word-break: break-word;
}

/* Text Band */
.text-band {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: none;
  /* opacity: 0; */ /* Moved to .text-band-hidden */
  transition: opacity 0.3s ease;
}

.text-band-hidden {
  opacity: 0;
}

.text-band-content {
  white-space: nowrap;
  font-size: 2.5rem;
  color: #fff;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); Removed */
  animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Show text band after last amino acid tile */
.row.text-row:nth-last-child(1) ~ .text-band {
  opacity: 1;
}

/* Text Band */
.text-band {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  z-index: 50;
  line-height: 1;
  padding: 0;
  /* height: 1em; */ /* Removed for flexible height */
  padding-top: 0.2em; /* Added padding */
  padding-bottom: 0.2em; /* Added padding */
  display: flex;
  align-items: center;
  font-size: clamp(0.7rem, 0.9vw, 0.9rem);
  background: none !important;
  background-color: transparent !important;
}

.text-band.is-red {
  background: none !important;
  background-color: transparent !important;
}

.text-band.is-red .text-band-content,
.text-band.is-red .text-band-content span {
  color: #fff !important;
}

.text-band.is-red .text-band-content,
.text-band.is-red .text-band-content span { /* Ensure span also inherits if needed */
  font-size: clamp(1.2rem, 1.7vw, 2rem); /* Original larger size for .is-red */
  /* color: #fff !important; was already there for .is-red (picked up by .text-band.is-red .text-band-content span) */
}

.text-band.amino-banner-active .text-band-content {
  font-size: clamp(0.875rem, 1.125vw, 1.125rem) !important; /* Previous small size for "ESSENTIAL AMINO ACIDS" */
}

.text-band-content {
  display: inline-block;
  font-size: clamp(0.875rem, 1.125vw, 1.125rem); /* Reverted to original default */
  animation: scrollText 15s linear infinite;
  white-space: nowrap;
  text-transform: uppercase;
  transition: opacity 0.5s ease-out;
  color: #fff;
}

.text-band-content span {
  display: inline-block;
  padding: 0 10px;
  color: white;
  line-height: 1;
  /* height: 1em; */ /* Removed for flexible height */
  font-size: inherit;
  font-weight: 300; /* Fallback, CSS animation will override for 'wght' */
  transition: opacity 0.5s ease-out; /* Removed font-variation-settings transition here to avoid conflict */
}

@keyframes font-weight-animation {
  0%, 100% {
    font-variation-settings: 'wght' 700; /* Bold */
  }
  50% {
    font-variation-settings: 'wght' 100; /* Light */
  }
}

.text-band-content span {
  display: inline-block;
  padding: 0 10px;
  color: white;
  line-height: 1;
  font-size: inherit; /* Inherits from .text-band-content */
  /* font-weight is now controlled by font-variation-settings animation */
  /* transition for font-variation-settings is removed to prefer animation */
  transition: opacity 0.5s ease-out; /* Keep opacity transition if still needed */
  animation: font-weight-animation 4s ease-in-out infinite; /* Added font weight animation */
  /* scrollText animation is on .text-band-content, not duplicated here */
}

@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Scroll Setup */
.scroll-wrapper {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.chapter-rows {
  width: 100vw;
}

/* Zeilen-Layout */
.row {
  display: block;
  width: 100%;
  height: 50dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Video-Zeilen */
.row.video-row {
  height: 150dvh;
  position: relative;
  /* Kein scroll-snap-align, kein scroll-snap-stop */
}

.row.video-row .grid-item {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #000;
}

.row.video-row .grid-item .content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-bottom: 30px; /* Added/Updated for space below caption */
  box-sizing: border-box; /* Ensure padding is included correctly */
}

/* Kachel */
.grid-item {
  position: relative;
  animation: subtle-glow 4s ease-in-out infinite;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #00ff00 20%,
    #0000ff 40%,
    #ff66ff 60%,
    #ff6600 80%,
    #000000 100%
  );
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

/* Inhalt */
.grid-item .content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Eingebettete Videos in .grid-item .content */
.grid-item .content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.grid-item .content video:hover {
  transform: scale(1.1);
}

/* Titel */
.grid-item .content .title {
  font-weight: 300; /* Initial weight, JS will override for targeted titles */
  transition: font-variation-settings 1s ease-out, opacity 0.6s ease-out, transform 0.6s ease-out; /* Updated transition */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 70;
  font-size: clamp(1.875rem, 3.75vw, 3.125rem);
  text-align: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  color: white;
  pointer-events: none;
}

.grid-item .content .full-text {
  /* font-weight: 300; Removed, using font-variation-settings */
  font-variation-settings: 'wght' 400; /* Default, JS will override */
  /* Combined transitions: opacity/visibility from general .grid-item .full-text, and new font-variation-settings to match title animation */
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out, font-variation-settings 1s ease-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 70;
  font-size: clamp(1.875rem, 3.75vw, 3.125rem);
  text-align: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  color: white;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Lauftext */
.grid-item .full-text {
  font-family: "GeigyDuplexLLVIP", sans-serif;
  font-weight: normal;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.1;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  padding-top: 0;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  z-index: 1;
  position: relative;
}

/* Hover & Aktiv-Zustand */
.grid-item:hover,
.grid-item.active {
  background: #fff;
  color: #000;
  animation: none;
  filter: none;
}

/* Spezielle Hover-Regel für Video-Rows */
.row.video-row .grid-item:hover,
.row.video-row .grid-item.active {
  background: #000;
  color: #fff;
  animation: none;
  filter: none;
}

.grid-item:hover .title,
.grid-item.active .title {
  opacity: 0;
  color: black;
}

/* Spezielle Hover-Regel für Video-Row Titel */
.row.video-row .grid-item:hover .title,
.row.video-row .grid-item.active .title {
  color: white;
}

.grid-item:hover .full-text,
.grid-item.active .full-text {
  opacity: 1;
  visibility: visible;
  color: black;
}

/* Spezielle Hover-Regel für Video-Row Full-Text */
.row.video-row .grid-item:hover .full-text,
.row.video-row .grid-item.active .full-text {
  color: white;
}

/* Mobile */
@media (max-width: 899px) {
  .overlay-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.2;
    padding: 0 10px;
  }

  .row {
    display: block;
    height: auto;
    /* scroll-snap-align: none; */
  }

  .grid-item {
    height: 50dvh;
    /* scroll-snap-align: start; */
    /* scroll-snap-stop: always; */
  }

  .grid-item .title {
    font-size: clamp(1.875rem, 3.75vw, 3.125rem);
  }

  .grid-item .full-text {
    font-size: clamp(1.875rem, 3.75vw, 3.125rem);
    line-height: 1.1;
    overflow-y: auto;
  }

  .grid-item:hover .full-text,
  .grid-item.active .full-text,
  .grid-item.touch-hover .full-text {
    opacity: 1;
    visibility: visible;
  }

  /* Touch hover styles */
  .grid-item.touch-hover {
    background: #fff;
    color: #000;
    animation: none;
    filter: none;
  }

  .row.video-row .grid-item.touch-hover {
    background: #000;
    color: #fff;
    animation: none;
    filter: none;
  }

  .grid-item.touch-hover .title {
    opacity: 0;
    color: black;
  }

  .row.video-row .grid-item.touch-hover .title {
    color: white;
  }

  /* .grid-item.touch-hover .full-text is already handled above */

  .row.video-row .grid-item.touch-hover .full-text {
    color: white; /* This is in addition to opacity/visibility */
  }

  .final-row.touch-hover {
    background: #fff;
  }

  .row.text-row .grid-item.touch-hover {
    background: #000 !important;
    color: #fff !important;
    animation: none;
    filter: none;
  }

  .row.text-row .grid-item.touch-hover .title,
  .row.text-row .grid-item.touch-hover .full-text {
    color: #fff !important;
  }

  .row.video-row ~ .row.text-row .grid-item.touch-hover {
    background: #000 !important;
    color: #fff !important;
    animation: none;
    filter: none;
  }

  .row.video-row ~ .row.text-row .grid-item.touch-hover .title,
  .row.video-row ~ .row.text-row .grid-item.touch-hover .full-text {
    color: #fff !important;
  }
  /* End Touch hover styles */

  /* PNG sequence tiles on mobile */
  .row.video-row {
    height: 150dvh; /* Match desktop for scroll length */
  }

  .row.video-row .grid-item {
    height: 100dvh; /* Full viewport height */
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .sequence-img {
    max-height: 100%; /* Fit within parent (100vh) */
    max-width: 100%; /* Fit within parent */
    /* object-fit: contain; is inherited from global scope */
  }

  /* Global .show-more-less button style */
  .sequence-caption .show-more-less {
      display: block; /* Ensure it's on its own line */
      /* text-align: center; /* Inherited from parent .sequence-caption */
      font-weight: bold; /* Initial state, JS will animate 'wght' */
      font-variation-settings: 'wght' 700; /* Ensure consistent bold start */
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 0.5em; /* Space between text and button */
      /* margin-left: 0.5em; /* Removed as it's block and centered now */
      color: #fff; /* Ensure it matches text color */
      font-size: 0.9em; /* Keep slightly smaller or match caption font */
      position: relative;
      z-index: 1;
  }

  /* === START: Mobile Disease Text Pill Styles === */
  .sequence-caption {
      /* Inherits global styles including clamping (display, -webkit-line-clamp, -webkit-box-orient, overflow, text-overflow) */
      /* Inherits global max-height: 4.2em, but can be overridden for mobile if needed. */
      /* Inherits transform: translateY(10px) */

      /* Mobile-specific overrides: */
      border-radius: 25px; /* Consistent with new global value */
      max-height: 4.5em; /* Keep mobile specific max-height if it was more tailored than global 4.2em */
      /* Update transition to match new global speed for opacity/transform */
      transition: opacity 0.5s ease-out,
                  transform 0.5s ease-out,
                  max-height 0.3s ease-out,
                  font-variation-settings 0.2s ease-out;
  }

  .sequence-caption.active {
      /* Inherits display: -webkit-box; opacity (JS controlled); transform: translateY(0); */
      /* No specific overrides needed here if JS handles opacity for clamped state (0.7 or 1 based on button) */
      /* The global .sequence-caption.active already sets display: -webkit-box and transform. */
      /* JS will set opacity to 0.7 if button is present, or 1 if not. */
  }

  .sequence-caption.expanded {
      /* Inherits global .expanded styles (display:block, opacity:1, large max-height) */
      /* Mobile specific border-radius for expanded state if different from collapsed */
      /* For now, assume it keeps the 20px radius from the mobile .sequence-caption rule */
  }

  /* .show-more-less is now global, no mobile specific override needed here unless font-size etc. needs to change for mobile */
  /* === END: Mobile Disease Text Pill Styles === */

  /* Highly specific rule for touch state full-text color */
  html body .scroll-wrapper .chapter-rows .row.video-row ~ .row.text-row:not(.amino-tile) .grid-item.touch-hover .content .full-text {
    color: #fff !important;
  }
}

/* Kleine Abschluss-Kacheln */
.final-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.final-row {
  height: 25dvh;
  background: #000;
}

.final-row:hover {
  background: #fff;
}

/* Eingebettete Bildsequenzen in .grid-item .content */
.sequence-img {
  max-height: 100dvh;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}

.sequence-img:hover {
  filter: none;
}

/* Textkachel für Animation */
.text-row {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Restored original transition */
  transform-origin: top;
  will-change: transform;
  z-index: 10;
  /* Removed transition for squeeze effect */
}

/* Squeeze classes removed
.squeezed {
  transform: scaleY(0);
  transform-origin: top;
}

.squeezed-bottom {
  transform: scaleY(0);
  transform-origin: bottom;
}
*/

.row.text-row .content {
  opacity: 0;
  transform: translateY(20px);
  /* transition for opacity and transform is already handled by .grid-item .content .title and .grid-item .content .full-text for their respective parts,
     and .row.text-row .content.is-visible handles the reveal.
     The .title specific transition for font-variation-settings is in .grid-item .content .title rule.
     If a general transition for the whole .content block is needed for font changes, it could be added here.
     For now, assuming specific title/full-text transitions are enough.
     The original transition: opacity 0.6s ease-out, transform 0.6s ease-out; is fine for the reveal.
  */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.row.text-row .content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.row.text-row .grid-item:hover {
  background: #000 !important;
  color: #fff !important;
  transition-duration: 0s !important; /* Ensure hard cut for background/color */
  animation: none;
  filter: none;
}

.row.text-row .grid-item:hover .title,
.row.text-row .grid-item:hover .full-text {
  color: #fff !important;
  /* For .title: opacity is inherited from .grid-item:hover .title (becomes 0) */
  /* For .full-text: opacity & visibility are inherited from .grid-item:hover .full-text (becomes 1 & visible) */
  transition-duration: 0s !important;
  transition-property: color, opacity, visibility !important; /* Ensure these changes are hard cuts */
}

/* REMOVED the following rule as it was causing titles to stay visible against requirement:
.row.text-row:not(.amino-tile) .grid-item:hover .content .title {
  opacity: 1 !important;
}
*/

.sequence-caption {
    position: absolute;
    bottom: 0px; /* Reverted from 40px */
    left: 0;
    width: 100%;
    max-width: none; /* Remove any max-width constraint */

    /* background-color: rgba(0, 0, 0, 0.25); /* Removed */
    /* backdrop-filter: blur(15px); /* Removed */
    /* -webkit-backdrop-filter: blur(15px); /* Removed */
    color: #fff;
    font-size: clamp(1.2rem, 1.7vw, 2rem);
    font-variation-settings: 'wght' 400;
    padding: 0.75em 0.75em 0.3em; /* Reduced L/R/B padding */
    z-index: 110;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    overflow-wrap: break-word;
    box-sizing: border-box;
    border-radius: 25px; /* Changed from 0, new global value */
    text-transform: none;
    pointer-events: none;

    /* Clamping styles removed to show full text */
    display: block; /* Changed from -webkit-box */
    /* -webkit-line-clamp: 2; */ /* REMOVED */
    /* -webkit-box-orient: vertical; */ /* REMOVED */
    overflow: visible; /* Changed from hidden */
    /* text-overflow: ellipsis; */ /* REMOVED */
    max-height: 500px; /* Changed from 6.5em to allow full text */
    /* Opacity will be set by JS based on whether a "more" button is added or not */
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;

    /* Initial animation state */
    opacity: 0; /* JS will set to 0.7 or 1 based on overflow */
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, /* Changed from 0.3s */
                transform 0.5s ease-out, /* Changed from 0.3s */
                max-height 0.3s ease-out,
                font-variation-settings 0.2s ease-out;
}

.sequence-caption.active {
  /* display: block; Is now -webkit-box by default. JS might set to block if expanded. */
  /* No, .active should make it visible respecting the clamp. .expanded changes display. */
  display: -webkit-box; /* Ensure it's visible and clamped */
  pointer-events: auto;
  opacity: 1; /* JS will fine-tune this to 0.7 if button is added */
  transform: translateY(0);
}

/* .sequence-caption.expanded is now largely redundant as base styles show full text.
   Opacity is handled by .active. Retaining for potential minor specific adjustments if any,
   or remove if completely redundant after JS changes.
   For now, let's clear out the redundant properties.
*/
.sequence-caption.expanded {
    /* display: block; */ /* Now default */
    /* -webkit-line-clamp: unset; */ /* Not needed */
    /* overflow: visible; */ /* Now default */
    /* opacity: 1; */ /* Handled by .active or base style if always active when expanded */
    /* max-height: 500px; */ /* Now default */
    /* This class might be removed entirely if JS no longer adds it or if it has no specific styles. */
}

.row.video-row ~ .row.text-row .grid-item {
  background: #000 !important;
  color: #fff !important;
}

.row.video-row ~ .row.text-row .grid-item:hover {
  background: #000 !important;
  color: #fff !important;
  animation: none;
  filter: none;
  transition: none !important; /* Ensures instant effect */
}

.row.video-row ~ .row.text-row .grid-item:hover .title,
.row.video-row ~ .row.text-row .grid-item:hover .full-text {
  color: #fff !important;
}

.row.video-row ~ .row.text-row:not(.amino-tile) .grid-item .title,
.row.video-row ~ .row.text-row:not(.amino-tile) .grid-item .full-text {
  color: #fff !important;
  font-variation-settings: 'wght' 700 !important; /* Geigy Bold */
}

/* Mobile */
/* The following media query was duplicated. Content has been merged into the first one. */
/* @media (max-width: 899px) {
  .overlay-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.2;
    padding: 0 10px;
  }

  .row {
    display: block;
    height: auto;
    /* scroll-snap-align: none; */
  }

  .grid-item {
    height: 50vh;
    /* scroll-snap-align: start; */
    /* scroll-snap-stop: always; */
  }

  .grid-item .title {
    font-size: clamp(1.875rem, 3.75vw, 3.125rem);
  }

  .grid-item .full-text {
    font-size: clamp(1.875rem, 3.75vw, 3.125rem);
    line-height: 1.1;
    overflow-y: auto;
  }

  .grid-item:hover .full-text,
  .grid-item.active .full-text {
    opacity: 1;
    visibility: visible;
  }

  .sequence-img {
    max-height: 120vh;
    max-width: 120%;
  }
} */

/* Amino Acid Tiles */
.row.text-row.amino-tile {
  height: 50dvh;
  /* Removed transition for squeeze effect */
}

.row.text-row.amino-tile:nth-last-child(4) .grid-item {
  background: linear-gradient(to bottom, #000000 0%, #ff6600 50%, #000000 100%) !important; /* Black-Orange-Black */
}

.row.text-row.amino-tile:nth-last-child(3) .grid-item {
  background: linear-gradient(to bottom, #000000 0%, #0000FF 50%, #000000 100%) !important; /* Black-Blue-Black */
}

.row.text-row.amino-tile:nth-last-child(2) .grid-item {
  background: linear-gradient(to bottom, #000000 0%, #ff66ff 50%, #000000 100%) !important; /* Black-HotPink-Black */
}

.row.text-row.amino-tile:nth-last-child(1) .grid-item {
  background: linear-gradient(to bottom, #000000 0%, #ff6600 50%, #000000 100%) !important; /* Black-Orange-Black */
}

/* Remove all hover effects for amino acid tiles & ensure no glow */
.row.text-row.amino-tile .grid-item { /* Apply to base state of amino tile grid items */
  animation: none !important;
  filter: none !important;
}

.row.text-row.amino-tile .grid-item:hover,
.row.text-row.amino-tile .grid-item:hover .title,
.row.text-row.amino-tile .grid-item:hover .full-text {
  background: inherit !important; /* This makes the new gradients persist */
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important; /* Ensure no transitions on hover */
  /* animation and filter properties removed to stop glow on hover */
}

.row.text-row.amino-tile .grid-item .title,
.row.text-row.amino-tile .grid-item .full-text {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  font-variation-settings: 'wght' 700 !important; /* Geigy Bold */
  /* Font size is inherited from .grid-item .content .title or .grid-item .content .full-text */
}

/* Overlay for Amino Acid Tiles */
.amino-tile .content .overlay {
  /* The overlay itself can have a transition, this is fine. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  background-color: rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(to bottom right, rgba(128,0,128,0.05), rgba(0,255,255,0.05), rgba(64,224,208,0.05));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 80; /* Above .title and .full-text (z-index: 70) */
  box-sizing: border-box; /* Ensure padding is included in 100% width/height */
}

.amino-tile .content .overlay p {
  margin: 5px 0;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  padding: 0 15px; /* Prevent text from touching edges */
  box-sizing: border-box; /* Ensure padding doesn't expand parent */
  font-variation-settings: 'wght' 700 !important; /* Geigy Bold */
}

.amino-tile .content .overlay p:first-child {
  display: none; /* Hide the amino acid names (first paragraph) in the overlay */
}

/* Show overlay on hover */
.row.text-row.amino-tile:hover .overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Highly specific rule for desktop hover state full-text color */
html body .scroll-wrapper .chapter-rows .row.video-row ~ .row.text-row:not(.amino-tile) .grid-item:hover .content .full-text {
  color: #fff !important;
}

/* Final Outro Tile Styles */
.final-outro-tile {
  height: 100dvh; /* Full viewport height */
  width: 100vw;  /* Full viewport width */
  scroll-snap-align: end; /* Snap to this as the new end */
  scroll-snap-stop: always; /* Ensure it's treated as a distinct snap point */
}

.final-outro-tile .grid-item {
  height: 100%; /* Fill the parent .final-outro-tile */
  width: 100%;
  background: linear-gradient(
    to bottom,
    #000000 0%, /* Black */
    #00ff00 20%, /* Green */
    #0000ff 40%, /* Blue */
    #ff66ff 60%, /* Pink/Magenta */
    #ff6600 80%, /* Orange */
    #000000 100% /* Black */
  );
  /* Inherit general .grid-item display flex properties for centering content */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden; /* Prevent content spill */
  animation: none; /* Ensure no inherited subtle-glow */
  filter: none; /* Ensure no inherited filter effects */
}

.final-outro-tile .grid-item:hover {
  background: linear-gradient(
    to bottom,
    #000000 0%, /* Black */
    #00ff00 20%, /* Green */
    #0000ff 40%, /* Blue */
    #ff66ff 60%, /* Pink/Magenta */
    #ff6600 80%, /* Orange */
    #000000 100% /* Black */
  ); /* Maintain background on hover */
  color: #fff; /* Maintain text color on hover */
}


.final-outro-tile .content {
  /* .content by default is already flex centered by .grid-item */
  padding: 20px 0; /* Modified padding */
  box-sizing: border-box;
}

.final-outro-text {
  font-family: "GeigyDuplexLLVIP", sans-serif; /* Match other body text */
  color: #fff; /* White text for contrast against the gradient */
  font-size: clamp(0.875rem, 1.125vw, 1.125rem); /* Matching default text band */
  font-variation-settings: 'wght' 400; /* Regular weight */
  line-height: 1.4;
  max-width: none; /* Modified max-width */
  width: 100%; /* Added width */
  margin: 0 auto; /* Center the text block - kept */
  box-sizing: border-box; /* Added for safety if padding is ever applied here */
}

/* Scroll Arrows */
.scroll-arrow {
  position: fixed;
  font-family: 'GeigyDuplexLLVIP', sans-serif;
  font-variation-settings: 'wght' 700; /* Assuming 700 is Bold */
  font-size: clamp(0.875rem, 1.125vw, 1.125rem); /* Matching text band */
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  background-color: transparent; /* Removed frosted glass, made transparent */
  /* backdrop-filter: blur(10px); */ /* Removed */
  /* -webkit-backdrop-filter: blur(10px); */ /* Removed */
  border-radius: 8px; /* Kept for potential future background or if padding creates a shape */
  z-index: 1001; /* Above text band (1000 or lower) */
  cursor: pointer;
  text-align: center;
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Hidden by default */
  transition: opacity 0.3s ease-in-out; /* For smooth show/hide */
}

#scrollToTopArrow {
  position: fixed;
  top: 20px;
  left: 20px;
  /* transform: translateX(-50%); Removed */
  z-index: 1001;
  /* Ensure padding provides a large clickable area - already set in .scroll-arrow */
  /* font-size and font-family match the text band - already set in .scroll-arrow */
  /* background-color is transparent and backdrop-filter is removed - already set in .scroll-arrow */
}

#scrollToBottomArrow {
  position: fixed;
  top: 20px; /* Changed from bottom */
  right: 20px; /* Added */
  /* left: 50%; Removed */
  /* transform: translateX(-50%); Removed */
  /* bottom positioning removed */
  z-index: 1001;
  /* Ensure padding provides a large clickable area - already set in .scroll-arrow */
  /* font-size and font-family match the text band - already set in .scroll-arrow */
  /* background-color is transparent and backdrop-filter is removed - already set in .scroll-arrow */
}

.scroll-arrow-visible {
  opacity: 1;
  pointer-events: auto;
}

@keyframes subtle-glow {
  0%, 100% {
    filter: brightness(1.0) blur(0px); /* Base state remains sharp */
  }
  50% {
    filter: brightness(1.2); /* Changed: blur removed, only brightness pulsates */
  }
}

/* Final Sarcopenia Statement Styles */
.final-sarcopenia-statement-row {
  height: 50dvh; /* Or another appropriate height */
  scroll-snap-align: end; /* Snap to this as the new end */
}

.final-sarcopenia-statement-row .grid-item {
  background: #000; /* Plain black background */
}

.final-sarcopenia-statement-row .content {
  /* Default .content style is already flex centered. */
  /* remove opacity and transform to allow JS reveal animation */
}

.final-sarcopenia-text {
  font-family: "GeigyDuplexLLVIP", sans-serif;
  color: #fff;
  text-align: center;
  font-size: clamp(1.2rem, 1.7vw, 2rem); /* Matches text band style */
  font-variation-settings: 'wght' 700 !important; /* Geigy Bold */
  text-transform: uppercase; /* Matches text band style */
  padding: 20px; /* Some padding for spacing */
  line-height: 1.3;
  /* No CSS animation, text itself is static */
}

/* Final Statement Tile Styles REMOVED */

/* Show overlay when touch-activated */
.row.text-row.amino-tile.overlay-active .overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}