/* The product page: hero, the six workspace screens, the stem archive, the sound examples
   and the specification table. The shell it sits in is in site.css. */

/* ------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding-block: 0 0; isolation: isolate }
/* The lanes of the playing surface, drawn behind the words. Script animates a touch across
   them; without script, and for anyone who asked for less motion, the canvas stays empty and
   only this gradient remains — the page never depends on it. */
.field {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  opacity: .5; mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.hero::before {
  content: ''; position: absolute; z-index: -2; inset: -30% -10% auto 30%; height: 90%;
  background: radial-gradient(ellipse at 50% 40%, #35776455, transparent 65%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; padding-block: 72px 40px }
.hero h1 { font-size: clamp(56px, 8vw, 104px); letter-spacing: -.05em; font-weight: 550; line-height: .98 }
.hero .lead { font-size: 19px; line-height: 1.75; color: #c0cfca; max-width: 520px; margin-top: 26px }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 34px }

/* A device rather than a bare rectangle: the screenshots are of a phone, and a bezel says so
   without a caption. */
.device { margin: 0; text-align: center }
/* Both orientations live in the page. Until the script stacks them they stand one under the
   other, which is what somebody without JavaScript sees — nothing is hidden from them. */
.frames { display: grid; gap: 22px; justify-items: center }
.frames.stacked { position: relative; gap: 0; transition: height .5s cubic-bezier(.2,.7,.3,1) }
.stacked .frame { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.3,1) }
.stacked .frame:not(.shown) { opacity: 0; pointer-events: none; transform: rotate(-6deg) scale(.92) }
.stacked .frame.shown { opacity: 1; transform: none }
.frame.wide img { width: 560px; border-radius: 18px }
/* Only the framed screenshot, not the "open it" link underneath: the bezel was landing on
   the caption link too, which made it look like a second button. */
.device .frame, .device > a {
  display: inline-block; position: relative; padding: 8px;
  background: linear-gradient(160deg, #1b2422, #05090980); border: 1px solid #7c9c8d55;
  border-radius: 40px; box-shadow: 0 34px 70px #00000066, 0 0 80px #659d7715;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s;
}
.device .frame.shown:hover, .device > a:hover { transform: translateY(-6px); box-shadow: 0 40px 80px #00000070, 0 0 90px #91e0cd22 }
.device img { width: 290px; max-width: 100%; border-radius: 32px }
/* Measure each frame at its own natural height, never stretched to the old orientation. */
.device .stacked .frame {
  position: absolute; inset: 0 auto auto 50%; width: max-content; max-width: 100%;
  transform: translateX(-50%); cursor: pointer;
  transition: opacity .3s ease, transform .45s ease, box-shadow .3s;
}
.device .stacked .frame:not(.shown) { transform: translateX(-50%) rotate(-8deg) scale(.94) }
.device .stacked .frame.shown:hover { transform: translateX(-50%); box-shadow: 0 28px 65px #0008, 0 0 0 2px #91e0cd66 }
.device .frame.wide img { width: 560px }
.hero .frames:not(.stacked) .frame:first-child { transform: rotate(2.5deg) }
.device { min-width: 0 }
.device .frames.stacked { display: grid; justify-items: center; height: auto }
.device .stacked .frame.shown {
  position: relative; inset: auto; width: fit-content; max-width: 100%;
  transform: none; animation: device-turn .4s ease both;
}
.device .stacked .frame.shown:hover { transform: none }
@keyframes device-turn { from { transform: rotate(-8deg) scale(.95) } to { transform: none } }

/* The four numbers that answer "how big is this thing" before any paragraph does. */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none;
  margin-block: 0; padding: 30px 0 78px; border-top: 1px solid var(--line);
}
.facts li { display: flex; flex-direction: column; gap: 4px }
.facts strong { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; letter-spacing: -.04em; color: var(--accent) }
.facts span { font-size: 14px; color: var(--muted); max-width: 210px; line-height: 1.5 }

/* ---------------------------------------------------------- the workspaces */
.workspace-intro { border-top: 1px solid var(--line); padding-block: 56px }
.workspace-intro h2 { font-size: clamp(28px, 3.4vw, 38px) }
.workspace-intro p { max-width: 780px; margin-top: 20px; color: #bdccc6 }

.feature-screen { border-top: 1px solid var(--line); padding-block: 72px; overflow: hidden }
.feature-screen:nth-of-type(even) { background: #142321 }
.screenshot-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 90px; align-items: center }
.alternate figure { order: 2 }
.feature-explanation h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -.025em }
.feature-explanation > p:not(.eyebrow) { margin-top: 24px; font-size: 17px; color: #c0cfca; line-height: 1.8 }
.feature-explanation ul { padding-left: 0; margin: 0; list-style: none }
.feature-explanation li {
  position: relative; padding-left: 28px; margin-top: 16px; font-size: 16px; color: #c0cfca;
}
.feature-explanation li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 14px; height: 1px; background: var(--accent);
}

/* ------------------------------------------------------------ stem export */
.stems { border-top: 1px solid var(--line); background: #142321 }
.stems-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center }
.stems-list { margin: 34px 0 0 }
.stems-list > div { border-top: 1px solid var(--line); padding-block: 18px }
.stems-list dt { font-size: 17px; font-weight: 600 }
.stems-list dd { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 460px }

.archive {
  margin: 0; background: #0a1413; border: 1px solid #ffffff18; border-radius: var(--radius);
  padding: 26px 24px;
}
.archive-name {
  font-size: 13px; letter-spacing: .04em; color: var(--ink); margin: 0 0 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.archive-name::before { content: '🗜'; margin-right: 10px; filter: grayscale(1) brightness(1.6) }
.archive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.archive li {
  display: flex; align-items: center; gap: 14px; font-size: 13px; color: #c3d3cd;
  background: #ffffff06; border-radius: 8px; padding: 9px 12px;
}
.archive i {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 4px; background: #2a4a42; color: var(--accent); min-width: 44px; text-align: center;
}
.archive .audio i { background: #43331f; color: var(--amber) }
.archive span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* --------------------------------------------------------- sound examples */
/* The clips are rendered by the app itself; see WebsiteDemos.swift. */
.sounds { border-top: 1px solid var(--line) }
.players { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px }
/* Five examples in a two-column grid leave one alone on the last row; the first one takes the
   full width instead, which is also where the tuning belongs — it is the point of the app. */
.player:first-child { grid-column: 1 / -1 }
.player {
  background: linear-gradient(150deg, #1d322d, #132120); border: 1px solid #ffffff1a;
  border-radius: var(--radius); padding: 26px 26px 22px;
  transition: border-color .3s, transform .3s;
}
.player:hover { border-color: #91e0cd3d }
.player.playing { border-color: #91e0cd66 }
.player h3 { font-size: 20px; margin-bottom: 10px }
.player > p { font-size: 15px; color: var(--muted); margin-bottom: 20px; line-height: 1.65; max-width: 640px }
.player-bar { display: flex; align-items: center; gap: 16px }
.play {
  flex: none; width: 54px; height: 54px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #0f2924; font-size: 15px; display: grid; place-items: center;
  transition: transform .18s, background .18s;
}
.play:hover { background: #b6f2e3; transform: scale(1.06) }
.player.playing .play { box-shadow: 0 0 0 0 #91e0cd80; animation: pulse 2.4s ease-out infinite }
@keyframes pulse { to { box-shadow: 0 0 0 20px #91e0cd00 } }
.scope {
  position: relative; flex: 1; min-width: 0; height: 72px; border-radius: 12px;
  background: #0a1413; border: 1px solid #ffffff12; overflow: hidden; cursor: pointer;
}
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100% }
/* Without JavaScript the bars never move, so the bar alone says where the clip is. */
.progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .2s linear }
.clock { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right }
.marks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0 }
.marks button {
  border: 1px solid #ffffff1f; background: #ffffff08; color: var(--muted); border-radius: 20px;
  padding: 8px 15px; min-height: 40px; font-size: 13px; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.marks button:hover { color: var(--ink); border-color: #91e0cd66 }
.marks [aria-current] { background: #2a4a42; border-color: #91e0cd66; color: var(--ink) }
.sounds .capture-note { margin-top: 26px }
/* The native player is the fallback; script replaces it with the bar above. */
audio[data-audio] { width: 100%; margin-top: 14px }
.player.playing audio[data-audio], .player audio[data-audio]:not([controls]) { display: none }

/* ------------------------------------------------------------------ specs */
.specifications .section-intro { max-width: 750px }
.specifications dl { margin-block: 36px 48px }
.specifications dl > div {
  display: grid; grid-template-columns: 240px 1fr; gap: 35px; padding: 22px 16px 22px 0;
  border-top: 1px solid var(--line); transition: background .25s;
}
.specifications dl > div:hover { background: #ffffff06 }
.specifications dt { font-weight: 600; color: var(--ink) }
.specifications dd { margin: 0; color: #bdccc6 }
.specifications aside { border-left: 2px solid var(--accent); padding: 10px 25px }
.specifications aside p { margin: 15px 0 0; color: var(--muted); max-width: 850px }

/* --------------------------------------------------------------- movement */
/* Sections rise once as they are reached. Anything that asked for less motion gets none. */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1) }
.risen { opacity: 1; transform: none }
/* Staggered by position rather than by a number written into each element: the page's own
   content policy forbids inline styles, so a `style="--i:2"` would have been struck out and
   every delay silently collapsed to zero. */
.risen .feature-explanation li, .risen .stems-list > div, .risen .archive li { animation: slide .6s backwards cubic-bezier(.2,.7,.3,1) }
.risen .feature-explanation li:nth-child(1), .risen .stems-list > div:nth-child(1) { animation-delay: .12s }
.risen .feature-explanation li:nth-child(2), .risen .stems-list > div:nth-child(2) { animation-delay: .22s }
.risen .feature-explanation li:nth-child(3), .risen .stems-list > div:nth-child(3) { animation-delay: .32s }
.risen .archive li:nth-child(1) { animation-delay: 0s }
.risen .archive li:nth-child(2) { animation-delay: .06s }
.risen .archive li:nth-child(3) { animation-delay: .12s }
.risen .archive li:nth-child(4) { animation-delay: .18s }
.risen .archive li:nth-child(5) { animation-delay: .24s }
.risen .archive li:nth-child(6) { animation-delay: .3s }
.risen .archive li:nth-child(7) { animation-delay: .36s }
.risen .archive li:nth-child(8) { animation-delay: .42s }
@keyframes slide { from { opacity: 0; transform: translateX(-14px) } }

@media (max-width: 1000px) {
  .hero-inner, .stems-row { gap: 40px }
  .screenshot-row { gap: 45px }
  .device img { width: 260px }
  .facts { gap: 18px; padding-bottom: 60px }
}
@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-block: 44px 20px }
  .hero .lead { font-size: 17px }
  .hero-actions { gap: 20px }
  .hero-actions .button { width: 100%; max-width: 380px }
  .facts { grid-template-columns: 1fr 1fr; gap: 22px; padding: 26px 0 48px }
  .facts span { font-size: 13px }
  .screenshot-row, .stems-row { grid-template-columns: 1fr; gap: 32px }
  .screenshot-row figure, .alternate figure { order: 2 }
  .feature-screen { padding-block: 48px }
  .device img { width: 280px }
  .frame.wide img { width: 100% }
  .players { grid-template-columns: 1fr; gap: 20px }
  .player { padding: 20px }
  .scope { height: 60px }
  .play { width: 48px; height: 48px }
  .specifications dl > div { grid-template-columns: 1fr; gap: 8px; padding-block: 20px }
  .workspace-intro { padding-block: 40px }
  .archive { padding: 20px 16px }
  .archive li { font-size: 12px; gap: 10px }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none }
  .field { display: none }
}