/***************
* Filename = fancy-directors-navigation.css
*****************/

.fdn-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.fdn-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                       /* hidden until playing */
  transition: opacity .35s ease;
}

.fdn-video.is-playing {
  opacity: 1;
}

.fdn-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.18);
  transition: background 300ms ease;
}

/* Loading state: darken overlay, hide video */
.fdn-wrap.fdn-is-loading .fdn-video   { opacity: 0; }
.fdn-wrap.fdn-is-loading .fdn-overlay { background: rgba(0,0,0,0.65); }

/* ---- Nav: right-side vertical list, centered vertically ---- */
.fdn-nav-wrap {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: auto;
}

.fdn-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}

/* Default: white */
.fdn-nav-link {
  display: block;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0.95;
  transition: color 180ms ease, opacity 180ms ease;
}

/* Hover: keep white (colour jump handled by is-active) */
.fdn-nav-link:hover {
  opacity: 1;
  color: #ffffff !important;
}

/* CHANGED: active colour updated from #e01818 to #ed443c */
.fdn-nav-link.is-active {
  color: #ed443c !important;
  opacity: 1;
}

.fdn-video,
.fdn-overlay {
    pointer-events: none;
}

.fdn-nav-link {
    display: block;
    cursor: pointer;
}

.fdn-video,
.fdn-overlay {
    pointer-events: none;
}

.fdn-nav-link {
    display:block;
}