/* alt.css -- LAYOUT B, a test build only (Garrett, 12 Sep 2026, after
   looking at WG DAW Converter's page: "Can we do a test build of the site
   but make it so that it looks nothing reminiscent of this? ... at least the
   header is in a similar format").

   What the two pages had in common, and what this one refuses:
     - a big LEFT-aligned headline with one phrase in the accent color,
       a paragraph beneath it, then buttons        -> centered, and the
                                                      headline comes SECOND
     - the product screenshot parked to the right of the headline
                                                   -> the comparison is the
                                                      first thing on the page,
                                                      full width
     - a row of colored download buttons as the focal point
                                                   -> no buttons above the
                                                      fold at all
     - a persistent nav bar across the top          -> a masthead that is only
                                                      the name, and no rail

   The argument order is inverted on purpose: evidence, then claim. Everything
   else -- palette, type, the ocean behind it -- is site.css, so this is the
   same brand in a different arrangement, not a second design.

   site/onepage/index.html remains the approved page (SITE.md, tagged
   site-hero-12sep). This file is here to be judged and then kept or deleted. */

body.alt { /* no rail, no grid: one centered column */ }

.alt main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px) 72px;
}

.alt .preview {
  justify-content: center;
  margin: 22px 0 0;
  text-align: center;
}

/* ---- masthead: the name, and nothing else to click ---- */
.alt .masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: clamp(34px, 7vh, 72px) 0 clamp(26px, 5vh, 44px);
  text-align: center;
}
/* larger, so mollusk leads and ptx2rpp sits under it (Garrett, 12 Sep:
   "mollusk DAW conversion tool should be larger") */
.alt .masthead .brand { align-self: center; font-size: 3.4rem; }
@media (max-width: 620px) { .alt .masthead .brand { font-size: 2.6rem; } }
/* site.css indents the descriptor to sit under the 'm'; centered, it
   wants no indent at all. */
/* Exactly as wide as the word's ink, m to k (Garrett, 12 Sep), and
   centered in the masthead (13 Sep: "put DAW conversion tool back
   centered"). CSS cannot size one line of text to another's width, so
   site.js measures both and sets the size; 1.3rem is the resting size if
   it cannot run. */
.alt .masthead .descriptor { margin: 2px 0 0; font-size: 1.3rem; white-space: nowrap; }

@media (max-width: 620px) { .alt .masthead .descriptor { font-size: 1.1rem; } }
.alt .mark-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  padding-top: 20px;
  font: 560 1.0625rem/1.3 var(--sans);
  color: var(--muted);
}
/* The ptx2rpp wordmark alone, centered (Garrett, 12 Sep: "get rid of Pro
   Tools to REAPER at the top and just have ptx2rpp centered"). The depth
   version carries its own shadow, so it wants a little air below. */
.alt .mark-line { justify-content: center; padding-top: 13px; }
/* The gradient line from the first version of the page, the same one
   between the sections: a hairline with the teal held at its center
   (Garrett, 12 Sep: "that gradient line that we had early on"). */
.alt .mark-line::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(320px, 70vw);
  height: 1px;
  transform: translateX(-50%);
  background: radial-gradient(160px 3px at 50% 50%, var(--accent), rgba(var(--accent-rgb), 0.35) 38%, rgba(var(--accent-rgb), 0) 100%);
  opacity: 0.72;
}
/* the same letter size the flat wordmark had at 46 px: the depth file's
   viewBox is cropped tighter (1060 units tall against 1410), so the same
   letters need 46 x 1060 / 1410 = 34.6 px (Garrett, 12 Sep: "ptx2rpp can
   be the same size that it was") */
.alt .mark-line .pmark {
  height: 44px; width: auto; display: block;   /* a bit bigger than that (Garrett, 12 Sep) */
  /* a slight gaussian glow around it, in its own teal (13 Sep): a tight
     halo and a wider, fainter one, so it lifts without looking lit up */
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.32)) drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.16));
}


/* ---- the pairs: the page is mostly this ---- */
.alt .pair { margin: 0 0 40px; }
.alt .lead-pair { margin-bottom: clamp(30px, 6vh, 56px); }
/* Between the two panes, one thin chevron: Pro Tools, then REAPER, with
   the direction stated rather than implied (Garrett, 12 Sep: "There
   should be a classy little '>' between each of the screenshots"). It is
   drawn, not typed, so it does not depend on a font's glyph, and it turns
   to point DOWN when the panes stack on a phone. */
.alt .pair .panes {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.alt .chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--accent);
  opacity: 0.32;  /* Garrett, 12 Sep: half, then "even more transparent" */
}
.alt .chev svg { display: block; }
.alt .pair figcaption {
  margin: 14px auto 0;
  max-width: 54rem;
  text-align: center;
  color: var(--muted);
}
.alt .more-pairs { padding: 0; max-width: none; }

/* ---- the claim, sitting under the first pair ---- */
.alt .claim {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(26px, 5vh, 48px) 0 clamp(34px, 6vh, 58px);
  text-align: center;
}
.alt h1 {
  margin: 0 0 calc(18px - 0.14em);
  max-width: none;
  font-size: clamp(2.1rem, 3.9vw, 3.2rem);
  line-height: 1.06;
}
.alt .offer {
  margin: 0 auto;
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--muted);  /* gray again after a try at white (Garrett, 13 Sep) */
}

/* ---- facts: four short rows, no prose column ---- */
.alt .facts { max-width: none; padding: clamp(30px, 6vh, 56px) 0 0; }
.alt .facts dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.alt .facts dl > div {
  padding: 20px 22px 22px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.alt .facts dt {
  font: 650 1.0625rem/1.35 var(--sans);
  color: var(--text);
  margin-bottom: 6px;
}
.alt .facts dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---- the three lines, centered, with room around them ---- */
.alt .why {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 84px) 0 clamp(30px, 6vh, 60px);
  text-align: center;
}
.alt .why p { color: var(--text); font-size: 1.0625rem; margin: 0 0 0.6em; text-wrap: balance; }
/* "So I made this." is the point of the sentence; it never breaks across
   lines (Garrett, 12 Sep: "made this shouldn't be on its own line"). */
.nb { white-space: nowrap; }

/* ---- launch: one line and one address, no button row ---- */
.alt .launch {
  max-width: none;
  padding: 0 0 clamp(30px, 6vh, 56px);
  text-align: center;
}
.alt .launch .ln { color: var(--muted); margin: 0 0 14px; }
.alt .launch .cta { font-size: 1.0625rem; }

.alt footer {
  max-width: 46rem;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.alt footer .mode { margin: 0 auto 18px; }
.alt footer .entity { margin-top: 10px; }

@media (max-width: 620px) {
  .alt .pair .panes { grid-template-columns: minmax(0, 1fr); }
  .alt .chev { width: auto; height: 20px; transform: rotate(90deg); margin: 2px auto; }
}
@media (max-width: 720px) {
  .alt .facts dl { grid-template-columns: minmax(0, 1fr); }
  .alt .mark-line { flex-direction: column; gap: 4px; }
}

/* ---- "Pro Tools to REAPER" under the wordmark (Garrett, 13 Sep) ---- */
/* the masthead's parts sit close together, so the four lines read as one
   unit (Garrett, 15 Sep: "get all three of those elements closer together
   so they feel more like 1 unit"): the rule and the wordmark were 46 px
   under the descriptor and are now 27, and the line under ptx2rpp 8 px
   below it, now 4 */
.alt .mark-line { flex-direction: column; gap: 4px; }
.alt .mark-line .k-sub {
  font: 560 0.9375rem/1.2 var(--sans);
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---- surfacing on load (Garrett, 13 Sep: "a crossfade in with a gaussian
   blur type thing that makes it look like it came up from the water") ----

   One motion, three weights, in one short sequence down the top of the page:

     .surf       the marks -- mollusk, and ptx2rpp with its rule. Full
                 surfacing: out of a deep blur, fading in.
     .surf-soft  the words that belong to them -- the descriptor, the line
                 under ptx2rpp, the headline. The same move, shallower: less
                 blur, so they read as following the marks rather than
                 competing with them.
     .fade       the things that are not type -- the first screenshot pair,
                 the offer line. No blur at all: a blurred screenshot reads
                 as an image still loading, and blurring a large box costs
                 real frames. A plain fade.

   Nothing moves: no rise, the blur and the fade do it alone, and the fade
   is slower than the first version (Garrett, 13 Sep: "no rise and the fade
   on is a bit slower").

   Everything below the first pair is left alone: it is not on screen when
   the page opens, and a page that animates as you scroll turns into a show.
   Order (14 Sep): the marks, then the first screenshot pair, then the
   headline and offer. The headline starts about 2.3 s in.
   Reduced motion: none of it, everything simply there. */
/* The blur is finished at 65% of the way, and the fade carries on to the
   end (Garrett, 13 Sep: "I'm still getting a 'snap' in the blur animation
   toward the end"). In a GPU-composited browser the last sliver of a blur
   does not shrink smoothly to nothing -- the kernel steps down and then
   stops -- and that final step is the snap. Ending the blur while the
   letters are still fading in puts that step under partial transparency,
   where it does not read. */
@keyframes surface {
  from { opacity: 0; filter: blur(14px); }
  65%  { filter: blur(0); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes surface-soft {
  from { opacity: 0; filter: blur(7px); }
  65%  { filter: blur(0); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Slower and smoother (Garrett, 13 Sep). The curve is an exponential
   ease-out: most of the clearing happens early and the last pixel of blur
   takes a long, even time to go, so the letters settle into focus rather
   than arriving there. The old curve still had speed left at the end, and
   the last step from nearly clear to clear read as a snap. */
.alt .surf      { animation: surface 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.alt .surf-soft { animation: surface-soft 2.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.alt .fade      { animation: fade 1.3s cubic-bezier(0.33, 0.1, 0.25, 1) both; }
/* The masthead surfaces as ONE object (Garrett, 15 Sep: "mollusk / DAW
   conversion tool / ptx2rpp / Pro Tools to REAPER with the line all coming
   in at the same time"): the header itself carries .surf .s1 and its
   parts -- both marks, both lines of words and the gradient rule -- no
   longer animate separately, so .s2, .s3 and .s4 are unused. */
.alt .s1 { animation-delay: 0.10s; }
.alt .s2 { animation-delay: 0.32s; }
.alt .s3 { animation-delay: 0.52s; }
.alt .s4 { animation-delay: 0.78s; }
.alt .s5 { animation-delay: 0.90s; }
/* the headline and offer come up after the first screenshot pair (Garrett,
   14 Sep: "should come up after the screenshots") -- just after the REAPER
   pane has lifted in, alongside the caption. The headline, and the plate
   behind it, a second sooner than that (14 Sep: "come in about a second
   sooner"); the offer half a second sooner than it was ("the text below it
   come in about a half second sooner"). */
.alt .s6 { animation-delay: 1.25s; }
/* The headline plate used to surface over 4.6 s (14 Sep: "twice as long");
   since 15 Sep it comes up with the screenshots' own fade-and-lift instead
   (.fade-rise, 1.3 s, below), so no duration override is needed. */
.alt .s7 { animation-delay: 2.00s; }
@media (prefers-reduced-motion: reduce) {
  .alt .surf, .alt .surf-soft, .alt .fade { animation: none; }
}

/* The first screenshot pair arrives a piece at a time, with no blur, each
   piece fading in as it moves up: the Pro Tools pane, the triangle, the
   REAPER pane, then the caption (Garrett, 13 Sep: "come up 1 at a time",
   then "I actually want those screenshots to actually move up while fading
   on like before"). The marks and the headline above keep their motionless
   surfacing; only the screenshots rise.

   The lift uses the separate `translate` property, not `transform`: on a
   phone the triangle is turned to point down with transform: rotate(90deg),
   and animating transform would have overwritten that and left it pointing
   sideways. The triangle also fades only to its own resting 0.32. */
@keyframes fade-rise {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes fade-chev {
  from { opacity: 0; }
  to   { opacity: 0.32; }
}
.alt .fade-rise      { animation: fade-rise 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
/* the triangle fades in where it is: no movement, no blur (13 Sep) */
.alt .fade-chev { animation: fade-chev 1.0s cubic-bezier(0.33, 0.1, 0.25, 1) both; }
/* 0.4 s sooner than 13 Sep (Garrett, 14 Sep: "a bit sooner"); the REAPER
   pane follows the Pro Tools pane by a split second ("The second screenshot
   should come up a split second after the first"), the triangle between */
.alt .p1 { animation-delay: 0.55s; }
.alt .p2 { animation-delay: 0.70s; }
.alt .p3 { animation-delay: 0.85s; }
/* the caption comes up right behind the REAPER pane, 0.15 s after it (the
   panes' own spacing), and before the headline plate below at 1.25 s
   (Garrett, 15 Sep: "As soon as 'REAPER, after converting' comes up the
   text below it should come up. It should be before the rectangle
   below"; it had briefly waited for the panes to finish, at 2.15 s) */
.alt .p4 { animation-delay: 1.00s; }
/* the headline plate rides the same fade-and-lift (15 Sep); .fade-rise's
   shorthand above would reset the delay .s6 gave it, so the plate's start
   is restated at a higher specificity: 1.25 s, as .s6 */
.alt .fade-rise.s6 { animation-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
  .alt .fade-rise, .alt .fade-chev { animation: none; }
}

/* ---- the intro waits for the fonts, and the water ----

   Everything that animates on load is held at its first frame -- invisible,
   blurred -- until site.js has the page's fonts and has fitted the
   descriptor, then released in one frame. Without the hold, a slow
   connection let "mollusk" and its descriptor change font or size partway
   through the fade: the snap Garrett saw at the end. site.js releases it
   after 1.5 s regardless, so a font that never arrives never hides the page,
   and with scripting off nothing is held at all.

   Nothing moves (Garrett, 13 Sep: "It shouldn't physically move"), and
   for now there is no warp either ("Let's not worry about the wave
   animation for now"): the top of the page comes up by blur and fade
   alone. mollusk and its icon surface together as one mark (Garrett,
   13 Sep: "let's just go with uniform blur fade-on for now on mollusk +
   logo", after trying a right-to-left lean and a random letter-by-letter
   focus). */
.alt .surf, .alt .surf-soft, .alt .fade, .alt .fade-rise, .alt .fade-chev { animation-play-state: paused; }
.intro .alt .surf, .intro .alt .surf-soft, .intro .alt .fade,
.intro .alt .fade-rise, .intro .alt .fade-chev { animation-play-state: running; }
@media (scripting: none) {
  .alt .surf, .alt .surf-soft, .alt .fade, .alt .fade-rise, .alt .fade-chev { animation: none; }
}



/* The other half of the snap: when an animation ends, the browser can drop
   the element's compositing layer and re-draw its text with different
   antialiasing -- a visible crispening in the last frame. Keeping these
   elements on their own layer before, during and after means the text is
   drawn one way the whole time. Measured in a software renderer, the frame
   16 ms before the end and the finished page are already pixel-identical,
   so this cannot be confirmed here; it is the standard fix for the GPU
   case. */
.alt .surf, .alt .surf-soft { will-change: filter, opacity; }

/* ---- everything below the first screen animates on (Garrett, 13 Sep:
   "All of the other screenshots should animate on as well ... and so should
   the rest of the stuff in the website ... the same animation as the
   screenshots") ----

   Each group -- a screenshot pair, the facts, each list, the why line, the
   launch line, the footer -- plays from page open, released with the top of
   the page by .intro, not on scroll (Garrett, 14 Sep: "It shouldn't wait for
   me to scroll down to it"). site.js staggers the groups down the page after
   the first pair. Its pieces fade in and lift 14 px one after another, with
   no blur, exactly like the first pair. Triangles fade where they sit.

   Nothing is hidden until site.js has marked the page .rv-ready, so a
   browser that never runs the script shows everything; reduced motion and
   scripting-off show everything too. */
.rv-ready .alt [data-reveal] .rv {
  animation: fade-rise 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-play-state: paused;
}
.rv-ready .alt [data-reveal] .rv-chev {
  animation: fade-chev 1.0s cubic-bezier(0.33, 0.1, 0.25, 1) both;
  animation-play-state: paused;
}
.rv-ready.intro .alt [data-reveal] .rv,
.rv-ready.intro .alt [data-reveal] .rv-chev { animation-play-state: running; }
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .rv-ready .alt [data-reveal] .rv, .rv-ready .alt [data-reveal] .rv-chev { animation: none; }
}

/* Everything it carries, as a list in columns (Garrett, 14 Sep: "more of a
   list with 3 or 4 columns"). One thing per line with its teal dot in front,
   in the same walk-the-session order, flowing down each column and on to the
   next: four across on a wide screen, three, then two, then one on a phone.
   A line that wraps hangs under its own first word, and no line is split
   across two columns. "On its way" keeps its justified block. */
.alt .carries:not(.notyet) .run {
  column-count: 4;
  column-gap: 2.25rem;
  margin-top: 26px;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  text-align-last: auto;
}
.alt .carries:not(.notyet) .run span {
  display: block;
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.6em;
  break-inside: avoid;
}
.alt .carries:not(.notyet) .run span::first-letter { text-transform: uppercase; }
.alt .carries:not(.notyet) .run span::after { content: none; }
.alt .carries:not(.notyet) .run span::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 960px) { .alt .carries:not(.notyet) .run { column-count: 3; } }
@media (max-width: 720px) { .alt .carries:not(.notyet) .run { column-count: 2; } }
@media (max-width: 480px) { .alt .carries:not(.notyet) .run { column-count: 1; } }

/* ---- the headline on a black plate (Garrett, 14 Sep, audition: "a
   rectangular white box behind 'Your Pro Tools mix opens in REAPER.
   Sounding like it should.' and make its pattern look kind of like" a
   thin-line geometric wallpaper he pointed at; then "Maybe try making the
   box black and the lines white for that pattern?"; then "Make it more of
   a swirly water type pattern and make the lines teal", and while that was
   rendering, "Maybe try a wavy one"; then "can you make those lines more
   of a perfect sine wave?", and "I liked them staggered how you had them
   just with smoothness"; "Can you stagger them even more?") ----

   The pattern is headline-pattern.svg, drawn for this page: fifteen close
   rows of pure sine waves per tile (160 px period, 5.2 px amplitude), each
   row two fifteenths of a period behind the one above, so the stagger
   comes full circle twice by the tile's edge and repeats without a seam. Teal at about
   40% so the lines sit behind the headline instead of competing with it.
   (Tried first: curls breaking off the crests; waves with a second ripple
   drifting out of phase; pure sines all in step.) The plate is its own element because the headline
   paints its letters with a text-clipped gradient, so it cannot also carry
   a box. The plate and everything on it arrive as ONE object -- a single
   animation on the plate, nothing animated inside it (Garrett, 15 Sep:
   "The box itself and everything in it should be 1 object that fades/blurs
   in at once"). A blur was tried first and measured to blur box and words
   as one image, but the near-black box barely shows against the green
   while the bright words do, so the words read as blurring in on their
   own; then a plain 4.6 s fade; then "the same animation as the
   screenshots": the plate fades in and lifts 14 px (.fade-rise). In the
   words' usual dark-page inks. */
.alt .plate {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: clamp(20px, 3.2vw, 36px) clamp(18px, 4vw, 52px);
  /* a vignette over the lines (Garrett, 14 Sep: "a bit of a vignette effect
     on that background pattern", then "even more pronounced"): the plate's
     own black, clear only at the very middle and closing in fast, so the
     waves glow behind the words and are gone before the rim */
  background:
    radial-gradient(ellipse 64% 74% at 50% 50%, rgba(5, 7, 6, 0) 24%, rgba(5, 7, 6, 0.7) 66%, rgba(5, 7, 6, 1) 100%),
    url("headline-pattern.svg") repeat,
    #050706;
  background-size: 100% 100%, 320px 218px, auto;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 60px rgba(0, 0, 0, 0.45);
}
.alt .plate h1 { margin: 0; }

/* The offer line inside the plate, under the headline (Garrett, 15 Sep:
   "extend the bottom of the black box and raise 'Convert one of your
   sessions for free ...' to be inside of the box"). The plate grows to hold
   it; the line keeps its gray and its lit "free", and arrives with the
   plate (15 Sep). */
.alt .plate .offer { margin: 18px auto 0; }
.alt .plate { padding-bottom: clamp(24px, 3.6vw, 40px); }