/* ============================================================
   Poppy Records — visual polish layer
   ------------------------------------------------------------
   Pure CSS refinements layered on top of the compiled styles.
   No markup or behaviour changes. Loaded AFTER the main
   stylesheet so these rules win on equal specificity.
   Same vibe (coral + poppy, clean, playful) — just tightened.
   ============================================================ */

:root {
  --poppy: #ff5918;          /* primary brand coral            */
  --poppy-deep: #e8460f;     /* pressed / gradient end         */
  --poppy-soft: #ff7a3d;     /* gradient start                 */
  --ink: #141414;            /* primary text                   */
  --ink-soft: #3c3c3c;       /* body copy                      */
  --card-border: rgba(20, 20, 20, .07);
  --shadow-sm: 0 4px 16px rgba(20, 20, 20, .06);
  --shadow-md: 0 16px 44px rgba(20, 20, 20, .11);
  --shadow-poppy: 0 12px 30px rgba(255, 89, 24, .28);
}

/* ---------- Buttons: one consistent coral system ---------- */
/* The home "Learn More" / "Back to Top" buttons were a muddy
   tan->brown; bring them in line with every other CTA.        */
.magnetic-button {
  background: linear-gradient(135deg, var(--poppy-soft), var(--poppy)) !important;
  box-shadow: var(--shadow-poppy) !important;
  letter-spacing: .01em;
}
.magnetic-button::before {
  background: linear-gradient(135deg, var(--poppy), var(--poppy-deep)) !important;
}
.magnetic-button:hover {
  box-shadow: 0 16px 42px rgba(255, 89, 24, .36) !important;
  transform: translateY(-2px);
}

.submit-btn {
  background: linear-gradient(135deg, var(--poppy-soft), var(--poppy)) !important;
  box-shadow: var(--shadow-poppy);
}
.submit-btn:hover {
  box-shadow: 0 16px 42px rgba(255, 89, 24, .36);
}

/* Connect page social buttons → match the coral CTA language. */
.connect-link {
  background: linear-gradient(135deg, var(--poppy-soft), var(--poppy));
  box-shadow: var(--shadow-poppy);
  letter-spacing: .01em;
}
.connect-link:hover {
  background: linear-gradient(135deg, var(--poppy), var(--poppy-deep));
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(255, 89, 24, .36);
}

/* ---------- Retire leftover template purple ---------- */
.hero-title {
  background: linear-gradient(135deg, var(--poppy-soft), var(--poppy)) !important;
  -webkit-background-clip: text;
  background-clip: text;
}
.feature-box h2 { color: var(--poppy) !important; }
.playlist-card::before {
  background: linear-gradient(135deg, var(--poppy-soft), var(--poppy-deep)) !important;
}
.playlist-card:hover {
  box-shadow: 0 20px 40px rgba(255, 89, 24, .30) !important;
  border-color: rgba(255, 89, 24, .5) !important;
}

/* ---------- Defensive contrast / readability fixes ---------- */
/* feature-box rendered black text on a black panel (invisible). */
.feature-box {
  background: #fffaf6 !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-sm);
}
.feature-box p { color: var(--ink-soft) !important; }

/* Form fields were a translucent orange wash — hard to read. */
.form-group label { color: var(--ink) !important; font-weight: 600; }
.form-group input,
.form-group textarea {
  background: #fff !important;
  border: 1.5px solid rgba(20, 20, 20, .12) !important;
  color: var(--ink);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #9a9a9a; }
.form-group input:focus,
.form-group textarea:focus {
  background: #fff !important;
  border-color: var(--poppy) !important;
  box-shadow: 0 0 0 4px rgba(255, 89, 24, .12);
}

/* ---------- Cards: subtle elevation + poppy accent ---------- */
.about-section {
  background: #fff !important;
  border: 1px solid var(--card-border);
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-section:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
}
.about-section h3 {
  position: relative;
  padding-left: .9rem;
}
.about-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(var(--poppy-soft), var(--poppy));
}

.about-page {
  background: #fffaf6 !important;
  box-shadow: 0 24px 70px rgba(20, 20, 20, .10) !important;
}

/* ---------- Typography rhythm ---------- */
.about-eyebrow,
.header-title { letter-spacing: .16em !important; }
.about-lead,
.about-copy,
.demo-copy { color: var(--ink-soft) !important; }
.about-title,
.gradient-text { letter-spacing: -.015em; }

/* ---------- Nav: a touch more legible / intentional ---------- */
.nav-links a,
.nav-links button {
  font-weight: 600;
  letter-spacing: .01em;
  color: #555;
}
.nav-links a:hover,
.nav-links button:hover,
.nav-links a.active,
.nav-links button.active { color: var(--ink); }


/* ============================================================
   v2 — site-wide refinement (hero/nav, releases, videos,
   inner pages, mobile). Still pure CSS, same vibe.
   ============================================================ */

/* ---------- Nav / hero ---------- */
.navigation { border-bottom: 1px solid rgba(20, 20, 20, .06); }
.logo-img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08)); }
.nav-links { letter-spacing: .01em; }

/* ---------- Latest Releases (dark carousel) ---------- */
.latest-releases { padding: 4.5rem 0 4rem; }
.latest-releases h2 {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.7rem;
  position: relative;
}
.latest-releases h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: .9rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--poppy-soft), var(--poppy));
}
.release-card {
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease;
}
.latestSwiper .swiper-slide-active .release-card,
.release-card:hover {
  box-shadow: 0 18px 50px rgba(255, 89, 24, .28), 0 10px 30px rgba(0, 0, 0, .5);
}
.latest-nav {
  width: 46px;
  height: 46px;
  border-color: rgba(255, 255, 255, .22);
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.latest-nav:hover {
  background: var(--poppy);
  border-color: var(--poppy);
  transform: translateY(-1px);
}

/* ---------- Latest Videos (dark horizontal scroll) ---------- */
.latest-videos-header .header-title {
  color: rgba(255, 255, 255, .68);
  font-weight: 600;
}
.video-frame {
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.video-title { font-weight: 600; letter-spacing: .005em; }
.view-all-link:hover { color: var(--poppy-soft); opacity: 1; }
.carousel-btn:not(:disabled):hover { background: var(--poppy); }
.dot.active { background: var(--poppy); }

/* ---------- Inner page title accents ---------- */
.about-title::after,
.contact-page .about-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 1rem 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--poppy-soft), var(--poppy));
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 768px) {
  .about-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
  .gradient-text { font-size: clamp(1.7rem, 7vw, 2.1rem) !important; }
  .latest-releases h2 { font-size: 1.4rem; }

  /* roomier cards + full-width, thumb-friendly CTAs */
  .about-section { padding: 1.25rem !important; }
  .connect-links-row { flex-direction: column; align-items: stretch; }
  .connect-links-row .connect-link { width: 100%; min-width: 0; }
  .magnetic-button,
  .submit-btn { width: 100%; max-width: 360px; }

  .nav-links { gap: .85rem 1.1rem; }
  .about-title::after { margin-inline: auto; }
}


/* ============================================================
   v3 — bolder, smoother, more "designed" pass.
   Premium CTAs, richer cards, confident type, depth in the dark
   sections, frosted nav, consistent springy micro-interactions.
   ============================================================ */

/* ---------- Premium, unified CTAs ---------- */
.magnetic-button,
.submit-btn,
.connect-link {
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #ff8a4c 0%, var(--poppy) 58%, var(--poppy-deep) 100%) !important;
  box-shadow: 0 10px 26px rgba(255, 89, 24, .30), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  transition: transform .28s cubic-bezier(.34, 1.4, .5, 1), box-shadow .28s ease, filter .28s ease !important;
}
.magnetic-button:hover,
.submit-btn:hover,
.connect-link:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px rgba(255, 89, 24, .42), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
  filter: brightness(1.05);
}
.magnetic-button:active,
.submit-btn:active,
.connect-link:active { transform: translateY(-1px) !important; }
.magnetic-button::before { opacity: 0 !important; }

/* ---------- Cards: softer, deeper, springier ---------- */
.about-section {
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 12px 30px rgba(20, 20, 20, .06) !important;
  transition: transform .3s cubic-bezier(.34, 1.3, .5, 1), box-shadow .3s ease !important;
}
.about-section:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 6px 14px rgba(20, 20, 20, .06), 0 26px 52px rgba(255, 89, 24, .15) !important;
}
.about-page {
  background: linear-gradient(165deg, #fffdfb 0%, #fff4ec 100%) !important;
  box-shadow: 0 30px 80px rgba(20, 20, 20, .10) !important;
}

/* ---------- Typography: more confident hierarchy ---------- */
.about-title {
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.02 !important;
}
.about-eyebrow,
.header-title { font-weight: 700 !important; }
.about-lead { font-size: 1.25rem !important; line-height: 1.7 !important; }
.about-section h3 { font-weight: 700 !important; letter-spacing: -.01em; }
.about-copy,
.demo-copy { color: #38383b !important; }

/* ---------- Dark sections: depth via a soft coral glow ---------- */
.latest-releases {
  background:
    radial-gradient(60% 80% at 50% -10%, rgba(255, 89, 24, .16), transparent 70%),
    #0d0d0f !important;
}
.latest-videos-shell,
.latest-videos-container {
  background:
    radial-gradient(45% 55% at 85% 8%, rgba(255, 89, 24, .12), transparent 70%),
    #0a0a0a !important;
}

/* ---------- Nav: subtle frosted depth ---------- */
.navigation {
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(20, 20, 20, .05), 0 8px 30px rgba(20, 20, 20, .05) !important;
  border-bottom: none;
}

/* ---------- Consistent springy easing on interactive bits ---------- */
a,
button,
.connect-link,
.playlist-card,
.release-card,
.latest-nav,
.carousel-btn { transition-timing-function: cubic-bezier(.34, 1.2, .5, 1); }


/* ============================================================
   v4 — record-label energy.
   Editorial eyebrow tags, poster-bold titles, a vinyl-groove
   motif + coral edge on the dark sections.
   ============================================================ */

/* ---------- Editorial "label tag" eyebrows ---------- */
.about-eyebrow,
.gradient-title,
.header-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-transform: uppercase;
  letter-spacing: .22em !important;
  font-weight: 700 !important;
  color: var(--poppy) !important;
}
.about-eyebrow::before,
.gradient-title::before,
.header-title::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--poppy);
  flex: none;
}

/* ---------- Poster-bold titles ---------- */
.about-title,
.home-title,
.parallax-content h2,
.text-split-half h2 {
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

/* ---------- Latest Releases as a label "drop" ---------- */
.latest-releases {
  background:
    radial-gradient(60% 80% at 50% -10%, rgba(255, 89, 24, .18), transparent 70%),
    repeating-radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .022) 0 1px, transparent 1px 16px),
    #0d0d0f !important;
  border-top: 1px solid rgba(255, 89, 24, .35);
}
.latest-releases h2 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}

/* ---------- Videos section: editorial header + coral edge ---------- */
.latest-videos-shell { border-top: 1px solid rgba(255, 89, 24, .25); }
.latest-videos-header .header-title {
  color: var(--poppy) !important;
  letter-spacing: .2em !important;
}
.video-card-index { color: rgba(255, 89, 24, .85) !important; }

/* ---------- Connect buttons read like platform chips ---------- */
.connect-links-row .connect-link { text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; }