/* preview-nav — mega menu + smooth mobile drawer voor niche-previews
   Geïnspireerd op ReactBits Flowing Menu / drawer-patronen, vanilla CSS+JS. */

.pn-root {
  --pn-accent: #006576;
  --pn-accent-soft: #7ed3e7;
  --pn-bg: rgba(255, 255, 255, 0.88);
  --pn-surface: #f8f9ff;
  --pn-text: #0b1c30;
  --pn-muted: #4a5862;
  --pn-border: rgba(190, 200, 204, 0.55);
  --pn-radius: 12px;
  --pn-font-display: system-ui, sans-serif;
  --pn-font-body: system-ui, sans-serif;
  --pn-bar-h: 80px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  font-family: var(--pn-font-body);
}

.pn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 100%;
  margin-inline: auto;
  padding: 0 36px;
  height: var(--pn-bar-h);
  background: var(--pn-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--pn-border);
}

.pn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pn-accent);
  font-family: var(--pn-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  flex-shrink: 0;
}

.pn-brand-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.pn-brand-logo {
  height: 38px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.pn-drawer-head .pn-brand-logo {
  height: 34px;
  width: auto;
  max-width: 180px;
}

.pn-desktop {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

@media (min-width: 1024px) {
  .pn-desktop { display: flex; }
  .pn-burger { display: none !important; }
  .pn-drawer,
  .pn-backdrop { display: none !important; }
}

.pn-link,
.pn-trigger {
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 10px 14px;
  font: 600 14px/1 var(--pn-font-body);
  letter-spacing: 0.02em;
  color: var(--pn-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}

.pn-link:hover,
.pn-trigger:hover,
.pn-trigger[aria-expanded="true"],
.pn-link.is-active {
  color: var(--pn-accent);
}

.pn-trigger[aria-expanded="true"]::after,
.pn-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 99px;
  background: var(--pn-accent);
}

.pn-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pn-cta {
  display: none;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--pn-accent);
  color: #fff;
  font: 600 13px/1 var(--pn-font-body);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
}

.pn-cta:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--pn-accent) 35%, transparent); }

@media (min-width: 768px) {
  .pn-cta { display: inline-flex; }
}

.pn-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.pn-burger span {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--pn-accent);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}

.pn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- mega panel (desktop) ---- */
.pn-mega-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-mega-wrap.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.pn-mega {
  border-top: 1px solid var(--pn-border);
  background: var(--pn-surface);
  box-shadow: 0 28px 48px rgba(15, 40, 55, 0.12);
}

.pn-mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  max-width: 1280px;
  margin-inline: auto;
  padding: 28px 32px 32px;
}

.pn-mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 28px;
}

.pn-mega-col h4 {
  margin: 0 0 10px;
  font: 700 11px/1 var(--pn-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pn-muted) 75%, transparent);
}

.pn-mega-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pn-text);
  font: 500 14px/1.3 var(--pn-font-body);
  transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-mega-col a:hover {
  background: color-mix(in srgb, var(--pn-accent) 8%, transparent);
  color: var(--pn-accent);
  transform: translateX(4px);
}

.pn-mega-col .pn-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pn-accent) 12%, transparent);
  color: var(--pn-accent);
  font-size: 18px;
}

.pn-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: 20px;
  border-radius: calc(var(--pn-radius) + 4px);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.pn-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s ease;
}

.pn-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%);
}

.pn-promo:hover img { transform: scale(1.05); }

.pn-promo-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font: 700 10px/1 var(--pn-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pn-promo h5 {
  margin: 10px 0 6px;
  font-family: var(--pn-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.pn-promo p {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}

.pn-promo-cta {
  margin-top: 14px;
  font: 600 13px/1 var(--pn-font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- mobile drawer ---- */
.pn-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 25, 35, 0.52);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  backdrop-filter: blur(2px);
}

.pn-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.pn-drawer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 91;
  width: min(88vw, 360px);
  height: 100%;
  background: var(--pn-surface);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(-105%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pn-drawer.is-open { transform: none; }

.pn-drawer-hero {
  position: relative;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
}

.pn-drawer-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-drawer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--pn-surface), transparent 60%);
}

.pn-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  margin-top: -36px;
  position: relative;
  z-index: 1;
}

.pn-drawer-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  /* Knop is altijd wit; het kruisje moet dus altijd donker zijn, ook bij
     donkere previews (waar --pn-text licht is → anders wit-op-wit). */
  color: #16202a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.pn-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
  /* Sommige previews hebben een generieke `nav { display:flex }`-regel die
     hierin lekt en de drawer-items horizontaal zet; expliciet block houdt ze
     verticaal. De flowing-variant zet zelf weer display:flex via .pn-flow-list
     (staat later in dit bestand, dus die wint). */
  display: block;
}

.pn-drawer-item {
  border-bottom: 1px solid var(--pn-border);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-drawer.is-open .pn-drawer-item {
  opacity: 1;
  transform: none;
}

.pn-drawer.is-open .pn-drawer-item:nth-child(1) { transition-delay: 0.05s; }
.pn-drawer.is-open .pn-drawer-item:nth-child(2) { transition-delay: 0.09s; }
.pn-drawer.is-open .pn-drawer-item:nth-child(3) { transition-delay: 0.13s; }
.pn-drawer.is-open .pn-drawer-item:nth-child(4) { transition-delay: 0.17s; }
.pn-drawer.is-open .pn-drawer-item:nth-child(5) { transition-delay: 0.21s; }
.pn-drawer.is-open .pn-drawer-item:nth-child(6) { transition-delay: 0.25s; }

.pn-acc-btn,
.pn-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  background: none;
  font: 600 15px/1.2 var(--pn-font-body);
  color: var(--pn-text);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.pn-acc-btn .pn-chev,
.pn-drawer-link .pn-chev {
  color: var(--pn-accent);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-acc-btn[aria-expanded="true"] .pn-chev { transform: rotate(90deg); }

.pn-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-acc-panel.is-open { grid-template-rows: 1fr; }

.pn-acc-panel > div {
  overflow: hidden;
}

.pn-acc-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 16px;
  margin-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--pn-accent) 25%, transparent);
  text-decoration: none;
  color: var(--pn-muted);
  font: 500 14px/1.3 var(--pn-font-body);
}

.pn-acc-panel a:hover { color: var(--pn-accent); }

.pn-drawer-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--pn-border);
  background: color-mix(in srgb, var(--pn-surface) 92%, var(--pn-accent) 8%);
}

.pn-drawer-foot a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  font: 500 11px/1 var(--pn-font-body);
  color: var(--pn-muted);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .pn-mega-wrap,
  .pn-drawer,
  .pn-backdrop,
  .pn-drawer-item,
  .pn-burger span,
  .pn-mega-col a,
  .pn-acc-panel,
  .pn-promo img,
  .pn-flow-marquee,
  .pn-flow-marquee-inner,
  .pn-gooey-effect::after,
  .pn-card,
  .pn-cine-item { transition: none !important; animation: none !important; }
}

/* ============================================================
   VARIANT: flowing — ReactBits Flowing Menu (vanilla port)
   ============================================================ */
.pn-mega--flowing {
  padding: 0;
  background: var(--pn-flow-bg, var(--pn-text));
}

.pn-flow-list {
  display: flex;
  flex-direction: column;
}

.pn-flow-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  overflow: hidden;
  text-decoration: none;
  color: var(--pn-flow-text, #fff);
  border-top: 1px solid color-mix(in srgb, var(--pn-flow-text, #fff) 12%, transparent);
  font-family: var(--pn-font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.65rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pn-flow-row:first-child { border-top: 0; }

.pn-flow-label {
  position: relative;
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}

.pn-flow-marquee {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  background: var(--pn-flow-marquee-bg, var(--pn-accent));
  color: var(--pn-flow-marquee-text, #fff);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pn-flow-row:hover .pn-flow-marquee,
.pn-flow-row:focus-visible .pn-flow-marquee {
  transform: translateY(0);
}

.pn-flow-row:hover .pn-flow-label,
.pn-flow-row:focus-visible .pn-flow-label {
  opacity: 0;
  transform: scale(0.96);
}

.pn-flow-marquee-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  animation: pn-flow-scroll 18s linear infinite;
  padding-left: 100%;
}

.pn-flow-marquee-inner span {
  font-family: var(--pn-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pn-flow-marquee-inner img {
  width: clamp(80px, 12vw, 140px);
  height: clamp(48px, 7vh, 72px);
  object-fit: cover;
  border-radius: 999px;
  flex-shrink: 0;
}

@keyframes pn-flow-scroll {
  to { transform: translateX(-100%); }
}

/* fullscreen flowing drawer */
.pn-drawer--flowing {
  width: 100%;
  max-width: none;
  background: var(--pn-flow-bg, var(--pn-text));
  color: var(--pn-flow-text, #fff);
}

.pn-drawer--flowing .pn-drawer-head {
  margin-top: 0;
  padding: 22px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--pn-flow-text, #fff) 10%, transparent);
}

.pn-drawer--flowing .pn-brand { color: var(--pn-flow-text, #fff); }
.pn-drawer--flowing .pn-drawer-close {
  background: color-mix(in srgb, var(--pn-flow-text, #fff) 12%, transparent);
  color: var(--pn-flow-text, #fff);
}

.pn-drawer--flowing .pn-drawer-nav { padding: 0; }
.pn-drawer--flowing .pn-drawer-item { border: 0; opacity: 1; transform: none; }
.pn-drawer--flowing .pn-drawer-foot {
  background: color-mix(in srgb, var(--pn-flow-bg, #000) 88%, var(--pn-accent) 12%);
  border-color: color-mix(in srgb, var(--pn-flow-text, #fff) 10%, transparent);
}
.pn-drawer--flowing .pn-drawer-foot a { color: color-mix(in srgb, var(--pn-flow-text, #fff) 70%, transparent); }

/* ============================================================
   VARIANT: gooey — ReactBits Gooey Nav (vanilla port)
   ============================================================ */
.pn-gooey-shell {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
}

@media (min-width: 1024px) {
  .pn-root--gooey .pn-gooey-shell { display: flex; }
  .pn-root--gooey .pn-desktop:not(.pn-gooey-nav) { display: none; }
}

.pn-gooey-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--pn-gooey-bg, var(--pn-surface, #111c25));
}

.pn-gooey-nav a,
.pn-gooey-nav button {
  position: relative;
  z-index: 3;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  font: 600 13px/1 var(--pn-font-body);
  letter-spacing: 0.03em;
  color: var(--pn-gooey-link, rgba(255, 255, 255, 0.82));
  text-decoration: none;
  transition: color 0.25s;
}

.pn-gooey-nav li.is-active a,
.pn-gooey-nav li.is-active button {
  color: transparent;
}

.pn-gooey-effect {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 999px;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-gooey-effect.filter {
  background: var(--pn-gooey-pill, var(--pn-accent, #dfff3f));
  box-shadow: 0 0 14px var(--pn-gooey-pill, var(--pn-accent, #dfff3f));
}

.pn-gooey-effect.text {
  display: flex;
  z-index: 4;
  color: var(--pn-gooey-active-text, #0b1117);
  font: 700 13px/1 var(--pn-font-body);
  letter-spacing: 0.03em;
}

@keyframes pn-gooey-pill {
  to { transform: scale(1); opacity: 1; }
}

@keyframes pn-gooey-text {
  from { opacity: 0.4; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.pn-gooey-particle {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.pn-gooey-particle i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--pn-accent-soft, #fff);
  animation: pn-gooey-burst var(--t, 600ms) ease forwards;
}

@keyframes pn-gooey-burst {
  0% { transform: rotate(0deg) translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(var(--rot)) translate(var(--ex), var(--ey)) scale(var(--sc)); opacity: 0; }
}

/* ============================================================
   VARIANT: cards — visuele mega-kaarten
   ============================================================ */
.pn-mega--cards .pn-mega-inner {
  grid-template-columns: 1fr;
}

.pn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.pn-card {
  position: relative;
  isolation: isolate; /* houdt de img (z-index:-2) + ::after-gradient binnen deze
    kaart — zonder dit escapet een negatieve z-index naar de eerstvolgende
    échte stacking-context (zoals .pn-promo hiernaast al goed doet), en
    verdwijnt de afbeelding achter de hele pagina: witte tekst op wit. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: 18px;
  border-radius: calc(var(--pn-radius) + 2px);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.pn-mega-wrap.is-open .pn-card {
  opacity: 1;
  transform: none;
}

.pn-mega-wrap.is-open .pn-card:nth-child(1) { transition-delay: 0.04s; }
.pn-mega-wrap.is-open .pn-card:nth-child(2) { transition-delay: 0.08s; }
.pn-mega-wrap.is-open .pn-card:nth-child(3) { transition-delay: 0.12s; }
.pn-mega-wrap.is-open .pn-card:nth-child(4) { transition-delay: 0.16s; }
.pn-mega-wrap.is-open .pn-card:nth-child(5) { transition-delay: 0.2s; }
.pn-mega-wrap.is-open .pn-card:nth-child(6) { transition-delay: 0.24s; }

.pn-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.65s ease;
}

.pn-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.08) 60%);
}

.pn-card:hover img { transform: scale(1.06); }

.pn-card-kicker {
  font: 700 10px/1 var(--pn-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.pn-card h5 {
  margin: 8px 0 0;
  font-family: var(--pn-font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.pn-card p {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.88;
}

/* ============================================================
   VARIANT: cinematic — fotograaf fullscreen overlay
   ============================================================ */
.pn-root--cinematic .pn-bar {
  background: linear-gradient(to bottom, rgba(8, 10, 11, 0.92), transparent);
  border-bottom-color: color-mix(in srgb, var(--pn-border) 40%, transparent);
}

.pn-cine-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 7, 8, 0.96);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.pn-cine-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.pn-cine-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: calc(var(--pn-bar-h) + 24px) 32px 32px;
}

.pn-cine-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.pn-cine-item {
  display: block;
  padding: 14px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: color-mix(in srgb, var(--pn-flow-text, #fff) 45%, transparent);
  font-family: var(--pn-font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateX(-24px);
  opacity: 0;
  transition: color 0.25s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.pn-cine-overlay.is-open .pn-cine-item {
  opacity: 1;
  transform: none;
}

.pn-cine-overlay.is-open .pn-cine-item:nth-child(1) { transition-delay: 0.06s; }
.pn-cine-overlay.is-open .pn-cine-item:nth-child(2) { transition-delay: 0.11s; }
.pn-cine-overlay.is-open .pn-cine-item:nth-child(3) { transition-delay: 0.16s; }
.pn-cine-overlay.is-open .pn-cine-item:nth-child(4) { transition-delay: 0.21s; }
.pn-cine-overlay.is-open .pn-cine-item:nth-child(5) { transition-delay: 0.26s; }

.pn-cine-item:hover,
.pn-cine-item.is-active {
  color: var(--pn-flow-text, #fff);
}

.pn-cine-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  align-self: center;
  aspect-ratio: 4/5;
  max-height: min(72vh, 640px);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s ease 0.12s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.pn-cine-overlay.is-open .pn-cine-preview {
  opacity: 1;
  transform: none;
}

.pn-cine-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.pn-cine-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--pn-flow-text, #fff) 20%, transparent);
  border-radius: 999px;
  background: none;
  color: var(--pn-flow-text, #fff);
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .pn-cine-panel { grid-template-columns: 1fr; padding-inline: 20px; overflow-y: auto; }
  .pn-cine-preview { display: none; }
  .pn-cine-item { font-size: clamp(1.8rem, 9vw, 3rem); }
}