/* Shared foundation for the three landing-page sketches.
   Brand values from brand/tokens.css (guide 2026.08, PDF pp. 18–19, 29–30). OPPO Sans 4.0 is not bundled,
   so these sketches render in the guide's documented fallback (Helvetica Neue / Arial). */
:root {
  --coco-blue: #92CEFF;
  --coco-gray: #353535;
  --coco-black: #131415;
  --coco-light-blue: #D2ECFF;
  --coco-pink: #FCDBFA;
  --coco-yellow-green: #EDF2C2;
  --coco-coral: #FCD9D9;
  --font: "OPPO Sans 4.0", "OPPO Sans", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums; }

/* Entrances: content stays visible without JavaScript or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .rise > span { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .rise > span > span { display: block; transform: translateY(105%); animation: line-up 1000ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
}
@keyframes line-up { to { transform: none; } }