/* heyorb.ai sections, in page order (the 6,000 thoughts are their own scene, scene.css): how it
   works (the real app), the scene to try, the founder's note, questions (privacy is one of
   them), claim your star, and the footer logo made of stars. No frames: a scene is a piece
   of the sky. */
.sec { position: relative; padding-top: clamp(104px, 13vw, 176px); }
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 4.4vw, 56px); }
.h2 { margin: 0; max-width: 14em; font: 700 var(--t-head)/1.05 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.lead { margin: 0; max-width: 30em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* ---------- how it works: three real screens. Standing still, three phones in a row.
   With motion (story.js), one phone stays in place while the page scrolls through the
   three steps, and a star travels down the list with you. */
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.step { display: grid; justify-items: start; align-content: start; gap: 10px; }
.step .phone { --pw: clamp(200px, 20vw, 264px); margin-bottom: 18px; }
.step-copy { display: grid; gap: 10px; }
.step h3 { margin: 0; font: 700 var(--t-big)/1.15 var(--f-display); letter-spacing: -0.02em; }
.step .n { margin-right: .55em; font-weight: 500; color: var(--ink-3); }
.step p { margin: 0; max-width: 23em; color: var(--ink-2); text-wrap: pretty; }
.steps-note { margin-top: clamp(28px, 3.4vw, 44px); font-size: var(--t-fine); }
.story-dots { display: none; }

/* ---------- scenes: an orb, a sky of stars, and the stars that fly between them */
.stage { position: relative; isolation: isolate; height: clamp(660px, 56vw, 740px); touch-action: pan-y; }
.stage.can-grab, .claim.can-grab { cursor: grab; } .stage.grabbing, .claim.grabbing { cursor: grabbing; }
.stage > canvas, .claim > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.st-map { z-index: 0; } .st-orb { z-index: 1; pointer-events: none; } .st-fly { z-index: 4; pointer-events: none; }
.st-ui { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; justify-items: start; }
/* the examples: spoken lines, not fields. A voice mark, then the words; said, the words
   light up one by one and the mark moves (talk.js) */
.says { display: flex; flex-wrap: wrap; gap: 8px; }
.say { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 18px 10px 15px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; background: rgba(255, 255, 255, .035); color: var(--ink); font: 400 var(--t-small)/1.3 var(--f-text); text-align: left; white-space: nowrap; cursor: pointer; transition: border-color var(--touch), background-color var(--touch), opacity var(--ui), transform var(--ui) var(--spring); }
.say:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); }
.say:active { transform: scale(.97); }
.say:disabled:not(.speaking) { opacity: .45; cursor: default; }
.say:disabled { cursor: default; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; flex: none; }
.wave i { width: 2px; height: 14px; border-radius: 1px; background: var(--ink-2); transform: scaleY(.4); transition: background-color var(--ui) var(--ease); }
.wave i:nth-child(2) { transform: scaleY(.85); } .wave i:nth-child(3) { transform: scaleY(.6); } .wave i:nth-child(4) { transform: scaleY(.3); }
.say.speaking .wave i { background: var(--ember-hi); animation: talking .46s ease-in-out infinite alternate; }
.say.speaking .wave i:nth-child(2) { animation-delay: -.3s; } .say.speaking .wave i:nth-child(3) { animation-delay: -.12s; } .say.speaking .wave i:nth-child(4) { animation-delay: -.38s; }
@keyframes talking { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.say .w { transition: color .16s var(--ease); }
.say.speaking .w { color: var(--ink-3); }
.say.speaking .w.said { color: var(--ink); }
.say-t.gone, .say-t.gone .w { color: transparent; }

/* your own thought: one field with the send button inside it, as in the app */
.composer { display: flex; align-items: center; gap: 8px; width: min(100%, 520px); height: 54px; padding: 5px 5px 5px 20px; border: 1px solid var(--line-hi); border-radius: 999px; background: var(--field); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color var(--touch), background-color var(--touch); }
.composer:hover { border-color: rgba(255, 255, 255, .3); }
.composer:focus-within { border-color: var(--ink); background: rgba(255, 255, 255, .08); }
.composer .field, .composer .field:hover, .composer .field:focus { height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--deep-ink); cursor: pointer; transition: background-color var(--touch), transform var(--ui) var(--spring), opacity var(--touch); }
.send:hover { background: #fff; }
@media (hover: hover) { .send:hover { transform: scale(1.06); } }
.send:active { transform: scale(.92); transition-duration: var(--touch), .12s, var(--touch); }
.send svg { display: block; }
/* the microphone: there only where the browser can record (listen.js) */
.mic { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--touch), background-color var(--touch), opacity var(--touch); }
.mic:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
.mic svg { display: block; }
.mic .i-stop, .mic[data-state="listening"] .i-mic { display: none; }
.mic[data-state="listening"] .i-stop { display: block; }
.mic[data-state="listening"] { color: var(--deep-ink); background: var(--ink); }
.mic[data-state="listening"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(242, 241, 237, .5); animation: hearing 1.4s var(--ease) infinite; }
.mic:disabled { opacity: .55; cursor: progress; }
@keyframes hearing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ---------- the founder's note reads like a letter: one column, the greeting above it.
   The questions keep two columns, so the two never look alike. */
.letter-wrap { display: grid; gap: clamp(20px, 2.8vw, 32px); }
.split { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.letter { display: grid; gap: 18px; max-width: 33em; font-size: var(--t-lead); line-height: 1.6; }
.letter p { margin: 0; text-wrap: pretty; }
.sig { padding-top: 8px; font: 600 var(--t-lead)/1.3 var(--f-display); letter-spacing: -0.01em; }
.sig span { display: block; margin-top: 2px; font: 400 var(--t-small)/1.4 var(--f-text); letter-spacing: 0; color: var(--ink-2); }
.faq { max-width: 720px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; font: 600 var(--t-lead)/1.3 var(--f-display); letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 13px; height: 13px; color: var(--ink-2); background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform var(--ui) var(--ease); }
.faq details[open]:not([data-closing]) summary::after { transform: rotate(45deg); }
.faq-a { overflow: hidden; }
.faq summary:hover::after { color: var(--ink); }
.faq p { margin: 0; padding: 0 40px 24px 0; max-width: 35em; color: var(--ink-2); text-wrap: pretty; }

/* ---------- claim your star */
.claim { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 80px); align-items: center; touch-action: pan-y; }
.claim-copy { position: relative; z-index: 3; display: grid; gap: 18px; justify-items: start; }
.claim-copy .join { margin-top: 10px; }
.claim-sky { position: relative; height: clamp(400px, 42vw, 540px); }

/* ---------- footer: the logo made of stars, cut by the bottom of the page */
.foot { position: relative; margin-top: clamp(96px, 12vw, 168px); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; font-size: var(--t-small); color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot-links a { color: inherit; }
#footStars { display: block; width: 100%; height: calc(16.4vw + 64px); touch-action: pan-y; }
/* no WebGL: the logo itself, cut by the bottom of the page the same way */
#footStars.swarm-off { background: url("../img/heyorb-wordmark.svg") center top 64px / 92% auto no-repeat; }

@media (max-width: 899px) {
  .split, .claim { grid-template-columns: minmax(0, 1fr); }
  .split { gap: 26px; }
  /* on a phone the form comes first and the orb under it, so the form is on the screen
     the moment you arrive (the top bar's button brings you here) */
  .claim-sky { height: 320px; }
  .faq p { padding-right: 0; }
}
@media (max-width: 759px) {
  .steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 20px; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding-inline: var(--gl) var(--gr); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gl); scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: start; }
  .step .phone { --pw: min(60vw, 250px); }
  /* The whole scene on one screen, the sky, the orb and the controls together, so a
     thought is seen landing. The examples are one row that a finger slides. */
  .stage { height: min(calc(100vh - var(--bar) - 24px), 700px); height: min(calc(100svh - var(--bar) - 24px), 700px); min-height: 460px; }
  .st-ui { justify-items: stretch; }
  .says { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 2px var(--gr) 2px var(--gl); scroll-padding-inline: var(--gl); scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gl), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gl), #000 calc(100% - 32px), transparent); }
  .says::-webkit-scrollbar { display: none; }
  .say { flex: none; max-width: min(78vw, 300px); white-space: normal; scroll-snap-align: start; }
  .composer { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .say, .say .w, .send, .mic, .faq summary::after { transition: none !important; }
  .mic[data-state="listening"]::after { animation: none; }
  .say.speaking .wave i { animation: none; }
}

/* ---------- privacy and 404 pages */
.legal { padding-block: calc(var(--bar) + clamp(40px, 7vw, 88px)) 40px; display: grid; gap: 14px; justify-items: start; }
.legal > * { max-width: 760px; }
.legal h2 { margin: 26px 0 0; font: 700 var(--t-lead)/1.25 var(--f-display); letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin: 0; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal .fine { font-size: var(--t-fine); }
.legal.lost-page { min-height: 70vh; align-content: center; justify-items: start; }
.foot-plain { margin-top: 40px; padding-block: 24px; }