/* Hallmark · shape: one pinned scene, Cash App's three-column hero; each scroll snaps a step and the copy rolls in place beside the still phone · genre: playful · theme: custom · job: sign up · idea: "you are inside WhatsApp with Wayla; the phone stands in the giant ω and its chat changes as you scroll" · vibe: "a friend a few years ahead, texting back"
 * paper: oklch(99.4% 0.002 85) white · accent: oklch(66% 0.15 295) · field: oklch(76% 0.11 295) lilac, the phone rim and the ω · display: Rethink Sans 800 · body: Figtree · hero: head left, a realistic phone running WhatsApp centred and dropping off the fold, lede and action right · nav: the ω icon top left and a quiet log in top right, both outside the phone column, by request · footer: one ink line, the mark, beta and operator line, account and legal links · imagery: the product built (WhatsApp in a phone), no photographs · signature: a lilac-rimmed phone standing in the giant ω, WhatsApp open on Wayla, the chat changing per moment
 * axes: light/grotesk-heavy/chromatic-violet · posture: committed (white ground, lilac rim and mark) · contrast: pass · fold: pass · redesign: full · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: P, a scroll story can turn into a feature tour; each moment is one exchange the bot really has, in its own voice */
/* Hallmark · waive 47b · one phone, WhatsApp open on Wayla inside it is the product · the user asked for Cash App's phone-in-the-centre format, inside WhatsApp */
/* Hallmark · waive 79 · the phone fills the hero and drops past the fold; the linter measures only the text columns beside it · the phone is the hero's visual */
/* Hallmark · waive 59 · five panels share one pinned scene, so no gap exists between them · the user asked that the page move and nothing scroll past */
/* Hallmark · waive 24b · bubble padding 6/8/7/9px and tail offsets inside the phone · these are WhatsApp's own bubble metrics, matched so the chat reads as the real app */
/* Hallmark · dismissed F4 · Log in is filled with the page colour so it masks Start texting while that button slides out from behind it; it still reads as an outline */
/* Hallmark · dismissed 77 · the user asked for the Cash App format, a pinned phone and four moments, then the footer */
@import url("./site.css");

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bar__actions { --spring: linear(0, 0.03 12%, 0.09 24%, 0.2 34%, 0.5 42%, 0.86 50%, 1.06 58%, 1.08 63%, 1.02 72%, 0.995 82%, 1); }
.bar__actions.is-splitting { filter: url(#goo); }
.js .bar__actions .btn--quiet { position: relative; z-index: 1; transition: transform 0.8s var(--ease-out), opacity 0.3s var(--ease-out), visibility 0s, background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); transition: transform 1.1s var(--spring), opacity 0.3s var(--ease-out), visibility 0s, background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.js .btn--nav { position: absolute; right: 0; top: 0; visibility: hidden; clip-path: inset(0 0 0 calc(100% - 44px) round 22px); transition: clip-path 0.7s var(--ease-out), visibility 0s linear 0.7s, background-color var(--dur-short) var(--ease-out); transition: clip-path 1.1s var(--spring), visibility 0s linear 1.1s, background-color var(--dur-short) var(--ease-out); }
.js .btn--nav span { display: inline-block; opacity: 0; transform: translateX(10px); transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out); }
.js.is-past-hero .btn--nav { visibility: visible; clip-path: inset(0 round 22px); transition-delay: 0.05s, 0s, 0s; }
.js.is-past-hero .btn--nav span { opacity: 1; transform: none; transition: opacity 0.4s var(--ease-out) 0.55s, transform 0.6s var(--ease-out) 0.55s; }
.js.is-past-hero .bar__actions .btn--quiet { transform: translateX(calc(-1 * (var(--cta, 140px) + var(--space-xs)))); }
@media (max-width: 40rem) { .js.is-past-hero .bar__actions .btn--quiet { transform: none; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.3s, 0s, 0s; } .bar__actions.is-splitting { filter: none; } }
@media (prefers-reduced-motion: reduce) { .js .bar__actions .btn, .js .btn--nav span { transition: none; } }

.scene__grid { --gap: clamp(var(--space-2xl), 7vw, var(--space-4xl)); container-type: inline-size; --col: calc((100cqi - var(--phone-w) - 2 * var(--gap)) / 2); max-width: 1600px; padding-inline: clamp(var(--space-lg), 7vw, var(--space-4xl)); height: 100%; display: grid; grid-template-rows: 100%; grid-template-columns: minmax(0, 1fr) var(--phone-w) minmax(0, 1fr); column-gap: var(--gap); }

.stage { grid-column: 2; grid-row: 1; align-self: start; margin-top: var(--phone-top); height: var(--phone-h); position: relative; z-index: var(--z-raised); }
.stage__mark { position: absolute; left: 50%; top: 26%; width: calc(var(--phone-w) + 1.7 * var(--gap)); height: auto; transform: translate(-50%, -50%); color: var(--color-field); z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage__mark > path { stroke-dasharray: 1 1.2; animation: draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) 1.3s both; }
  @keyframes draw { from { stroke-dashoffset: 1.08; } to { stroke-dashoffset: 0; } }
}


.stage { --lift: 0px; }
.stage__mark { transform: translate(-50%, -50%) rotate(calc(var(--n, 0) * -3deg)); transition: transform 1.2s var(--ease-out); }
.phone { transition: transform 0.9s var(--ease-out); }
.stage.is-away .phone { transform: translateY(58%) scale(0.94); }
.notes { position: absolute; left: 50%; top: 17%; width: min(calc(var(--phone-w) * 1.18), 92vw); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-sm); z-index: 2; pointer-events: none; }
.note { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3xs) var(--space-sm); align-items: center; padding: var(--space-md); border-radius: 26px; background: var(--wa-in); color: var(--wa-ink); font-family: var(--font-ui); font-size: max(15px, calc(var(--phone-w) * 0.045)); line-height: 1.3; letter-spacing: -0.01em; box-shadow: 0 1px 2px var(--phone-shadow-1), 0 24px 48px -16px var(--phone-shadow-2); }
.js .note { opacity: 0; transform: translateY(-40px) scale(0.96); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out); }
.js .stage.is-away .note { opacity: 1; transform: none; transition-delay: calc(0.45s + var(--i) * 1.1s); }
.note svg { grid-row: span 2; width: max(40px, calc(var(--phone-w) * 0.12)); height: auto; color: var(--color-ink); }
.note b { font-weight: 600; }
.note { position: relative; background: var(--glass-fill); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-edge), inset 0 -12px 24px -16px var(--glass-shade), 0 1px 2px var(--phone-shadow-1), 0 24px 48px -16px var(--phone-shadow-2); }
.note::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, var(--glass-sheen), var(--glass-clear) 38%); pointer-events: none; }
.note > * { position: relative; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .note { background: var(--wa-in); } }
.note small { font-size: 0.8em; color: var(--wa-meta); white-space: nowrap; }
.note span { grid-column: 2 / -1; }
html:not(.js) .notes { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .phone { animation: surface 1.3s var(--ease-out) 0.1s backwards; }
  .panel[data-panel="0"] > * { animation: rise 1s var(--ease-out) backwards; }
  .panel[data-panel="0"] > :first-child { animation-delay: 0.3s; }
  .panel[data-panel="0"] > :last-child { animation-delay: 0.5s; }
  .bar { animation: fade 0.8s var(--ease-out) 0.6s backwards; }
  .stage.is-shift { animation: dip 0.9s var(--ease-out); }
  .glint { fill: var(--color-field-deep); transform-box: fill-box; transform-origin: center; animation: glint 6.3s ease-in-out infinite backwards; }
  @keyframes glint { 0%, 14%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 7% { transform: scale(1) rotate(45deg); opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(60px); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes surface { from { transform: translateY(70svh); } }
  @keyframes dip { 40% { transform: translateY(14px); } }
}

html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
.story { position: relative; height: calc(var(--steps, 5) * 100svh); }
.snaps { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(var(--steps, 5), 100svh); pointer-events: none; }
.snaps span { scroll-snap-align: start; scroll-snap-stop: always; }
.foot { scroll-snap-align: end; }
.scene { position: sticky; top: 0; height: 100svh; overflow: clip; }

.panel { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: center; align-content: center; padding-top: var(--phone-top); z-index: var(--z-base); pointer-events: none; transform: translateY(100%); transition: transform 0.9s var(--ease-out); }
.panel.is-active { transform: none; }
.panel.is-past { transform: translateY(-100%); }
.panel > * { pointer-events: auto; }
html:not(.js) .story { height: auto; }
html:not(.js) .scene { position: relative; height: auto; overflow: visible; }
html:not(.js) .scene__grid { grid-template-rows: none; }
html:not(.js) .panel { transform: none; min-height: 70svh; }
html:not(.js) .panel[data-panel="1"] { grid-row: 2; }
html:not(.js) .panel[data-panel="2"] { grid-row: 3; }
html:not(.js) .panel[data-panel="3"] { grid-row: 4; }
html:not(.js) .panel[data-panel="4"] { grid-row: 5; }
html:not(.js) .panel[data-panel="5"] { grid-row: 6; }
html:not(.js) .panel[data-panel="6"] { grid-row: 7; }
html:not(.js) .stage { grid-row: 1 / span 7; position: sticky; top: var(--space-xl); }

.panel__left { grid-column: 1; }
.panel__right { grid-column: 3; }
@media (min-width: 60.0625rem) {
  .panel__left { translate: 0 var(--l, 0); }
  .panel__right { translate: 0 var(--r, 0); }
  .panel[data-panel="0"] { --l: -9svh; --r: 7svh; }
  .panel[data-panel="1"] { --l: 11svh; --r: -13svh; }
  .panel[data-panel="2"] { --l: -15svh; --r: 4svh; }
  .panel[data-panel="3"] { --l: 13svh; --r: -6svh; }
  .panel[data-panel="4"] { --l: -12svh; --r: 12svh; }
  .panel[data-panel="5"] { --l: 8svh; --r: -14svh; }
  .panel[data-panel="6"] { --l: -10svh; --r: 10svh; }
}
div.panel__left, .panel__right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
h1.panel__left { font-size: calc(var(--col) / 5.1); }
.panel h2 { font-size: calc(var(--col) / 5.6); }
.panel p:not(.hero__note) { font-size: max(var(--text-lead), calc(var(--col) / 16)); line-height: 1.4; }
.hero__note { font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }


@media (prefers-reduced-motion: reduce) { .btn, .wa__track, .panel, .phone, .note, .stage__mark { transition: none; } .js .stage.is-away .note { transition-delay: 0s; } }

@media (max-width: 60rem) {
  :root { --phone-w: min(272px, 70vw); --phone-top: max(52svh, 400px); }
  .scene__grid { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .stage { grid-column: 1; justify-self: center; }
  .stage__mark { width: calc(var(--phone-w) + var(--space-xl)); }
  .panel { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding-top: calc(88px + var(--space-xs)); gap: var(--space-md); }
  .panel__left, .panel__right { grid-column: 1; }
  div.panel__left, .panel__right { gap: var(--space-sm); }
  h1.panel__left { font-size: clamp(2.25rem, 9.5vw, 3rem); }
  .panel h2 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .panel p:not(.hero__note) { font-size: var(--text-md); }
  .foot__line { flex-basis: 100%; }
  .notes { top: -22svh; }
  html:not(.js) .stage { grid-row: 1; position: relative; top: 0; }
  html:not(.js) .panel { grid-row: auto; min-height: 0; }
}