/* sound-onion.com (#108): the living sea behind, the words in front. The sea is the login's (#105); the page
   scrolls over it, the water tinted only a little darker on the way down (#148), and the words stand on the
   panels' glass. Moving between the pages changes the words alone, never the sea (#149). */
@font-face { font-family: "Montserrat"; font-weight: 100 900; font-display: swap; src: url("/fonts/montserrat-latin.woff2") format("woff2"); }
:root {
  --sea: #081220; --deep: #040a13; --ink: #e6eef0; --muted: #93a9b0; --line: rgba(159, 230, 255, .14);
  --glow: #9fe6ff; --amber: #e8a04a; --amber-hi: #f0b062; --glass: rgba(8, 18, 32, .82);
  --head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --depth: 0;
}
* { box-sizing: border-box; }
/* The page scrolls inside the body, never the window: the sea and its wordmark are measured from the window
   (innerWidth, innerHeight), so a scrollbar taking width from the page, or a phone's address bar hiding on the
   way down, would move the wordmark under the reader. With the window still, the scrollbar sits over the sea. */
html { height: 100%; overflow: hidden; }
body { position: fixed; inset: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: none;
  scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--sea); color: var(--ink); font: 19px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { body { scroll-behavior: auto; } }

/* --- the sea: the picture, the live scene over it, the light, and a light tint on the way down --- */
.ground { position: fixed; inset: 0; background: var(--sea) url("/login_wide.webp") left center / cover no-repeat; }
@media (max-aspect-ratio: 1/1) { .ground { background-image: url("/login_tall.webp"); background-position: center top; } }
canvas#sea { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
html.shown canvas#sea { opacity: 1; }
.still-wordmark { opacity: 0; transition: opacity .45s ease-out; }
.still-wordmark.drawn { opacity: 1; }
.rays { position: fixed; inset: -20% 0 0 0; pointer-events: none; mix-blend-mode: screen; }
.ray { position: absolute; top: 0; width: 16vw; height: 120%; transform-origin: top center;
  background: linear-gradient(to bottom, rgba(140, 200, 225, .12), rgba(140, 200, 225, 0) 70%);
  filter: blur(18px); animation: shimmer 11s ease-in-out infinite alternate; }
.ray:nth-child(1) { left: 46%; transform: rotate(12deg); }
.ray:nth-child(2) { left: 62%; transform: rotate(5deg); animation-delay: -4s; animation-duration: 14s; }
.ray:nth-child(3) { left: 80%; transform: rotate(15deg); animation-delay: -8s; animation-duration: 9s; }
@keyframes shimmer { from { opacity: .3; } to { opacity: 1; } }
.deep { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: var(--deep); opacity: calc(var(--depth) * .25); }
@media (prefers-reduced-motion: reduce) { .ray { animation: none; } canvas#sea, .still-wordmark { transition: none; } }

/* everything the reader uses sits above the sea */
.bar, main, .foot { position: relative; z-index: 2; }

/* --- the bar: the name once the onion's own wordmark has scrolled away, and Log in, always in the corner --- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 3vw, 36px); transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
/* (at the top the bar is clear water, and only its links and Log in take a click, so what lies under its empty part,
   the switch on a phone, takes its own) */
html:not(.scrolled) .bar { pointer-events: none; }
html:not(.scrolled) .bar > :not(.mark) { pointer-events: auto; }
html.scrolled .bar { background: rgba(4, 10, 19, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.mark { font: 500 16px/1 var(--head); letter-spacing: .28em; text-transform: uppercase; text-decoration: none;
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
html.scrolled .mark { opacity: 1; pointer-events: auto; }
.login { font: 600 16px/1 var(--body); text-decoration: none; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(230, 238, 240, .35); background: rgba(8, 18, 32, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.login:hover { border-color: var(--ink); background: rgba(8, 18, 32, .7); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
/* how the fish look (#138): the sea's three looks, a small switch on the left of the first screen (#151), one above
   the other at its foot; it scrolls away with that screen, so the panels never pass over it (the body is its
   containing block and the scroller). Over the first screen's words (main, z-index 2), so it takes its clicks, and
   under the bar (4), which it slides beneath on a phone. Hidden until site.js has shown the kept one, so it never flips. */
.looks { position: absolute; left: clamp(12px, 2vw, 28px); top: calc(100vh - 24px); top: calc(100svh - 24px); transform: translateY(-100%);
  z-index: 3; display: flex; flex-direction: column; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4, 10, 19, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); visibility: hidden; }
html.js .looks { visibility: visible; }
.looks[hidden] { display: none; }
.looks button { font: 500 13px/1 var(--body); color: #cfdde1; background: transparent; border: 0; border-radius: 999px;
  padding: 6px 11px; cursor: pointer; opacity: .8; }
.looks button:hover { opacity: 1; color: var(--ink); }
.looks button[aria-pressed="true"] { opacity: 1; color: var(--ink); background: rgba(159, 239, 255, .14); }
/* (on a tall screen the words stand at the foot of the first screen, so the switch sits at its top left, across, and
   goes up under the bar as the page scrolls) */
@media (max-aspect-ratio: 1/1) { .looks { top: 10px; transform: none; left: 12px; flex-direction: row; border-radius: 999px; }
  .looks button { padding: 5px 8px; font-size: 12px; } .looks .long { display: none; } }
@media (max-width: 560px) { .login { white-space: nowrap; } .mark { min-width: 0; overflow: hidden; white-space: nowrap; } }

/* --- the hero: the onion and the wordmark are the scene's, on the left; the words are in the open water --- */
.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center end; padding: 96px 6vw 72px; }
.hero-text { width: min(560px, 38vw); position: relative; }
/* a pool of darker water behind the words, so an animal swimming past never takes a letter away */
.hero-text::before { content: ""; position: absolute; inset: -70px -90px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4, 10, 19, .6), rgba(4, 10, 19, 0)); }
@media (max-aspect-ratio: 1/1) {
  /* the onion stands at the top of a tall screen; the words sit in the dark water below it */
  .hero { place-items: end center; padding: 0 20px 5vh;
    background: linear-gradient(to bottom, transparent 42%, rgba(4, 10, 19, .78) 66%, rgba(4, 10, 19, .92)); }
  .hero-text { width: min(560px, 100%); }
  .hero h1 { font-size: clamp(28px, 7.4vw, 40px); }
  .hero .lede { margin-top: 14px; font-size: 18px; }
  .hero .actions { margin-top: 20px; }
  .hero .proof { margin-top: 18px; font-size: 15px; }
  .bar { padding: 8px 12px; }
  .login { padding: 8px 14px; font-size: 15px; }
}
h1, h2, h3 { font-family: var(--head); margin: 0; }
h1 { font-weight: 300; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1; letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(4, 10, 19, .8); }
.lede { margin: 22px 0 0; font-size: clamp(19px, 1.5vw, 23px); color: #cfdde1; text-shadow: 0 1px 16px rgba(4, 10, 19, .9); }
.actions { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cta { display: inline-block; font: 600 18px/1 var(--body); text-decoration: none; padding: 15px 26px; border-radius: 999px;
  background: var(--amber); color: #1a1206; border: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.cta:hover { background: var(--amber-hi); transform: translateY(-1px); }
.more { font-weight: 500; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(230, 238, 240, .4); padding-bottom: 2px; }
.more:hover { border-bottom-color: var(--ink); }
.proof { margin: 30px 0 0; font-size: 16px; color: var(--muted); letter-spacing: .02em; }

/* --- the panels: glass over the deepening sea, with open water between them --- */
.panel { width: min(1120px, calc(100% - 32px)); margin: 0 auto 22vh; padding: clamp(28px, 5vw, 64px);
  border-radius: 20px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
h2 { font-weight: 300; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.15; letter-spacing: -.005em; max-width: 22ch; }
h3 { font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }
.panel p { margin: 0; }
.panel > p { margin-top: 20px; max-width: 62ch; color: #cfdde1; }
.lede-s { color: var(--muted) !important; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.four, .three, .plans { display: grid; gap: clamp(20px, 3vw, 40px); margin-top: 44px !important; }
.four { grid-template-columns: repeat(4, 1fr); }
.three { grid-template-columns: repeat(3, 1fr); }
.plans { grid-template-columns: repeat(4, 1fr); }
.four li, .three li { border-top: 1px solid var(--line); padding-top: 18px; }
.four p, .three p, .plans p { margin-top: 10px; color: #c2d2d7; font-size: 18px; }
.three em { color: var(--amber); font-style: normal; font-weight: 500; }
.more-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 32px; margin-top: 48px !important;
  padding-top: 32px !important; border-top: 1px solid var(--line); }
.more-list h3 { font-size: 14px; }
.more-list p { margin-top: 6px; font-size: 17px; color: #c2d2d7; }
@media (max-width: 960px) { .four, .plans { grid-template-columns: repeat(2, 1fr); } .three { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .four, .plans { grid-template-columns: 1fr; } }

/* the product, shown not described */
.shot { margin: 40px 0 0; }
.shot img, .shot-slot { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.shot-slot { display: grid; place-items: center; color: var(--muted); font-size: 16px; letter-spacing: .06em;
  background: repeating-linear-gradient(135deg, rgba(159, 230, 255, .04) 0 14px, transparent 14px 28px), #0a1726; }

.fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px !important; }
.fields li { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(159, 230, 255, .04); font-size: 17px; color: #c2d2d7; }
.fields b { font-weight: 600; color: var(--ink); }
.fields li:first-child { border-color: rgba(159, 230, 255, .45); }

.plans li { padding: 24px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 10, 19, .45); }
.plans .price { font: 400 28px/1.2 var(--head); color: var(--ink) !important; margin-top: 12px !important; white-space: nowrap; }
.plans .price small { display: block; margin-top: 4px; font: 16px/1.2 var(--body); color: var(--muted); }

.close { text-align: center; }
.close h2, .close > p { margin-left: auto; margin-right: auto; }
.close .actions { justify-content: center; }
.close .addr { margin-top: 14px !important; font-size: 17px; color: var(--muted) !important; }
@media (max-width: 560px) { .panel { margin-bottom: 12vh; } }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px clamp(16px, 3vw, 36px) 32px;
  color: var(--muted); font-size: 16px; }

/* --- arriving: each panel rises into place once, as it comes into view (not for reduced motion, not without script) --- */
html.js .panel { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
html.js .panel.seen { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.hero-text > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
html.js .hero-text > * { animation: none; }             /* (with script the way in brings them, below) */
.hero-text > :nth-child(2) { animation-delay: .08s; } .hero-text > :nth-child(3) { animation-delay: .16s; } .hero-text > :nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html.js .panel { opacity: 1; transform: none; transition: none; } .hero-text > * { animation: none; } }

/* --- Log in: the site's own address --- */
.login-box { width: min(420px, calc(100% - 32px)); padding: 0; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(12, 22, 34, .96); color: var(--ink); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.login-box::backdrop { background: rgba(4, 10, 19, .55); backdrop-filter: blur(4px); }
.login-box form { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; }
.login-box h2 { font-size: 24px; margin-bottom: 6px; }
.login-box label { font-size: 16px; color: #b9cbd0; }
.site-field { display: flex; align-items: center; border: 1px solid #33474d; border-radius: 8px; background: #0b1214; overflow: hidden; }
.site-field:focus-within { border-color: var(--amber); outline: 2px solid var(--amber); outline-offset: 1px; }
.site-field input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: transparent; border: 0; padding: 11px 4px 11px 12px; outline: none; text-align: right; }
.site-field span { padding: 11px 12px 11px 0; color: var(--muted); white-space: nowrap; }
.login-box .hint { margin: 0; font-size: 16px; color: var(--muted); }
.login-box .hint i { color: var(--ink); font-style: normal; }
.nw { white-space: nowrap; }
.login-box .row { margin: 10px 0 0; display: flex; gap: 10px; align-items: center; }
.plain { font: inherit; font-size: 17px; color: var(--muted); background: transparent; border: 0; cursor: pointer; padding: 10px; }

/* --- the bar's pages: a few plain words, put away on a phone (the footer lists them too) --- */
.bar nav { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto; margin-right: 22px; }
.bar nav a { font-size: 16px; text-decoration: none; color: #cfdde1; opacity: .85; }
.bar nav a:hover, .bar nav a[aria-current="page"] { opacity: 1; color: var(--ink); }
.bar nav a[aria-current="page"] { border-bottom: 1px solid var(--amber); }
@media (max-width: 900px) { .bar nav { display: none; } }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot nav a { text-decoration: none; color: var(--muted); }
.foot nav a:hover { color: var(--ink); }
.foot { flex-wrap: wrap; }

/* a link on to a page with more */
.on { display: inline-block; margin-top: 30px; font-weight: 600; text-decoration: none; color: var(--amber); }
.on:hover { color: var(--amber-hi); }
.on::after { content: " →"; }

/* the gallery: one large view and the others beside it */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.shot img { height: auto; aspect-ratio: auto; }
figcaption { margin-top: 8px; font-size: 16px; color: var(--muted); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* draft: what is not yet confirmed (partners, a partnership) shows on a trial on this machine and on staging only */
[data-draft] { display: none !important; }
html.draft [data-draft] { display: revert !important; position: relative; outline: 2px dashed rgba(232, 160, 74, .7); outline-offset: 8px; }
html.draft [data-draft]::before { content: "Draft: shown on a trial and on staging until confirmed"; display: inline-block; margin: 0 0 10px; position: static;
  font: 600 13px/1 var(--body); color: #1a1206; background: var(--amber); padding: 5px 10px; border-radius: 999px; }
.soon { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font: 600 13px/1.5 var(--body);
  letter-spacing: .02em; color: var(--amber); border: 1px solid rgba(232, 160, 74, .55); vertical-align: 2px; }

.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 36px !important; }
.partners li { padding: 24px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 10, 19, .45); }

/* --- the pages behind the home page open as it does: the onion and the title on the sea, the page's heading in
   the open water beside them (.hero) --- */
.panel h2 + p, .panel h2 + .lede-s { margin-top: 18px; }
.panel h3 + p { margin-top: 10px; }
.panel .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 40px; margin-top: 36px !important; }
.panel .cols li { border-top: 1px solid var(--line); padding-top: 16px; }
.panel .cols p { color: #c2d2d7; font-size: 18px; margin-top: 8px; }
.panel table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 17px; }
.panel th, .panel td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.panel th { font: 600 14px/1.3 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--glow); }
.panel td { color: #c2d2d7; }
.panel code, .panel pre { font: 15.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #dbe9ec; }
.panel code { background: rgba(159, 230, 255, .07); padding: 1px 6px; border-radius: 5px; }
.panel pre { margin: 24px 0 0; padding: 20px 22px; border-radius: 12px; background: rgba(2, 6, 12, .7); border: 1px solid var(--line); overflow-x: auto; }
.panel pre code { background: none; padding: 0; }
.table-wrap { overflow-x: auto; }
.plans.five { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* beta: said once, plainly, above every page's headline */
.beta { margin: 0 0 18px; font-size: 17px; color: #cfdde1; text-shadow: 0 1px 12px rgba(4, 10, 19, .9); }
.beta span { display: inline-block; margin-right: 8px; padding: 3px 11px; border-radius: 999px; font: 600 14px/1.4 var(--body);
  letter-spacing: .06em; text-transform: uppercase; color: #1a1206; background: var(--glow); vertical-align: 1px; }

/* the fields: a card each; where we are today marked, and the fields we are taking it into next tagged so, each said in a word so it reads as a label, not a choice */
.fieldcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 36px !important; }
.fieldcards li { padding: 24px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 10, 19, .45); }
.fieldcards p { margin-top: 10px; color: #c2d2d7; font-size: 18px; }
.fieldcards li.lead { border-color: rgba(159, 230, 255, .45); }
.fieldcards .tag.next { border-color: rgba(232, 160, 74, .5); color: var(--amber); }
.fieldcards .tag { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(159, 230, 255, .45); color: #9fe6ff; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* how it works: four steps, then the other way in */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 36px !important; padding: 0; }
.steps li { padding: 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 10, 19, .45); }
.steps p { margin-top: 8px; color: #c2d2d7; font-size: 18px; }
.or { margin-top: 24px !important; padding: 18px 22px; border-radius: 14px; border: 1px dashed rgba(159, 230, 255, .35); color: #cfdde1 !important; max-width: none !important; }

/* --- moving between the pages (#149): the old words fade out wholly, then the new page fades in; the sea, the bar, the switch and the
   footer stay as they are (site.js) --- */
main { transition: opacity .4s ease-out; }
main.leaving { opacity: 0; transition: opacity .28s ease-in; }
main.arriving { opacity: 0; }
main h1:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { main { transition: none; } }

/* a loop told in steps (models.html) */
.panel ol.loop { margin: 18px 0 0; padding-left: 1.4em; max-width: 62ch; color: #cfdde1; }
.panel ol.loop li + li { margin-top: 6px; }

/* partners (#155): each partner's own logo on a white badge, linking to their site; a draft until both confirm */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 40px; margin-top: 36px !important; }
.badge { display: flex; align-items: center; justify-content: center; height: 190px; padding: 26px 34px; border-radius: 16px; background: #fff;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .35); transition: transform .2s ease, box-shadow .2s ease; }
.badge:hover { transform: translateY(-2px); box-shadow: 0 18px 54px rgba(0, 0, 0, .45); }
.badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.badges h3 { margin-top: 22px; }
.badges p { margin-top: 8px; color: #c2d2d7; font-size: 18px; }
.badges .on { margin-top: 12px; }
.badges.small { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); }
.badges.small .badge { height: 130px; padding: 18px 24px; }
.on.out::after { content: " ↗"; }
/* (a draft link in the bar or the footer is marked by its outline alone, not the draft label) */
html.draft nav a[data-draft] { outline-offset: 4px; }
html.draft nav a[data-draft]::before { content: none; }

/* more below (#156): at the foot of every page's first screen, a pill with a drop of water falling inside it; as the
   drop lands, rings ripple out from the pill like a drip on still water. It fades as the page goes down. */
.hero { position: relative; }
.down { position: absolute; left: 50%; bottom: 30px; translate: -50% 0; display: block; width: 22px; height: 44px;
  opacity: calc(.95 - var(--depth) * 5); }
.down i { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; border: 1.5px solid rgba(223, 247, 255, .7);
  background: rgba(8, 18, 32, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(159, 230, 255, .25), inset 0 0 10px rgba(159, 230, 255, .12); transition: border-color .2s ease; }
/* the drop: it gathers at the top, falls, and is gone into the water at the foot */
.down i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 6px; height: 9px; margin-left: -3px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #dff7ff; box-shadow: 0 0 8px 1px rgba(159, 230, 255, .9);
  animation: drip 2.4s cubic-bezier(.55, 0, .8, .35) infinite; }
/* the ripples: two rings spreading from the pill as the drop lands, one just after the other */
.down::before, .down::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; border: 1px solid rgba(159, 230, 255, .7); opacity: 0; pointer-events: none;
  animation: ripple 2.4s cubic-bezier(.2, .6, .35, 1) 1.32s infinite; }
.down::after { animation-delay: 1.62s; }
.down:hover i { border-color: #fff; }
html.scrolled .down { visibility: hidden; }
@keyframes drip { 0% { transform: translateY(0) scale(.4); opacity: 0; } 18% { transform: translateY(0) scale(1); opacity: 1; }
  55% { transform: translateY(22px) scale(1, 1.15); opacity: 1; } 60%, 100% { transform: translateY(25px) scale(1.6, .2); opacity: 0; } }
@keyframes ripple { 0% { transform: scale(.7); opacity: .85; } 100% { transform: scale(2.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .down i::after { animation: none; transform: translateY(11px); } .down::before, .down::after { animation: none; } }
@media (max-aspect-ratio: 1/1) { .hero { padding-bottom: calc(5vh + 84px); } .down { bottom: 18px; } }


/* --- the way in (#187): SOUND ONION alone on the dark water, then the sea and the onion behind it with the bar,
   then the page's overview, its words rising into place (site.js). Held from the first paint, so nothing
   shows out of turn; without script the page simply shows whole after a second and a half. --- */
body { animation: shown .3s ease-out 1.5s both; }
html.js body { animation: none; }
@keyframes shown { from { opacity: 0; } }
html.js:not(.s-sea) :is(.ground, .rays, .bar, .looks, .foot, .down) { opacity: 0; }
html.js.s-sea :is(.ground, .rays, .bar, .looks, .foot, .down) { animation: appear .5s ease-out backwards; }
html.js:not(.s-words) main { visibility: hidden; }
@keyframes appear { from { opacity: 0; } }
/* the words: each rises a few pixels into place as it fades in (its delay set by site.js); the beta line and the
   buttons wait for them, and come up as they end */
html.js main:not(.typed) .hero-text > :not(h1):not(.lede) { opacity: 0; }
html.js .hero-text > :not(h1):not(.lede) { transition: opacity .3s ease-out; }
.word { display: inline-block; animation: word .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes word { from { opacity: 0; transform: translateY(.35em); } }
@media (prefers-reduced-motion: reduce) { html.js.s-sea :is(.ground, .rays, .bar, .looks, .foot, .down) { animation: none; } }

/* --- a larger window (#191): the words, the panels, the bar and the footer grow with it in proportion, as the sea, the
   onion and the name do, from a window 1440 wide up to 1.7 times (site.js sets --z); the first screen stays the
   window's height --- */
main, .bar, .foot { zoom: var(--z, 1); }
.hero { min-height: calc(100vh / var(--z, 1)); min-height: calc(100svh / var(--z, 1)); }
/* (on a wide screen the words keep their column of the window, right of the onion, whatever the zoom) */
@media (min-aspect-ratio: 1/1) {
  .hero { padding-left: calc(6vw / var(--z, 1)); padding-right: calc(6vw / var(--z, 1)); }
  .hero-text { width: min(560px, calc(38vw / var(--z, 1))); }
  /* the switch too, still at the foot of the first screen and its side */
  .looks { zoom: var(--z, 1); top: calc((100svh - 24px) / var(--z, 1)); left: calc(clamp(12px, 2vw, 28px) / var(--z, 1)); }
}