/* Musivelle, coming soon. Style after the Refero "Adora" reference: calm, airy, white surfaces,
   one violet action, pastel washes behind the product frame only, large radii on containers and
   small radii on controls, hairline borders instead of shadows. One family (Plus Jakarta Sans,
   SIL OFL 1.1, self-hosted); PolySans in the reference is a commercial face and is not used. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --violet: #592eff;
  --plum: #21164c;
  --charcoal: #353241;
  --slate: #5f5f69;
  --mist: #e0e0db;
  --concrete: #eeeeee;
  --white: #ffffff;
  --sky: #bcf2ff;
  --lime: #dfff9d;
  --candy: #ffaae6;
  --cyan: #2ed6ff;
  --lime-pop: #a2ea13;
  --magenta: #f843c2;
  --brand-blue: #1940bd; /* the bar in the Musivelle logo */
  --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 40px;
  --r-frame: 64px;
  --r-ctl: 10px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --w: 1200px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
p,
h1,
h2,
h3,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 8px;
}
.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--plum);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--r-ctl);
}
.skip:focus {
  top: 16px;
}
.muted {
  color: var(--slate);
}
.pad {
  padding: 16px;
}

/* floating nav pill */
.nav {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: min(calc(100% - 32px), 760px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px 10px 22px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  animation: drop 0.9s var(--ease) both;
}
.nav-logo {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* badges: stadium, transparent fill, vivid outline */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border: 1px solid;
  border-radius: 200px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--plum);
  background: transparent;
  width: fit-content;
}
.badge-violet {
  border-color: var(--violet);
}
.badge-cyan {
  border-color: var(--cyan);
}
.badge-lime {
  border-color: var(--lime-pop);
}
.badge-magenta {
  border-color: var(--magenta);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
  animation: pulse 2.4s ease-in-out infinite;
}

main {
  padding-top: 104px;
}
.hero {
  max-width: var(--w);
  margin: 0 auto;
  padding: 56px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.display {
  font-weight: 700;
  color: var(--plum);
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  max-width: 16ch;
  text-wrap: balance;
}
.squiggle-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.squiggle {
  position: absolute;
  left: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.3em;
  overflow: visible;
}
.squiggle path {
  fill: none;
  stroke: var(--candy);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.4s 0.9s var(--ease) forwards;
}
.lede {
  max-width: 60ch;
  color: var(--slate);
  text-wrap: pretty;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.hint {
  font-size: 14px;
  color: var(--slate);
}

.btn {
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: var(--violet);
  color: #fff;
}
.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(89, 46, 255, 0.28);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--mist);
}
.btn-ghost:hover {
  background: var(--concrete);
}
.ico {
  width: 20px;
  height: 20px;
  flex: none;
}

/* product frame on a pastel wash (wash never sits behind reading text) */
.frame-wrap {
  padding: 0 16px;
}
.frame {
  position: relative;
  max-width: var(--w);
  margin: 0 auto;
  border-radius: var(--r-frame);
  overflow: hidden;
  padding: clamp(14px, 4.5vw, 64px);
  background: #f4f8ff;
  isolation: isolate;
}
.wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: saturate(1.05);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.95;
  will-change: transform;
}
.b1 {
  width: 55%;
  aspect-ratio: 1;
  left: -8%;
  top: -25%;
  background: var(--sky);
  animation: drift1 16s ease-in-out infinite alternate;
}
.b2 {
  width: 48%;
  aspect-ratio: 1;
  right: -6%;
  top: 10%;
  background: var(--candy);
  animation: drift2 19s ease-in-out infinite alternate;
}
.b3 {
  width: 52%;
  aspect-ratio: 1;
  left: 24%;
  bottom: -35%;
  background: var(--lime);
  animation: drift3 22s ease-in-out infinite alternate;
}
.card-inner {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  padding: clamp(16px, 3vw, 32px);
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.card-title {
  font-weight: 700;
  color: var(--plum);
  font-size: 20px;
  line-height: 1.3;
}
.card-sub {
  font-size: 14px;
  color: var(--slate);
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 200px;
  background: var(--violet);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.chip-soft {
  background: var(--concrete);
  color: var(--charcoal);
}
.sheet {
  border: 1px solid var(--mist);
  border-radius: 24px;
  background: #fff;
  padding: 8px 4px;
  overflow: hidden;
}
.sheet svg {
  display: block;
  width: 100%;
  height: auto;
}
.card-foot {
  font-size: 14px;
  color: var(--slate);
  margin-top: 14px;
}

/* staff drawing (built by app.js) */
.st-line {
  stroke: var(--charcoal);
  stroke-width: 1.2;
  opacity: 0.55;
}
.st-bar {
  stroke: var(--charcoal);
  stroke-width: 1.6;
  opacity: 0.75;
}
.st-note .head {
  fill: var(--plum);
  transition: fill 0.25s var(--ease);
}
.st-note .head.hollow {
  fill: #fff;
  stroke: var(--plum);
  stroke-width: 2.4;
}
.st-note .stem {
  stroke: var(--plum);
  stroke-width: 1.8;
  transition: stroke 0.25s var(--ease);
}
.st-note .beam {
  fill: var(--plum);
  transition: fill 0.25s var(--ease);
}
.st-note {
  cursor: pointer;
}
.st-note.on .head {
  fill: var(--violet);
}
.st-note.on .head.hollow {
  fill: #e6e0ff;
  stroke: var(--violet);
}
.st-note.on .stem {
  stroke: var(--violet);
}
.st-note.on .beam {
  fill: var(--violet);
}
.st-trail {
  fill: url(#trail);
}
.st-head {
  stroke: var(--violet);
  stroke-width: 3;
  stroke-linecap: round;
}
.st-cap {
  fill: var(--violet);
}

/* statement band */
.band {
  max-width: var(--w);
  margin: 0 auto;
  padding: 100px 24px 20px;
  text-align: center;
}
.band-text {
  font-weight: 700;
  color: var(--plum);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.375rem);
  line-height: 1.15;
}

/* feature cards */
.features {
  max-width: var(--w);
  margin: 0 auto;
  padding: 60px 24px 100px;
  text-align: center;
}
.h2 {
  font-weight: 700;
  color: var(--plum);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.625rem);
  line-height: 1.1;
}
.sub {
  color: var(--slate);
  margin-top: 12px;
}
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 48px;
  text-align: left;
}
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.4s var(--ease),
    border-color 0.3s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--violet);
}
.card h3 {
  font-weight: 700;
  color: var(--plum);
  font-size: 26px;
  line-height: 1.15;
  margin-top: 4px;
}
.card p {
  color: var(--slate);
  font-size: 16px;
}
.vignette {
  height: 140px;
  border-radius: 24px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.v-practise {
  background: linear-gradient(160deg, var(--sky), #e9fbff);
}
.v-create {
  background: linear-gradient(160deg, var(--lime), #f6ffe0);
}
.v-teach {
  background: linear-gradient(160deg, var(--candy), #ffe6f7);
}

/* practise: metronome and a looping bar strip */
.metro {
  position: absolute;
  left: 28px;
  bottom: 14px;
  width: 40px;
  height: 110px;
}
.metro .base {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: rgba(33, 22, 76, 0.12);
}
.metro .arm {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 3px;
  height: 92px;
  background: var(--plum);
  border-radius: 3px;
  transform-origin: 50% 100%;
  animation: tick 1.3s ease-in-out infinite alternate;
  z-index: 2;
}
.metro .bob {
  position: absolute;
  bottom: 52px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--violet);
  transform-origin: 50% 60px;
  animation: tick 1.3s ease-in-out infinite alternate;
  z-index: 3;
}
.loopbar {
  position: absolute;
  right: 24px;
  left: 96px;
  bottom: 36px;
  display: flex;
  gap: 6px;
}
.loopbar i {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(33, 22, 76, 0.12);
}
.loopbar i.hot {
  background: #fff;
  border-color: var(--violet);
  animation: glow 2.6s ease-in-out infinite;
}
.loopbar i.hot + i.hot {
  animation-delay: 1.3s;
}

/* create: notes that settle on the stave one after another */
.v-create svg {
  width: 100%;
  height: 100%;
}
.v-create .lines line {
  stroke: rgba(33, 22, 76, 0.35);
  stroke-width: 1.2;
}
.v-create .pop ellipse {
  fill: var(--plum);
  transform-box: fill-box;
  transform-origin: center;
  animation: settle 5s var(--ease) infinite;
  opacity: 0;
}
.v-create .pop ellipse:nth-child(2) {
  animation-delay: 0.35s;
}
.v-create .pop ellipse:nth-child(3) {
  animation-delay: 0.7s;
}
.v-create .pop ellipse:nth-child(4) {
  animation-delay: 1.05s;
}
.v-create .pop ellipse:nth-child(5) {
  animation-delay: 1.4s;
}

/* teach: assignment ticks */
.v-teach ul {
  width: 62%;
  display: grid;
  gap: 14px;
}
.v-teach li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v-teach li i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid var(--plum);
  position: relative;
  flex: none;
}
.v-teach li i::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--violet);
  border-width: 0 2.5px 2.5px 0;
  rotate: 40deg;
  scale: 0;
  animation: tickin 6s var(--ease) infinite;
}
.v-teach li:nth-child(2) i::after {
  animation-delay: 0.8s;
}
.v-teach li:nth-child(3) i::after {
  animation-delay: 1.6s;
}
.v-teach li b {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  flex: 1;
}
.v-teach li:nth-child(2) b {
  max-width: 70%;
}
.v-teach li:nth-child(3) b {
  max-width: 85%;
}

.foot {
  border-top: 1px solid var(--mist);
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
}
.foot::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: 72px;
  height: 2px;
  background: var(--brand-blue);
}
.foot p {
  font-size: 14px;
  color: var(--slate);
}

/* entrance and scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s var(--ease) var(--d, 0ms),
    transform 0.9s var(--ease) var(--d, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.hero .reveal:nth-child(2) {
  transition-delay: 0.1s;
}
.hero .reveal:nth-child(3) {
  transition-delay: 0.2s;
}
.hero .reveal:nth-child(4) {
  transition-delay: 0.3s;
}
.hero .reveal:nth-child(5) {
  transition-delay: 0.4s;
}
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@keyframes drop {
  from {
    opacity: 0;
    translate: -50% -24px;
  }
  to {
    opacity: 1;
    translate: -50% 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pulse {
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}
@keyframes drift1 {
  to {
    transform: translate(14%, 18%) scale(1.15);
  }
}
@keyframes drift2 {
  to {
    transform: translate(-16%, 12%) scale(0.9);
  }
}
@keyframes drift3 {
  to {
    transform: translate(-12%, -16%) scale(1.2);
  }
}
@keyframes tick {
  from {
    rotate: -24deg;
  }
  to {
    rotate: 24deg;
  }
}
@keyframes glow {
  50% {
    box-shadow: 0 0 0 5px rgba(89, 46, 255, 0.16);
  }
}
@keyframes settle {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.6);
  }
  12%,
  70% {
    opacity: 1;
    transform: none;
  }
  90%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes tickin {
  0%,
  6% {
    scale: 0;
  }
  14%,
  70% {
    scale: 1;
  }
  85%,
  100% {
    scale: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .squiggle path {
    stroke-dashoffset: 0;
  }
  .v-create .pop ellipse {
    opacity: 1;
  }
  .v-teach li i::after {
    scale: 1;
  }
  .nav {
    translate: -50% 0;
  }
}