/* ============ Musin — Home landing ============
   Loaded on top of content.css: the shell (nav, buttons, stats, logos, footer)
   is shared with the other two landings and only what's specific to the home
   page is defined here. */

/* ============ Hero ============
   A full-bleed video panel with the copy centred over it. The <img> is a
   placeholder for the looping clip that will replace it. */
/* No bottom padding: the panel fades out into the page instead of ending on
   an edge, and the logo line picks up straight after it. */
.home-hero { padding: 0; }

.hero-video {
  position: relative;
  /* Tall enough that the logo line always starts just past the fold,
     whatever the screen height */
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* Masked so the footage itself dissolves rather than being cut off */
/* svh tracks the visible area once mobile browser chrome collapses */
/* lvh is the viewport at its tallest (chrome retracted). Sizing against it
   means the logo line stays below the fold however the chrome moves. */
@supports (height: 100lvh) {
  .hero-video { min-height: calc(100lvh - 40px); }
}

.hero-video__media {
  /* background footage, not a player: no taps, no native transport UI */
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Matches the panel, so there is nothing else to see before the first
     frame decodes */
  background: var(--bg);
  /* Pulled up off centre so more of the lower half of the frame is in view */
  object-position: center 62%;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0) 96%);
  mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0) 96%);
}

/* Keeps the copy readable, and lands on the page colour at the bottom so the
   mask has nothing to reveal but the background */
.hero-video__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgb(10, 10, 10) 0%,
      rgba(10, 10, 10, 0.72) 22%,
      rgba(10, 10, 10, 0.4) 52%,
      rgba(10, 10, 10, 0.66) 100%),
    rgba(10, 10, 10, 0.2);
}

.hero-video__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  padding: 64px 24px;
  text-align: center;
}

/* Sized off the viewport so the line never wraps */
.hero-video__title {
  /* Solid fill so the words are always fully legible; the light comes from
     the shadow rather than from anything painted over the glyphs */
  color: var(--text-primary);
  animation: hero-glow 5s ease-in-out infinite;
  font-size: min(5.1vw, 68px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -1.1px;
  white-space: nowrap;
}

.hero-video__text {
  font-size: 26px;
  line-height: 42px;
  color: var(--text-primary);
}

@keyframes hero-glow {
  0%, 100% { text-shadow: 0 0 16px rgba(255, 255, 255, 0.18), 0 0 40px rgba(229, 69, 82, 0.14); }
  50%      { text-shadow: 0 0 26px rgba(255, 255, 255, 0.45), 0 0 64px rgba(229, 69, 82, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__title {
    animation: none;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.28), 0 0 48px rgba(229, 69, 82, 0.2);
  }
}

/* Safari paints a large play glyph over a paused video. Each pseudo-element
   needs its own rule: browsers drop the whole selector list if any one of
   them is unrecognised, which is why grouping them did nothing. */
.hero-video__media::-webkit-media-controls { display: none !important; }
.hero-video__media::-webkit-media-controls-panel { display: none !important; }
.hero-video__media::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero-video__media::-webkit-media-controls-overlay-play-button { display: none !important; }
.hero-video__media::-webkit-media-controls-play-button { display: none !important; }

/* Sits over the clip, under the scrim and copy. Same black as the panel and
   as the clip's own first frame, so covering it changes nothing visually. */
.hero-video__still {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.hero-video__still[hidden] { display: none; }

.hero-video__cta { margin-top: 6px; }

/* Barely there: it only appears when the clip is not running, and should not
   compete with the call to action above it. */
.hero-video__toggle {
  margin-top: 2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  opacity: 0.38;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hero-video__toggle:hover,
.hero-video__toggle:focus-visible { opacity: 0.85; }
.hero-video__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hero-video__toggle[hidden] { display: none; }

/* Tucked under the hero's fade-out rather than a section apart from it */
.logos { padding-top: 0; margin-top: -24px; }

/* Titles that split into a small lead and a larger main line on phones.
   Inline by default, so wider screens read them as one sentence. */
.split-title__lead,
.split-title__main { display: inline; }

/* ============ Platform numbers ============
   Two stat blocks stacked, each over a row of four cards that flip together. */
.stats { padding: 24px 0 112px; }

.stats__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.stats .genres__number {
  font-size: clamp(56px, 6.5vw, 88px);
  letter-spacing: -2.5px;
}

.stats__col .genres__stat + .flip-row { margin-bottom: 32px; }

.flip-row {
  display: grid;
  grid-template-columns: repeat(4, 196px);
  gap: 20px;
  perspective: 1400px;
}

.flip-card {
  position: relative;
  height: 264px;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flip-card.is-flipped { transform: rotateY(180deg); }

/* Both faces sit in the same box; only the one facing us renders */
.flip-card__face {
  position: absolute;
  inset: 0;
  /* a hard guarantee: nothing can sit outside the card, whatever the device
     font metrics do to the text below the cover */
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The chip fills the card and the artwork gives up height first, so the title
   and artist always have room inside rather than spilling past the bottom. */
.flip-card .track-chip,
.flip-card .creator-chip { height: 100%; }

.flip-card .track-chip__cover,
.flip-card .creator-chip__photo {
  flex: 0 1 auto;
  min-height: 0;
}

.flip-card__face--back { transform: rotateY(180deg); }

.flip-card .track-chip,
.flip-card .creator-chip {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ---- The two chip styles, lifted from the persona pages ---- */
.track-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 16px 16px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card-2);
  text-align: center;
}

.track-chip__cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
}

.track-chip__title,
.track-chip__artist {
  /* names come from a rotating catalogue, so long ones have to clip rather
     than push out of the card */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-chip__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.track-chip__artist {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-dim);
}

.creator-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 16px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card-2);
  text-align: center;
}

.creator-chip__photo {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.creator-chip__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.creator-chip__platform {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: var(--text-primary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.creator-chip__platform--instagram { -webkit-mask-image: url("../img/social/s08-instagram.svg"); mask-image: url("../img/social/s08-instagram.svg"); }
.creator-chip__platform--tiktok { -webkit-mask-image: url("../img/social/s10-tiktok.svg"); mask-image: url("../img/social/s10-tiktok.svg"); }
.creator-chip__platform--youtube { -webkit-mask-image: url("../img/social/s09-youtube.svg"); mask-image: url("../img/social/s09-youtube.svg"); }

.creator-chip__followers {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* ============ Persona sections ============
   Copy one side, wheel the other, CTAs under the copy. No panel. */
.persona { padding: 0 0 112px; }

.persona__row {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  grid-template-areas:
    "copy visual"
    "actions visual";
  align-items: center;
  column-gap: 64px;
  row-gap: 28px;
}

/* The creator side mirrors it: wheel left, copy right */
.persona--mirrored .persona__row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-areas:
    "visual copy"
    "visual actions";
}

.persona__copy { grid-area: copy; align-self: end; }
.persona__visual { grid-area: visual; min-width: 0; }
.persona__actions { grid-area: actions; align-self: start; display: flex; flex-wrap: wrap; gap: 16px; }

/* Sized so "Join as a content creator" holds one line in the 460px column */
.persona .section-title--left {
  font-size: clamp(26px, 6.8vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.6px;
}

.persona__text {
  margin-top: 20px;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-tertiary);
}

.persona__visual .create__scroller {
  --wheel-card: clamp(150px, 17vw, 214px);
  height: calc(var(--wheel-card) * 16 / 9 + 32px);
  cursor: grab;
  /* let the page scroll vertically while a sideways swipe moves the wheel */
  touch-action: pan-y;
}

.persona__visual .create__scroller.is-dragging { cursor: grabbing; }

.persona__visual .video-card,
.persona__visual .campaign-tile { width: var(--wheel-card); }

/* Shorter than the clip wheel's 9:16, so it tracks the squatter tiles */
#campaignScroller { height: calc(var(--wheel-card) * 13 / 9 + 32px); }

.persona__visual .create__scroller.no-anim .video-card,
.persona__visual .create__scroller.no-anim .campaign-tile { transition: none; }

/* These wheels sit on the page background, so the shades fade to that */
.persona__visual .create__shade { width: clamp(40px, 14%, 120px); }
.persona__visual .create__shade--left { background: linear-gradient(to right, rgb(10, 10, 10) 0%, rgba(10, 10, 10, 0) 100%); }
.persona__visual .create__shade--right { background: linear-gradient(to left, rgb(10, 10, 10) 0%, rgba(10, 10, 10, 0) 100%); }

.persona__visual .video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Campaign cards inside the wheel (same as the Music landing) ---- */
.campaign-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 9 / 13;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease, opacity 0.55s ease;
  backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  will-change: transform, filter, opacity;
}

.campaign-tile__cover {
  flex: 0 0 auto;
  /* Smaller than the tile, and set down from the top so it sits close to the
     track name underneath it */
  width: 56%;
  margin: 12% auto 0;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
}

.campaign-tile__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.campaign-tile__track { text-align: center; }

.campaign-tile__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-tile__artist {
  font-size: 11px;
  line-height: 15px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-tile__stats { display: flex; flex-direction: column; gap: 4px; }

.campaign-tile__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.campaign-tile__stats > div:last-child { border-bottom: none; }

.campaign-tile__stats dt { font-size: 13px; line-height: 18px; color: var(--text-dim); }

.campaign-tile__stats dd {
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============ How it works ============
   The persona pages' stacking app cards: each step beside the screen it
   happens on. */
.how { padding: 0 0 56px; }
.how .app-stack { margin-top: 56px; }

/* A little wider than the shared 38%, so the longest step name holds one line */
.how .app-card__panel { flex-basis: 42%; }

/* Matched to the role section headings */
.how .app-card__title {
  font-size: clamp(26px, 6.8vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.6px;
}

/* The two content creator steps mirror the artist ones */
.app-card--mirrored { flex-direction: row-reverse; }

/* ============ Why it works ============
   The cards ride the same coverflow as the hero wheels, but the centre index
   follows the page scroll rather than a timer. */
.why { padding: 0 0 48px; }

.why-viewport { margin-top: 0; }

.why-stack {
  /* Portrait cards: the copy sits above the artwork, so they need the height */
  --why-card: clamp(260px, 34vw, 420px);
  /* the artwork is roughly 480x300, so a 1.29 box left ~180px of dead
     space under it once object-fit had letterboxed the image */
  --why-ratio: 1;
  position: relative;
  height: calc(var(--why-card) * var(--why-ratio) + 40px);
  overflow: hidden;
  cursor: grab;
  /* let the page scroll vertically while we take the horizontal drag, and
     keep a sideways flick from reaching the browser's back gesture */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.why-stack.is-dragging { cursor: grabbing; }

/* The cards either side are the control for stepping the wheel */
.why-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--why-card);
  /* explicit, so a card with more copy cannot end up taller than its
     neighbours the way an aspect-ratio box can */
  height: calc(var(--why-card) * var(--why-ratio));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px 18px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--bg-card);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease, opacity 0.55s ease;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}

/* Real text, so it scales with the page instead of with the artwork */
.why-card { text-align: center; }

.why-card__heading {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.why-card__copy {
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* takes whatever height is left under the copy */
.why-card__art {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  object-fit: contain;
  object-position: center;
}

.why-card img { display: block; }

/* Card 3 draws its own type, so it needs the page's text styles */
.why-card__title {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  fill: var(--text-primary);
}

.why-card__text {
  font-family: var(--font-body);
  font-size: 18px;
  fill: var(--text-tertiary);
}

.why-card__label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text-primary);
}

.why-card__sub {
  font-family: var(--font-body);
  font-size: 13px;
  fill: var(--text-dim);
}

/* Closer to the cards above it than the shared 128px would put it */
.home-faq { padding-top: 72px; }

/* ============ Closing CTA ============
   The shared band from content.css, plus a second button. */
.home-cta__actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .persona__row { column-gap: 40px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .persona--mirrored .persona__row { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .persona__text { font-size: 21px; line-height: 32px; }

  /* Four 196px cards no longer fit the container */
  .flip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .flip-card { height: auto; aspect-ratio: 196 / 264; }

  .hero-video__text { font-size: 22px; line-height: 36px; }
}

@media (max-width: 860px) {
  .logos { margin-top: 0; }
  .hero-video__copy { gap: 20px; padding: 48px 14px; }
  /* sized off the viewport so the line still never wraps */
  .hero-video__title { font-size: 6.0vw; letter-spacing: -0.6px; }
  /* pushed well clear of the fold, so the strip is never the first thing seen */
  .logos { margin-top: 0; padding-top: 96px; }
  .hero-video__text { font-size: 19px; line-height: 30px; }

  .stats { padding: 16px 0 88px; }
  .stats__col { gap: 32px; }
  .stats__col .genres__stat + .flip-row { margin-bottom: 16px; }

  /* Two by two rather than a squeezed single row */
  .flip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 460px; }

  /* Stacked: copy, then the wheel, then the CTAs */
  .persona { padding-bottom: 80px; }

  .persona__row,
  .persona--mirrored .persona__row {
    /* the heading and the button share the top row, copy spans underneath */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title  actions"
      "text   text"
      "visual visual";
    align-items: center;
    justify-items: stretch;
    text-align: left;
    row-gap: 18px;
    column-gap: 14px;
  }

  /* lets the heading and copy become grid items in their own right */
  .persona__copy { display: contents; }
  .persona .section-title--left { grid-area: title; }
  .persona__text { grid-area: text; margin-top: 0; }
  .persona__actions { grid-area: actions; align-self: center; justify-content: flex-end; }
  .persona__visual { width: 100%; }
  .persona__visual .create__scroller { --wheel-card: clamp(150px, 44vw, 220px); }
  .persona .section-title--left { text-align: left; }

  .how { padding-bottom: 80px; }
  .app-card--mirrored { flex-direction: column; }
  .why-viewport { margin-top: 40px; }
}

@media (max-width: 600px) {
  .hero-video__text { font-size: 17px; line-height: 28px; }

  /* Two lines, much larger: "Connecting music" over "with content" */
  .hero-video__title {
    /* full width: the copy column centres its children, which otherwise
       shrink-wraps the heading and makes it wrap far more than it needs to */
    width: 100%;
    /* 10.4vw keeps "Connecting music" on its line: it needs 366px of the
       362px available at 11vw */
    font-size: min(10.4vw, 52px);
    line-height: 1.08;
    white-space: normal;
  }

  /* Both lines of the role headings at the same large size. Needs to match
     the specificity of the .persona .section-title--left rule above. */
  .split-title,
  .persona .section-title--left.split-title {
    line-height: 1.06;
    font-size: min(10.5vw, 44px);
  }
  .split-title__lead { display: block; }
  .split-title__main { display: block; white-space: nowrap; }

  /* --- breathing room between the stacked sections --- */
  .stats__col { gap: 40px; }
  .stats__col .genres__stat + .flip-row { margin-bottom: 72px; }
  .stats { padding: 24px 0 128px; }
  .persona { padding-bottom: 136px; }

  /* "Inside" over "Musin app", and Why Musin matched to it */
  .how__title,
  .why .section-title { font-size: min(10.5vw, 44px); line-height: 1.06; }

  /* As wide as the column allows, so the artwork and its type read larger */
  /* narrow enough that a card either side still peeks in */
  /* wide enough for the copy to break where it should (the longest line
     needs 247px inside), narrow enough that both neighbours still show */
  .why-stack { --why-card: min(74vw, 340px); }
  .why-card { padding: 20px 16px 14px; border-radius: 28px; }
  .why-card__heading { font-size: 20px; letter-spacing: -0.3px; }
  .why-card__copy { font-size: 15px; }

  .how .app-card__title { text-align: center; }
  .how .app-card__text { text-align: center; max-width: none; }

  /* the Why Musin heading sits closer to its cards than a full section gap */
  .why .section-title { margin-bottom: 32px; }

  .flip-row { gap: 12px; }
  .persona__text { font-size: 19px; line-height: 30px; }
  /* one button now, so it sizes to its label instead of filling the row */
  .persona__actions .btn { flex: 0 0 auto; }

  .why { padding-bottom: 56px; }
  .why-card { border-radius: 28px; }

  .home-faq { padding: 96px 0 88px; }
  .how { padding-bottom: 96px; }
  .home-cta__actions .btn { flex: 1 1 auto; }

  /* "Music spreads through content" holds a single line: sized off the
     viewport so the ratio to the available width stays constant */
  .home-cta .cta__title {
    font-size: min(5.9vw, 30px);
    line-height: 1.3;
    letter-spacing: -0.4px;
    white-space: nowrap;
  }
}