/* ============================================================
   Maud Fasel — maudsvoice.com
   Custom styles (Tailwind CDN handles utilities)
   ============================================================ */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ── Fade-in scroll animation ────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Logo marquee strip ──────────────────────────────────── */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

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

/* ── Audio player ────────────────────────────────────────── */
audio {
  width: 100%;
  height: 36px;
  outline: none;
}
audio::-webkit-media-controls-panel {
  background-color: #E8E4DE;
}

/* ── YouTube facade aspect ratio ─────────────────────────── */
.yt-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  background: #1C1C1C;
}
.yt-container img,
.yt-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

/* ── Demo filter tabs ────────────────────────────────────── */
.lang-tab {
  cursor: pointer;
  transition: all 0.2s;
}
.lang-tab.active {
  background-color: #1C1C1C;
  color: #FAF8F5;
}

/* ── Text selection colour ───────────────────────────────── */
::selection {
  background-color: #B8963E;
  color: #FAF8F5;
}

/* ── Prevent layout shift on nav height ─────────────────── */
body { padding-top: 0; }