/*
============================================================
LANGIT & LOVE — MAIN STYLESHEET
============================================================
This file controls custom styling that is not handled directly by
Tailwind utility classes in index.html.

Use this file when you want to change:
- Main fonts, page background, and text colour
- Animated cloud appearance and speed behaviour
- Hero background image and overlays
- Service carousel card sizing and arrow positions
- Gallery and service popup appearance

Helpful CSS units:
- rem = size based on the browser's base font size
- vh  = percentage of the screen height
- vw  = percentage of the screen width
- rgba(..., 0.5) = colour with 50% opacity

IMPORTANT:
Selectors beginning with # refer to an HTML id.
Selectors beginning with . refer to an HTML class.
If you rename one in index.html, update it here as well.
============================================================
*/

/* ==========================================================
   1. GLOBAL PAGE SETTINGS
   Safe to edit: background colour, text colour, and fonts.
========================================================== */
html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #fbfaf7;
      color: #1f2937;
    }

    .serif {
      font-family: 'Playfair Display', serif;
    }


/* ==========================================================
   2. REUSABLE VISUAL HELPERS
   .glass-card creates the transparent navigation background.
   .fade-up creates the entrance animation used in the hero.
========================================================== */

    .glass-card {
      background: rgba(255, 255, 255, .7);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, .65);
      box-shadow: 0 24px 80px rgba(15, 23, 42, .08);
    }

    .fade-up {
      animation: fadeUp .9s ease both;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


/* ==========================================================
   3. ANIMATED CLOUDS
   .cloud-layer is the invisible full-screen area holding clouds.
   .real-cloud draws each cloud using one rounded base and two
   circular pseudo-elements (::before and ::after).

   Safe changes:
   - width / height: base cloud size
   - opacity: transparency
   - animation duration is set inline in index.html
========================================================== */
    .cloud-layer {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    .real-cloud {
      position: absolute;
      width: 220px;
      height: 72px;
      background: rgba(255, 255, 255, .92);
      border-radius: 999px;
      box-shadow:
        0 18px 50px rgba(148, 163, 184, .22),
        inset 0 -10px 20px rgba(203, 213, 225, .22);
      animation: cloudDrift linear infinite;
      opacity: .88;
    }

    .real-cloud::before,
    .real-cloud::after {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, .96);
      border-radius: 50%;
      box-shadow: inset 0 -8px 18px rgba(203, 213, 225, .18);
    }

    .real-cloud::before {
      width: 92px;
      height: 92px;
      left: 36px;
      top: -38px;
    }

    .real-cloud::after {
      width: 118px;
      height: 118px;
      right: 32px;
      top: -58px;
    }

    .real-cloud.small {
      transform: scale(.72);
      opacity: .72;
    }

    .real-cloud.large {
      transform: scale(1.18);
      opacity: .82;
    }

    @keyframes cloudDrift {
      from {
        left: -320px;
      }

      to {
        left: 110vw;
      }
    }



/* ==========================================================
   4. CINEMATIC HERO
   Controls the full-screen opening section.

   To replace the hero background, change:
       url('langit-love-hero-scene.png')

   background-position changes which part stays visible.
   The ::after layer adds sunlight and a darker lower overlay.
========================================================== */
    .cinematic-hero {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      background-image:
        linear-gradient(90deg, rgba(251, 250, 247, .94) 0%, rgba(251, 250, 247, .70) 34%, rgba(251, 250, 247, .20) 65%, rgba(251, 250, 247, .08) 100%),
        url('langit-love-hero-scene.png');
      background-size: cover;
      background-position: center;
    }

    .cinematic-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 72% 42%, rgba(255, 226, 178, .45), transparent 24%),
        linear-gradient(to bottom, rgba(255, 255, 255, .10), rgba(15, 23, 42, .16));
      pointer-events: none;
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 20;
    }

    .hero-glass {
      background: rgba(255, 255, 255, .22);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .36);
      box-shadow: 0 24px 80px rgba(15, 23, 42, .10);
    }

    .hero-photo-stage {
      position: relative;
      isolation: isolate;
      user-select: none;
      touch-action: pan-y;
    }

    .hero-photo-shell {
      position: relative;
      background: rgba(255, 255, 255, .18);
    }

    .hero-slide-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 700ms ease;
      pointer-events: none;
    }

    .hero-slide-image.is-visible {
      opacity: 1;
    }

    /* Change 3rem to make the arrows larger or smaller. */
    /* Change 0.35 to make the arrows more or less visible. */
    /* Remove the opacity line below to keep the arrows permanently visible. */
    /* Hover and keyboard focus reveal the controls. */
    /* Mobile swipe is handled in JavaScript; this CSS only styles the buttons. */
    .hero-slide-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 3rem;
      height: 3rem;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, .65);
      background: rgba(255, 255, 255, .35);
      backdrop-filter: blur(12px);
      display: grid;
      place-items: center;
      color: #0f172a;
      box-shadow: 0 14px 40px rgba(15, 23, 42, .16);
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
      z-index: 5;
    }

    .hero-slide-control:hover,
    .hero-slide-control:focus-visible {
      background: rgba(255, 255, 255, .52);
      transform: translateY(-50%) scale(1.03);
    }

    .hero-photo-stage:hover .hero-slide-control,
    .hero-slide-control:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .hero-slide-control-previous {
      left: 1rem;
    }

    .hero-slide-control-next {
      right: 1rem;
    }

    .hero-slide-control .material-icons {
      font-size: 1.35rem;
    }

    .hero-audio-overlay {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      z-index: 6;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.7rem 0.95rem;
      border-radius: 9999px;
      background: rgba(15, 23, 42, 0.55);
      color: #f8fafc;
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.24);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .hero-audio-overlay .material-icons {
      font-size: 1rem;
    }

/* The hero content sits above its background overlays. */

    @keyframes softFloat {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(26px, -10px, 0);
      }
    }

    @media (max-width: 768px) {
      .cinematic-hero {
        background-position: 62% center;
      }
    }

/* ==========================================================
   5. SERVICE CAROUSEL AND SERVICE POPUP
   .service-card controls each service card's fixed width/height.
   .service-scroll makes the row horizontally scrollable.
   .carousel-button controls the left/right arrow buttons.
   #service-modal controls the dark blurred popup background.
========================================================== */
    #service-modal {
      backdrop-filter: blur(18px);
      background: rgba(15, 23, 42, 0.65);
      z-index: 9999;
    }

    .service-card {
      flex: 0 0 22rem;
      min-height: 22rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
    }

    .service-scroll {
      display: flex;
      gap: 1.25rem;
      overflow-x: auto;
      padding-bottom: 0.75rem;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-padding-left: 1rem;
      scroll-padding-right: 1rem;
    }

    .service-scroll::-webkit-scrollbar {
      display: none;
    }

    .carousel-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 3rem;
      height: 3rem;
      border-radius: 9999px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(148, 163, 184, 0.3);
      display: grid;
      place-items: center;
      color: #0f172a;
      cursor: pointer;
    }

    .carousel-button:hover {
      background: rgba(255,255,255,1);
    }

/* Move these values closer to 0 to bring arrows inward.
   Example: -2rem is closer than -3.5rem. */
    .carousel-button-left {
      left: -3.50rem;
    }

    .carousel-button-right {
      right: -3.50rem;
    }

/* ==========================================================
   6. GALLERY POPUP
   The popup is hidden normally and receives the .flex class from
   script.js when a visitor clicks a gallery image.

   #gallery-modal-image uses object-fit: contain so the full image
   remains visible without cropping or stretching.
========================================================== */
    #gallery-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99998;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      background: rgba(2,6,23,0.75);
    }

    #gallery-modal.flex {
      display: flex;
    }

    #gallery-modal-image {
      display: block;
      margin: 0 auto;
      max-height: 90vh;
      max-width: 95vw;
      width: auto;
      height: auto;
      object-fit: contain;
      background: transparent;
      border-radius: 1.5rem;
    }

    .gallery-modal-inner {
      overflow: visible;
      border-radius: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      max-height: 90vh;
      width: 100%;
      background: transparent;
      padding: 0.5rem;
    }

    #package-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      background: rgba(2, 6, 23, 0.75);
    }

    #package-modal.flex {
      display: flex;
    }

    .package-modal-image {
      min-height: 260px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      text-align: center;
    }

    .package-modal-image span.material-icons {
      font-size: 3.25rem;
      color: #64748b;
    }

    /* ==========================================================
   KIND WORDS / FACEBOOK REVIEWS
   ----------------------------------------------------------
   This section displays customer reviews from Facebook.

   Safe things to change:
   - Background colours
   - Card spacing
   - Shadow strength
   - Border radius
   - Star colour
   - Font sizes

   Main HTML section:
   <section id="reviews">

   The class "reveal-on-scroll" is used by JavaScript to
   create the gentle fade-up animation.
========================================================== */

.reviews-section {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(226, 232, 240, 0.4),
      transparent 25%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(254, 243, 199, 0.35),
      transparent 24%
    );
}

/* Introductory sentence above the review heading */
.review-transition {
  max-width: 700px;
  margin: 0 auto 5rem;
  text-align: center;
  padding: 2.5rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.review-transition p {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.2;
  color: #0f172a;
}

.review-transition span {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: #64748b;
}

/* Main review heading */
.reviews-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Overall rating area */
.review-rating-summary {
  margin-top: 2.5rem;
  text-align: center;
}

.review-stars,
.review-card-stars {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: #c9973f;
}

.review-stars {
  justify-content: center;
}

.review-stars .material-icons {
  font-size: 1.5rem;
}

.review-rating-number {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.review-rating-source {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #64748b;
}

/* Review card layout */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}

/* Individual review card */
.review-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.07);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.review-card:hover {
  transform: translateY(-6px);
  border-color: rgba(203, 213, 225, 1);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.11);
}

/* Decorative cloud in the top-right corner */
.review-cloud {
  position: absolute;
  right: 1.25rem;
  top: 0.9rem;
  font-size: 5.5rem;
  line-height: 1;
  opacity: 0.045;
  pointer-events: none;
}

/* Decorative quotation mark */
.review-quote-mark {
  position: absolute;
  left: 1.35rem;
  top: 0.5rem;
  font-family: "Playfair Display", serif;
  font-size: 7rem;
  line-height: 1;
  color: #0f172a;
  opacity: 0.045;
  pointer-events: none;
}

/* Stars inside each review card */
.review-card-stars {
  position: relative;
  z-index: 1;
}

.review-card-stars .material-icons {
  font-size: 1.15rem;
}

/* Customer review text */
.review-card blockquote {
  position: relative;
  z-index: 1;
  flex: 1;
  margin-top: 1.75rem;
  font-family: "Playfair Display", serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #334155;
}

/* Customer name and service */
.review-customer {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
}

.review-customer strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
}

.review-customer span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #94a3b8;
}

/* Small Facebook verification label */
.facebook-review-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.facebook-review-label .material-icons {
  font-size: 1rem;
}

/* Facebook button */
.reviews-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.reviews-facebook-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9999px;
  background: #0f172a;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.reviews-facebook-button:hover {
  transform: translateY(-2px);
  background: #334155;
}

.reviews-facebook-button .material-icons {
  font-size: 1rem;
}

/* Closing invitation underneath the reviews */
.reviews-closing-line {
  margin-top: 4rem;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #64748b;
}

/* ==========================================================
   REVIEW FADE-UP ANIMATION

   JavaScript adds the class "is-visible" when the element
   appears on screen.
========================================================== */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slight delay so the cards appear one after another */
.reviews-grid .review-card:nth-child(2) {
  transition-delay: 0.12s;
}

.reviews-grid .review-card:nth-child(3) {
  transition-delay: 0.24s;
}

/* Tablet layout */
@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile layout */
@media (max-width: 640px) {
  .reviews-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .review-transition {
    margin-bottom: 4rem;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    min-height: auto;
    padding: 1.75rem;
  }

  .reviews-grid .review-card:nth-child(2),
  .reviews-grid .review-card:nth-child(3) {
    transition-delay: 0s;
  }
}

/* Accessibility:
   Removes movement for visitors who prefer reduced animation */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .review-card,
  .reviews-facebook-button {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   KIND WORDS / FACEBOOK REVIEWS
   ----------------------------------------------------------
   This section displays customer reviews from Facebook.
========================================================== */

.reviews-section {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(226, 232, 240, 0.4),
      transparent 25%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(254, 243, 199, 0.35),
      transparent 24%
    );
}

.review-transition {
  max-width: 700px;
  margin: 0 auto 5rem;
  text-align: center;
  padding: 2.5rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.review-transition p {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.2;
  color: #0f172a;
}

.review-transition span {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: #64748b;
}

.reviews-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.review-rating-summary {
  margin-top: 2.5rem;
  text-align: center;
}

.review-stars,
.review-card-stars {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: #c9973f;
}

.review-stars {
  justify-content: center;
}

.review-stars .material-icons {
  font-size: 1.5rem;
}

.review-rating-number {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.review-rating-source {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #64748b;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.review-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.review-card:hover {
  transform: translateY(-6px);
  border-color: rgba(203, 213, 225, 1);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.11);
}

.review-cloud {
  position: absolute;
  right: 1.25rem;
  top: 0.9rem;
  font-size: 5.5rem;
  line-height: 1;
  opacity: 0.045;
  pointer-events: none;
}

.review-quote-mark {
  position: absolute;
  left: 1.35rem;
  top: 0.5rem;
  font-family: "Playfair Display", serif;
  font-size: 7rem;
  line-height: 1;
  color: #0f172a;
  opacity: 0.045;
  pointer-events: none;
}

.review-card-stars {
  position: relative;
  z-index: 1;
}

.review-card-stars .material-icons {
  font-size: 1.15rem;
}

.review-card blockquote {
  position: relative;
  z-index: 1;
  flex: 1;
  margin-top: 1.75rem;
  font-family: "Playfair Display", serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #334155;
}

.review-customer {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
}

.review-customer strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
}

.review-customer span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #94a3b8;
}

.facebook-review-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.facebook-review-label .material-icons {
  font-size: 1rem;
}

.reviews-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.reviews-facebook-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9999px;
  background: #0f172a;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.3s ease, background 0.3s ease;
}

.reviews-facebook-button:hover {
  transform: translateY(-2px);
  background: #334155;
}

.reviews-facebook-button .material-icons {
  font-size: 1rem;
}

.reviews-closing-line {
  margin-top: 4rem;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #64748b;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reviews-grid .review-card:nth-child(2) {
  transition-delay: 0.12s;
}

.reviews-grid .review-card:nth-child(3) {
  transition-delay: 0.24s;
}

@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .reviews-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .review-transition {
    margin-bottom: 4rem;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    min-height: auto;
    padding: 1.75rem;
  }

  .reviews-grid .review-card:nth-child(2),
  .reviews-grid .review-card:nth-child(3) {
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .review-card,
  .reviews-facebook-button {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   AUDIO GUESTBOOK PREVIEW BUTTONS
========================================================== */

.audio-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 1.05rem;
  border: 1px solid #c084fc;
  border-radius: 9999px;
  background: #a855f7;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.audio-preview-button:hover {
  transform: translateY(-1px);
  background: #9333ea;
  box-shadow: 0 14px 28px rgba(168, 85, 247, 0.24);
}

.audio-preview-button.is-playing {
  background: #7c3aed;
  border-color: #7c3aed;
  color: white;
}

.audio-preview-panel {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.audio-preview-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e2e8f0;
}

.audio-preview-copy {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e2e8f0;
}

@media (max-width: 640px) {
  .audio-preview-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-preview-button {
    transition: none;
  }
}

/* Stops the page behind a popup from scrolling. */
body.modal-open {
  overflow: hidden;
}