@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #0a0a0c;
  --surface: #131317;
  --surface-2: #1b1b21;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f4f6;
  --muted: #9a9aa6;
  --kwara: #ff7a1a;
  --dana: #7c5cff;
  --accent: #e8c26b;
  --radius: 18px;
  --nav-h: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 40vw at 10% -10%, rgba(255,122,26,.14), transparent 60%),
    radial-gradient(60vw 40vw at 100% 0%, rgba(124,92,255,.14), transparent 60%);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, .brand { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }

/* ---------- Top header / desktop nav ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 5vw, 56px);
  background: rgba(10,10,12,.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
.brand-mark {
  position: relative; overflow: hidden;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--kwara), var(--dana));
  display: grid; place-items: center; font-size: .85rem; color: #fff;
}
.brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.nav { display: flex; gap: 6px; }
.nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 8px; border-radius: 999px;
  color: var(--muted); font-weight: 500; font-size: .92rem;
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.active { color: #0a0a0c; background: var(--text); }
.nav svg { width: 18px; height: 18px; margin-left: 6px; }
.nav .nav-av { width: 28px; height: 28px; }

/* ---------- Layout ---------- */
main {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 5vw, 32px) 64px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); font-weight: 600; margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.title { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; font-weight: 700; }
.title .grad {
  background: linear-gradient(90deg, var(--kwara), var(--accent), var(--dana));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { color: var(--muted); max-width: 560px; margin-top: 16px; font-size: 1.05rem; }

/* ---------- Home ---------- */
.hero { text-align: center; }
.hero .lead { margin-inline: auto; }
.video-frame {
  margin: 40px auto 0; max-width: 900px;
  padding: 10px; border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(135deg, rgba(255,122,26,.5), rgba(124,92,255,.5));
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.video-frame .ratio {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Home video: the player is made taller than the box, so YouTube letterboxes the video and puts its
   top bar (title, channel, account) and bottom bar (copy link, logo, Watch on YouTube) in the extra
   space, which the box crops off. The video itself stays fully visible. */
.video-frame iframe.yt-crop { --crop: 72px; top: calc(var(--crop) * -1); height: calc(100% + var(--crop) * 2); }
/* Full View portrait: YouTube uses bigger bars, and there's plenty of black space to crop into */
@media (orientation: portrait) {
  .video-frame .ratio:fullscreen iframe.yt-crop, .video-frame .ratio:-webkit-full-screen iframe.yt-crop { --crop: 140px; }
}

/* Full View: the video box (YouTube player + our Minimize button) goes fullscreen */
.video-frame .ratio:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.video-frame .ratio:-webkit-full-screen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.vc-min {
  display: none; position: absolute; z-index: 3; top: calc(20px + env(safe-area-inset-top)); left: 50%;
  align-items: center; gap: 10px; padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font: 600 1.05rem 'Inter', sans-serif;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 30px -8px rgba(0,0,0,.8);
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.vc-min svg { width: 26px; height: 26px; }
.video-frame .ratio:fullscreen .vc-min, .video-frame .ratio:-webkit-full-screen .vc-min { display: inline-flex; }
.vc-min.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Full View button under the home video (phones only) */
.btn-full {
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(90deg, var(--kwara), var(--dana)); color: #fff;
  font: 600 .95rem 'Inter', sans-serif;
}
.btn-full svg { width: 18px; height: 18px; }

.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
.duo a {
  padding: 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  transition: transform .2s, border-color .2s;
}
.duo a:hover { transform: translateY(-3px); }
.duo a.k:hover { border-color: var(--kwara); }
.duo a.d:hover { border-color: var(--dana); }
.duo h3 { font-size: 1.3rem; }
.duo span { color: var(--muted); font-size: .88rem; }
.arrow { font-size: 1.4rem; }

/* ---------- Artist pages ---------- */
.artist { --c: var(--kwara); }
.artist.dana { --c: var(--dana); }

.artist-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.avatar {
  position: relative; overflow: hidden;
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c), #111);
  display: grid; place-items: center;
  font-family: 'Space Grotesk'; font-size: 2rem; font-weight: 700;
  box-shadow: 0 0 0 1px var(--line), 0 20px 50px -15px var(--c);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.artist-id { display: flex; align-items: center; gap: 20px; }
.artist-id .title { font-size: clamp(2rem, 5vw, 3.2rem); }
.verified { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.verified svg { width: 16px; height: 16px; color: var(--c); }

/* segmented toggle */
.toggle {
  position: relative; display: inline-grid; grid-template-columns: repeat(var(--n, 2), 1fr);
  padding: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}
.toggle button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 8px 20px; font: 600 .85rem 'Inter', sans-serif;
  color: var(--muted); transition: color .25s;
}
.toggle button.on { color: #fff; }
.toggle .pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n, 2)); border-radius: 999px; background: var(--c);
  transform: translateX(calc(100% * var(--i, 0)));
  transition: transform .3s cubic-bezier(.6,.1,.2,1);
}

.panel { display: none; margin-top: 32px; animation: fade .35s ease; }
.panel.show { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tracks { list-style: none; display: grid; gap: 10px; }
.track {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px;
  padding: 12px 16px 12px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  transition: background .2s, border-color .2s;
}
.track:hover { background: var(--surface-2); }
.track.playing { border-color: var(--c); }
.play {
  position: relative; overflow: hidden;
  width: 48px; height: 48px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--surface-2) center / cover no-repeat; color: #fff;
  display: grid; place-items: center;
}
.play::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); transition: background .2s; }
.track.playing .play::before, .play:hover::before { background: color-mix(in srgb, var(--c) 75%, transparent); }
.play svg { position: relative; width: 18px; height: 18px; }
.track > div { min-width: 0; } /* lets long names truncate inside the grid */
.track h4, .track p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track h4 { font-weight: 600; font-size: .98rem; }
.track p { color: var(--muted); font-size: .82rem; }

/* seekable progress bar: 10px track, larger invisible hit area, knob on hover/drag */
.progress {
  position: relative; height: 10px; margin-top: 10px; border-radius: 10px;
  background: rgba(255,255,255,.12);
  pointer-events: none; /* inactive songs: bar ignores touches, so scrolling over it is safe */
}
.track.playing .progress { pointer-events: auto; cursor: pointer; touch-action: pan-y; }
.track.playing .progress::before { content: ''; position: absolute; inset: -9px 0; } /* easier to grab */
.progress i {
  position: relative; display: block; height: 100%; width: 0; max-width: 100%;
  border-radius: inherit; background: var(--c);
}
.progress i::after {
  content: ''; position: absolute; right: -9px; top: 50%;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent);
  transform: translateY(-50%) scale(0); transition: transform .15s;
}
.track.playing .progress i::after { transform: translateY(-50%) scale(1); }
.progress:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.time { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* video grid */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.video-card { padding: 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.video-card .ratio { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card h4 { margin: 12px 6px 0; font-weight: 600; font-size: .98rem; }
.video-card p { margin: 0 6px 4px; color: var(--muted); font-size: .82rem; }

/* hidden YouTube player used for audio */
.yt-hidden { position: fixed; left: -9999px; top: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; }

/* ---------- Discover ---------- */
.discover { display: grid; place-items: center; min-height: 60vh; }
.maker-card {
  position: relative; width: min(420px, 100%);
  padding: 36px 32px; border-radius: 24px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); text-align: center;
}
.maker-card::before {
  content: ''; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--a, 0deg), var(--kwara), var(--accent), var(--dana), var(--kwara));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.maker-card > * { position: relative; }
.maker-card .badge {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 20px;
  background: linear-gradient(135deg, var(--kwara), var(--dana));
  display: grid; place-items: center; font: 700 1.6rem 'Space Grotesk';
}
.maker-card small { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }
.maker-card h2 { font-size: 2rem; margin: 6px 0 10px; }
.maker-card p { color: var(--muted); font-size: .95rem; }

/* ---------- Vibe (discover.html) ---------- */
.artist.vibe { --c: var(--accent); }
.vibe .avatar { background: linear-gradient(135deg, var(--kwara), var(--dana)); box-shadow: 0 0 0 1px var(--line), 0 20px 50px -15px var(--dana); }
.vibe .avatar svg { width: 58%; height: 58%; color: #fff; }
.vibe .eyebrow { margin-bottom: 4px; }
.vibe .eyebrow::before { display: none; } /* no dash before "Vibetunes" */
.vibe .toggle button.on { color: #0a0a0c; }
/* Custom Videos: scrolling "Coming Soon" marquee (two identical halves → seamless loop) */
.marquee {
  overflow: hidden; padding: 28px 0; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.marquee-fade {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 18s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap;
  font: 700 clamp(2rem, 6vw, 3.6rem) 'Space Grotesk', sans-serif; letter-spacing: -0.02em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--kwara), var(--accent), var(--dana));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marquee span::after { content: '✦'; color: var(--accent); -webkit-text-fill-color: var(--accent); font-size: .5em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation-duration: 60s; } }

footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 16px 40px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--text); color: #0a0a0c; font-weight: 500; font-size: .88rem;
  padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: .3s; z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Floating bottom nav (tablet & mobile) ---------- */
.bottom-nav {
  display: flex; justify-content: space-around; align-items: stretch; gap: 4px;
  position: fixed; z-index: 90;
  left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100% - 28px));
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: var(--nav-h);
  padding: 8px;
  background: rgba(22,22,27,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.8);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 16px; color: var(--muted); font-size: .82rem; font-weight: 600;
  transition: background .2s, color .2s;
}
.bottom-nav a:hover { color: var(--text); }
.bottom-nav a.active { background: var(--surface-2); color: var(--text); }
.bottom-nav a.active svg { color: var(--accent); }
.bottom-nav a.active .nav-av { box-shadow: 0 0 0 2px var(--accent); }
.bottom-nav svg { width: 30px; height: 30px; }
.bottom-nav .nav-av { width: 36px; height: 36px; font-size: .9rem; }
body { padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
.header .nav { display: none; }
.header { justify-content: center; }
.toast { bottom: calc(var(--nav-h) + 36px + env(safe-area-inset-bottom)); }

/* PC: top-right nav, no bottom bar */
@media (min-width: 1025px) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
  .header .nav { display: flex; }
  .header { justify-content: space-between; }
  .toast { bottom: 28px; }
}
.nav-av {
  position: relative; overflow: hidden;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--kwara), var(--dana));
  font: 700 .72rem 'Space Grotesk', sans-serif; color: #fff;
  box-shadow: 0 0 0 1.5px var(--line);
}
.nav-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* Vibe nav icon: radio signal transmitting */
.ico-vibe .sig { opacity: .25; animation: signal 1.8s ease-out infinite; }
.ico-vibe .sig-2 { animation-delay: .3s; }
.ico-vibe .sig-dot { transform-origin: 12px 12px; animation: sig-dot 1.8s ease-out infinite; }
@keyframes signal { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes sig-dot { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .ico-vibe .sig, .ico-vibe .sig-dot { animation: none; opacity: 1; } }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .avatar { width: 72px; height: 72px; }
  .video-grid { grid-template-columns: 1fr; }

  .duo { grid-template-columns: 1fr; }
  .artist-head { align-items: flex-start; }
  .toggle { width: 100%; }
  .toggle button { padding: 8px 6px; white-space: nowrap; font-size: .8rem; }

  /* No top brand bar on phones (bottom nav covers navigation) */
  .header { display: none; }

  /* Home */
  main.hero { padding-top: calc(20px + env(safe-area-inset-top)); }
  .hero .eyebrow { display: none; }
  .hero .title { font-size: min(2rem, 9vw); }
  .hero .title-line { display: block; white-space: nowrap; } /* "Kwara & Dana Media" on its own line */
  .hero .lead { margin-top: 10px; font-size: .95rem; }
  .video-frame { margin-top: 22px; padding: 0; background: none; box-shadow: none; }
  .btn-full { display: flex; }
  .duo { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .duo a { flex: 0 1 150px; padding: 12px 16px; border-radius: 14px; }
  .duo h3 { font-size: 1.05rem; }
  .duo span { font-size: .72rem; }
  .duo .arrow { font-size: 1.1rem; }

  /* Home fits exactly one screen: no scrolling, video shrinks on short phones */
  body:has(main.hero) {
    height: 100dvh; overflow: hidden;
    display: flex; flex-direction: column;
    padding-bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));
  }
  main.hero {
    flex: 1; min-height: 0; width: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
  }
  .hero .video-frame { width: min(100%, calc((100dvh - 442px) * 16 / 9)); margin: 16px auto 0; }
  .hero .btn-full { width: min(100%, calc((100dvh - 442px) * 16 / 9)); margin: 10px auto 0; padding: 10px; }
  .hero .duo { margin-top: 12px; }
  body:has(main.hero) footer { padding: 0 16px; font-size: .7rem; }

  /* Artist pages (Kwara, Dana, Vibe): name + toggle stick to the top, only content scrolls */
  main.artist { padding-top: 0; }
  .artist-head {
    position: sticky; top: 0; z-index: 40;
    gap: 12px; margin: 0 -16px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
    background: rgba(10,10,12,.88);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
  }
  .artist-id { gap: 14px; }
  .artist .avatar { width: 52px; height: 52px; font-size: 1.3rem; }
  .artist-id .title { font-size: 1.7rem; }
  .artist .eyebrow { font-size: .65rem; margin-bottom: 0; }
  .artist .panel { margin-top: 16px; }
}

/* ---------- Laptop / desktop block ----------
   Devices whose main pointer is a mouse/trackpad (laptops, desktops) see a warning instead of the site.
   Phones and tablets (touch) are unaffected. */
.device-block { display: none; }
@media (hover: hover) and (pointer: fine) {
  body > *:not(.device-block) { display: none !important; }
  body { padding: 0 !important; }
  .device-block {
    display: grid; place-items: center; min-height: 100vh; padding: 24px;
  }
  .device-card {
    position: relative; width: min(460px, 100%); padding: 40px 32px; text-align: center;
    border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  }
  .device-card svg { width: 64px; height: 64px; color: var(--accent); margin-bottom: 18px; }
  .device-card h1 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 12px; }
  .device-card p { color: var(--muted); font-size: .98rem; }
  .device-url:not(:empty) {
    display: inline-block; margin-top: 20px; padding: 8px 16px; border-radius: 999px;
    background: var(--surface-2); color: var(--text); font: 600 .9rem 'Inter', sans-serif;
  }
}