/* apple.css — tokens, section grid, squircle layer, scroll utilities for the Apple Web Method.
   Include once. Pair with squircle-runtime.js (and scroll-progress.js for hero scenes). */

/* ---------- Tokens ---------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", sans-serif;
  --h1: clamp(44px, 7.2vw, 96px);
  --h2: clamp(36px, 5.2vw, 72px);
  --h3: clamp(28px, 3.4vw, 48px);
  --lead: clamp(19px, 1.6vw, 28px);
  --body: 17px;

  --bg: #ffffff; --bg-alt: #f5f5f7; --bg-dark: #000000; --bg-dark-alt: #1d1d1f;
  --text: #1d1d1f; --text-2: #6e6e73; --text-on-dark: #f5f5f7; --text-2-on-dark: #86868b;
  --accent: #0066cc; --accent-on-dark: #2997ff; --cta: #0071e3;

  --r-chip: 12px; --r-card: 20px; --r-tile: 32px; --r-media: 40px; --r-pill: 980px;
  --section-pad: clamp(80px, 12vh, 180px);
  --container: 1120px; --container-wide: 1440px;
}

/* ---------- Base ---------- */
html { scroll-behavior: auto; }              /* never smooth-scroll a scrubbed page */
body { margin: 0; font-family: var(--font); font-size: var(--body); line-height: 1.47; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--h1); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: var(--h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.lead { font-size: var(--lead); line-height: 1.3; letter-spacing: -0.01em; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
img, video, canvas { display: block; max-width: 100%; }

/* ---------- Sections: one idea each ---------- */
.section { min-height: 100vh; display: grid; place-content: center; text-align: center; padding-block: var(--section-pad); padding-inline: clamp(20px, 5vw, 80px); }
.section--secondary { min-height: 80vh; }
.section--auto { min-height: 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark .lead, .section--dark .eyebrow { color: var(--text-2-on-dark); }
.section--dark a { color: var(--accent-on-dark); }
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 40px, var(--container-wide)); }
.stack { display: grid; gap: clamp(16px, 2.5vw, 28px); justify-items: center; }
.stack > h1, .stack > h2 { max-width: 20ch; }
.stack > .visual { margin-top: clamp(24px, 5vh, 64px); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: 44px; display: flex; align-items: center; justify-content: space-between; padding-inline: clamp(16px, 4vw, 40px); background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-size: 12px; }
.nav--dark { background: rgba(0,0,0,.72); color: var(--text-on-dark); }
@media (max-width: 734px) { .nav { height: 48px; } }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; background: var(--cta); color: #fff; border-radius: var(--r-pill); font-size: 17px; font-weight: 400; text-decoration: none; transition: background .15s linear, transform .12s linear; }
.btn:hover { background: #0077ed; }
.btn:active { transform: scale(.98); }
.link { color: var(--accent); text-decoration: none; font-size: 21px; }
.link::after { content: " \203A"; }
.link:hover { text-decoration: underline; }

/* ---------- Squircle layer ---------- */
[data-squircle] { border-radius: var(--radius, var(--r-card)); }  /* base radius read by the runtime; also the Firefox pre-JS fallback */
.card  { --radius: var(--r-card); }
.tile  { --radius: var(--r-tile); }
.media { --radius: var(--r-media); }
.chip  { --radius: var(--r-chip); }

/* Native squircle on Chromium 139+: let the engine own borders and shadows */
@supports (corner-shape: squircle) {
  html:not([data-squircle="clip"]) [data-squircle] { clip-path: none !important; corner-shape: superellipse(2.4); }
}

/* Shadow wrapper: shadows follow the clipped silhouette */
.shadow { filter: drop-shadow(0 20px 40px rgba(0,0,0,.14)) drop-shadow(0 2px 6px rgba(0,0,0,.06)); }
.shadow--dark { filter: drop-shadow(0 24px 48px rgba(0,0,0,.55)); }

/* Hairline border via the runtime's --squircle-path-outer (set data-squircle-border="1px" on the child) */
.bordered { position: relative; isolation: isolate; }   /* isolate keeps the ::before behind the card but above the section bg */
.bordered::before { content: ""; position: absolute; inset: calc(-1 * var(--squircle-border, 1px)); background: var(--border-color, rgba(0,0,0,.08)); clip-path: var(--squircle-path-outer); z-index: -1; }

/* ---------- Scroll choreography ---------- */
/* Reveal on view: final state is the default; the animation only exists when timelines are supported */
.reveal { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 15% entry 55%; }
  .reveal--late { animation-range: entry 25% entry 65%; }
  .reveal--later { animation-range: entry 35% entry 75%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(32px); } 60% { opacity: 1; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Sticky scene: --scene-length in vh (250–400 typical). --p is set by scroll-progress.js (0..1).
   +Human: pinned only under html.scenes-on (set by the driver). Without script, or with reduced motion,
   a scene is a static section with its steps stacked, so nothing waits hidden. */
.scene { position: relative; --p: 0; }
.scene-stage { box-sizing: border-box; display: grid; place-items: center; gap: 32px; padding-block: var(--section-pad); }
.scene-device { max-height: 60vh; width: auto; }
.scene-copy { text-align: center; padding-inline: clamp(20px, 5vw, 80px); }
.scenes-on .scene { height: calc(var(--scene-length, 300) * 1vh); }
.scenes-on .scene-stage { position: sticky; top: 0; height: 100vh; padding-block: 26vh 8vh; overflow: clip; will-change: transform; }
.scenes-on .scene-stage--copy-bottom { padding-block: 8vh 26vh; }
.scenes-on .scene-copy { position: absolute; inset-inline: 0; opacity: 0; transform: translateY(24px); transition: opacity .25s linear, transform .25s linear; }
.scenes-on .scene-copy.is-active { opacity: 1; transform: none; }
.scenes-on .scene-copy--top { top: 12vh; }
.scenes-on .scene-copy--bottom { bottom: 12vh; }
@media (max-width: 734px) { .scenes-on .scene { height: calc(var(--scene-length, 300) * 0.7vh); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none !important; opacity: 1; transform: none; }
  * { transition-duration: 0s !important; }
}