waits 180ms
longer than
. */
.reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
/* A slightly more characterful entrance: tiny rotation as the card
settles. Used on inset cards inside hero sections where the page
benefits from a less mechanical movement. */
.reveal-tilt {
opacity: 0;
transform: translateY(28px) rotate(-1.2deg);
transition:
opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal-tilt.in { opacity: 1; transform: none; }
/* ─── Surface hover-lift ─────────────────────────────────────
Cards rise a hair and the shadow deepens. Matched timing to the
reveal so hover feels like an extension of the same motion
vocabulary, not a separate library. */
.surface, .surface-deep {
transition:
transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.surface:hover {
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 18px 38px rgba(0, 0, 0, 0.08);
}
.surface-deep:hover {
transform: translateY(-4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 30px 60px rgba(0, 0, 0, 0.12);
}
/* ─── Nav shadow swell on scroll ─────────────────────────────
Tiny but tells the reader "you're not at the top anymore". JS
toggles .is-scrolled on the .nav wrapper. */
.nav .nav-inner {
transition: box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav.is-scrolled .nav-inner {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
}
/* Respect user motion preferences for every animation declared above. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal, .reveal.in, .reveal-tilt, .reveal-tilt.in {
opacity: 1 !important;
transform: none !important;
}
.surface:hover, .surface-deep:hover { transform: none !important; }
}
/* ─── Phone mock ─────────────────────────────────────── */
.phone {
width: 280px;
height: 590px;
background: linear-gradient(180deg, var(--peach-1) 0%, var(--peach-2) 18%, var(--peach-3) 36%, var(--paper) 60%);
border-radius: 36px;
position: relative;
overflow: hidden;
box-shadow:
0 40px 80px rgba(0, 0, 0, 0.22),
0 12px 28px rgba(0, 0, 0, 0.10),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.phone::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 26px;
background: #000;
border-radius: 16px;
z-index: 5;
}
/* ─── Floating card ──────────────────────────────────── */
.float-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 18px;
padding: 12px 14px;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* ─── Logo swatch ────────────────────────────────────── */
.logo-tile {
width: 38px;
height: 38px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 900;
font-size: 13px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
/* ─── Section heading helper ─────────────────────────── */
.section-head {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 48px;
max-width: 720px;
}