.episodes-grid .episode-frame,
.episodes-grid .episode-meta {
  transition: opacity 350ms ease;
}

/* Same timing the gallery images use: transition-transform duration-500. */
.episodes-grid [data-poster],
.episodes-grid [data-player] {
  transform-origin: center center;
  transition:
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 500ms ease;
}

/* Pointer devices only — on touch there is no hover to respond to. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 768px) {
  /* The gallery's move: the image zooms inside a fixed, clipped frame, so
           the card itself never changes size. Growing the whole card is what
           made this section shout compared to everything else on the page. */
  .episodes-grid .episode-card.is-active [data-poster],
  .episodes-grid .episode-card.is-active [data-player] {
    transform: scale(1.05);
  }

  /* Once the video is actually playing with controls, sit flat again —
           a cropped frame would eat into the player's control bar. */
  .episodes-grid .episode-card.is-playing [data-player] {
    transform: none;
  }

  /* The rest of the row only steps back — no resizing, so nothing shifts. */
  .episodes-grid.has-active .episode-card:not(.is-active) .episode-frame {
    opacity: 0.72;
  }

  .episodes-grid.has-active .episode-card:not(.is-active) .episode-meta {
    opacity: 0.7;
  }
}

/* Mobile Nav Expand */
.cetro-m-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.cetro-m-root.open {
  visibility: visible;
  pointer-events: auto;
}

.cetro-m-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 20, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cetro-m-root.open .cetro-m-backdrop {
  opacity: 1;
}

.cetro-m-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: #0b1329;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  /* Keep flicks inside the panel from scrolling the page behind it. */
  overscroll-behavior: contain;
}
.cetro-m-root.open .cetro-m-panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .cetro-m-backdrop,
  .cetro-m-panel {
    transition: none;
  }
}

/* Page behind the menu must not scroll while it is open. */
html.cetro-menu-open,
body.cetro-menu-open {
  overflow: hidden;
}

.cetro-m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cetro-m-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.cetro-m-brand svg {
  width: 22px;
  height: 22px;
  color: #00c853;
}

.cetro-m-close {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cetro-m-close:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cetro-m-close:focus-visible {
  outline: 2px solid #00c853;
  outline-offset: 2px;
}

.cetro-m-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 24px;
}

.cetro-m-item + .cetro-m-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cetro-m-link,
.cetro-m-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 12px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.cetro-m-link:hover,
.cetro-m-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cetro-m-link:focus-visible,
.cetro-m-trigger:focus-visible {
  outline: 2px solid #00c853;
  outline-offset: -2px;
}

.cetro-m-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 0.3s ease;
  color: #9ca3af;
}
.cetro-m-item.open .cetro-m-chevron {
  transform: rotate(180deg);
  color: #00c853;
}

/* 0fr -> 1fr animates cleanly without measuring the content height. */
.cetro-m-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cetro-m-item.open .cetro-m-sub {
  grid-template-rows: 1fr;
}
.cetro-m-sub-inner {
  overflow: hidden;
}

.cetro-m-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 24px;
  color: #9ca3af;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  text-decoration: none;
  border-radius: 10px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.cetro-m-sublink::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: #00c853;
  opacity: 0.45;
  flex: 0 0 auto;
}
.cetro-m-sublink:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.cetro-m-sublink:focus-visible {
  outline: 2px solid #00c853;
  outline-offset: -2px;
}

.cetro-m-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cetro-m-langrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cetro-m-langlabel {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-right: auto;
}
.cetro-m-lang {
  min-width: 46px;
  padding: 7px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #9ca3af;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.cetro-m-lang:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.cetro-m-lang[aria-pressed="true"] {
  background: #00c853;
  border-color: #00c853;
  color: #ffffff;
}
.cetro-m-lang:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.cetro-m-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 9999px;
  background: #00c853;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.cetro-m-cta:hover {
  background: #009b40;
}
.cetro-m-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Desktop never needs it — make sure it can't linger if the window grows. */
@media (min-width: 1024px) {
  .cetro-m-root {
    display: none;
  }
}

.hero-slides {
  overflow: hidden;
}
.hero-slide-img {
  transition: opacity 1000ms ease;
  will-change: opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-slide-img.is-active {
    animation: heroKenBurns 7000ms ease-out forwards;
  }
}
@keyframes heroKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

/* Pagination dots */
.hero-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    width 0.35s ease,
    background-color 0.35s ease;
}
.hero-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}
.hero-dot.is-active {
  width: 26px;
  background: #00c853;
}
.hero-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Prev / Next arrows (matched to the navbar's circular icon buttons) */
.hero-arrows {
  position: absolute;
  bottom: 1.75rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  gap: 12px;
}
@media (min-width: 768px) {
  .hero-arrows {
    right: 2rem;
  }
}
@media (min-width: 1024px) {
  .hero-arrows {
    right: 3rem;
  }
}
.hero-arrow {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
.hero-arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.hero-arrow svg {
  width: 20px;
  height: 20px;
}

.cetro-has-dropdown {
  position: relative;
}

.cetro-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 214px;
  background: rgba(11, 19, 41, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
  z-index: 60;
}
/* invisible bridge so moving the cursor from the trigger to the panel keeps it open */
.cetro-dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.cetro-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cetro-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #e5e7eb;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}
.cetro-dropdown-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #00c853;
  flex: 0 0 auto;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.cetro-dropdown-item:hover,
.cetro-dropdown-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding-left: 18px;
  outline: none;
}
.cetro-dropdown-item:hover::before,
.cetro-dropdown-item:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* rotate the existing chevron when its menu is open */
.cetro-arrow {
  transition: transform 0.25s ease;
}
.cetro-arrow.cetro-arrow-open {
  transform: rotate(180deg);
}

/* --- Language switcher (reuses the dropdown panel above) --- */
.cetro-lang {
  position: relative;
}

/* The trigger sits at the right edge of the navbar, so the panel
         hangs from its right side instead of overflowing the viewport. */
.cetro-dropdown-end {
  left: auto;
  right: 0;
  min-width: 190px;
}

/* The panel items are <a> by default; these are <button>. */
button.cetro-dropdown-item {
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Keep the dot + name grouped at the left and push the code to the right,
         without letting space-between spread the three children apart. */
.cetro-lang-item > span:first-of-type {
  margin-right: auto;
}
.cetro-lang-code {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease;
}
.cetro-lang-item:hover .cetro-lang-code,
.cetro-lang-item:focus-visible .cetro-lang-code {
  color: rgba(255, 255, 255, 0.8);
}

/* Current language reads as selected even without hover.
         Kept after the hover rule so the green code survives hovering. */
.cetro-lang-item[aria-checked="true"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.cetro-lang-item[aria-checked="true"] .cetro-lang-code {
  color: #00c853;
}
.cetro-lang-item[aria-checked="true"]::before {
  opacity: 1;
  transform: scale(1);
}

.cetro-header.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #0b1329;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}

/* Slides in from just above the viewport.
         Animates `top`, never `transform`: the hero intro tween reads the
         header's computed transform to decide where to land, so a transform
         animation running at the same time gets sampled mid-flight and written
         back as an inline offset that hides the header for good.
         Also no fill-mode — if the animation never runs, `top: 0` above still
         applies, rather than the header freezing off-screen.
         `is-dropping` is added only for scroll-driven sticks, so a reload
         part-way down the page shows the header immediately. */
@media (prefers-reduced-motion: no-preference) {
  .cetro-header.is-stuck.is-dropping {
    animation: cetroHeaderDrop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@keyframes cetroHeaderDrop {
  from {
    top: calc(-1 * var(--cetro-header-h, 96px));
  }
}

/* --- Address clipped to a 12-character window, marquee on hover --- */
.cetro-marquee {
  display: inline-block;
  width: 12ch;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

/* The full string stays in the DOM — only the view is clipped — so screen
   readers and copy/paste still get the whole address. */
.cetro-marquee > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Hover lifts the width cap so the text can slide through the same window. */
.cetro-marquee-host:hover .cetro-marquee > span,
.cetro-marquee:hover > span {
  width: max-content;
  max-width: none;
  text-overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
  .cetro-marquee-host:hover .cetro-marquee > span,
  .cetro-marquee:hover > span {
    animation: cetroMarquee 5s ease-in-out infinite alternate;
  }
}

@keyframes cetroMarquee {
  0%,
  12% {
    transform: translateX(0);
  }
  /* 100% is the text's own width, so this lands its end exactly at the right
     edge. min() keeps a string shorter than the window from sliding right. */
  88%,
  100% {
    transform: translateX(min(0px, calc(12ch - 100%)));
  }
}