/* CineCam website. Colours, type and motion follow the app (CineTheme): near-black, one yellow accent,
   Barlow Semi Condensed, short eased moves. Scroll-tied parts use CSS scroll-driven animations and fall back
   to a plain, fully readable page where the browser has none. */

@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow_semi_condensed_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow_semi_condensed_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow_semi_condensed_semibold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }

@property --iso { syntax: "<integer>"; inherits: true; initial-value: 100; }
@property --f { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --s { syntax: "<integer>"; inherits: true; initial-value: 0; }

:root {
  --bg: #0B0B0C; --strip: #000; --surface: #17171A; --raised: #232328; --divider: #2E2E33;
  --accent: #FFC107; --on-accent: #1A1300; --text: #F5F5F5; --dim: #A8A8A8; --muted: #6E6E73;
  --ok: #69F0AE; --rec: #E53935;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; }
/* Nothing may widen the page: some phone browsers pan sideways when only <body> clips, so <html> clips too. */
html { scroll-behavior: smooth; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
img, svg, video { max-width: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 400 18px/1.5 "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(42px, 7vw, 88px); }
h2 { font-size: clamp(30px, 4.2vw, 54px); }
h3 { font-size: 22px; }
em { font-style: normal; color: var(--accent); }
p { text-wrap: pretty; }
.lede { color: var(--dim); font-size: clamp(18px, 1.6vw, 22px); max-width: 34em; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.fine { color: var(--muted); font-size: 15px; max-width: 46em; }

/* ---------- top: progress line and navigation ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 30; }
.nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gutter); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 60%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav nav { display: flex; gap: 22px; margin-left: auto; color: var(--dim); font-weight: 500; }
.nav nav a { position: relative; padding: 6px 0; transition: color .2s var(--ease); }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
.nav nav a:hover { color: var(--text); }
.nav nav a:hover::after { transform: scaleX(1); }

.pill {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 17px;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.pill:active { transform: scale(.96); }
.pill--ghost { background: var(--raised); color: var(--text); }
.pill--ghost:hover { box-shadow: none; background: #2c2c32; }
.pill--small { min-height: 38px; padding: 0 16px; font-size: 15px; }
.pill--big { min-height: 58px; padding: 0 32px; font-size: 20px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* The store button: Google Play's name in the site's own style (swap in the official badge image if you prefer). */
.store {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px 0 18px; border-radius: 14px;
  background: #000; color: #fff; border: 1.5px solid #5a5a60;
  transition: transform .18s var(--ease), border-color .2s, box-shadow .25s var(--ease);
}
.store svg { width: 26px; height: 26px; fill: var(--accent); }
.store span { display: grid; line-height: 1.05; text-align: left; }
.store small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.store b { font-size: 21px; font-weight: 600; }
.store:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.store:active { transform: scale(.97); }

/* ---------- hero ---------- */
.hero {
  min-height: calc(100svh - 60px); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 32px;
  padding: 48px var(--gutter) 64px; position: relative;
}
.hero__words > * { animation: rise .7s var(--ease) both; }
.hero__words > :nth-child(2) { animation-delay: .08s; }
.hero__words > :nth-child(3) { animation-delay: .16s; }
.hero__words > :nth-child(4) { animation-delay: .24s; }
.hero__words > :nth-child(5) { animation-delay: .32s; }
.hero h1 { margin: 18px 0 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; color: var(--dim); }
.hero__facts b { color: var(--text); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); animation: blink 1.4s steps(2, jump-none) infinite; }

.hero__art { display: grid; place-items: center; animation: lens-in 1s var(--ease) both .1s; }
.lens { width: min(100%, 460px); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.lens__ring { transform-origin: 108px 108px; animation: turn 40s linear infinite; }
.lens__label { fill: var(--dim); font: 500 12px "Barlow Semi Condensed", sans-serif; letter-spacing: .12em; }
.lens__value { fill: #fff; font: 600 32px "Barlow Semi Condensed", sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- screenshots in a phone frame ---------- */
.device { margin: 0; }
.device img { display: block; width: 100%; height: auto; border-radius: 22px; border: 8px solid #1c1c20; box-shadow: 0 0 0 2px #2c2c31, 0 40px 80px -24px rgba(0, 0, 0, .85); background: #000; }
.device figcaption { margin-top: 14px; color: var(--dim); font-weight: 500; text-align: center; }
.shot { padding: 0 var(--gutter) 96px; display: grid; justify-items: center; perspective: 1400px; }
.device--wide { width: min(100%, 1120px); transform-origin: 50% 0; }
.device--wide img { border-width: 10px; border-radius: 30px; }

.places, .screens { padding: 96px var(--gutter); }
.screens, .shot, .places, .features, .specs, .story { overflow-x: clip; }
.places__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.places__strip { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.place { margin: 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface); }
.places__strip .place { aspect-ratio: auto; height: clamp(260px, 34vw, 440px); }
.place img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; transition: scale .6s var(--ease), filter .4s; }
.place:hover img { scale: 1.05; }
.place figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .86)); display: grid; gap: 4px; }
.place b { font-size: 24px; font-weight: 600; }
.place b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rec); margin-right: 9px; translate: 0 -3px; }
.place span { color: #dcdcdc; font-size: 16px; }

.screens__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.screens__row + .screens__row { margin-top: 40px; }
.screens__row--mixed { grid-template-columns: 2.165fr 1fr; align-items: center; }
.device--tall img { border-radius: 26px; }

/* ---------- ticker ---------- */
.ticker { border-block: 1px solid var(--divider); background: var(--strip); overflow: hidden; padding: 14px 0; }
.ticker__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: ticker 36s linear infinite; color: var(--dim); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }
.ticker__track i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---------- the phone (drawn, not a screenshot) ---------- */
.phone {
  --tilt: 0deg;
  width: min(100%, 760px); aspect-ratio: 19.5 / 9; border-radius: 34px; padding: 9px; background: #1c1c20;
  box-shadow: 0 0 0 2px #2c2c31, 0 40px 80px -20px rgba(0, 0, 0, .8); container-type: inline-size;
}
.screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #000; font-size: 2cqw; }
.scene, .zebra, .grid, .tally { position: absolute; inset: 0; }
/* The picture: a dusk landscape in flat shapes; the graded copy is the same scene through a look. */
.scene {
  background:
    radial-gradient(circle at 72% 34%, #f3ead2 0 3.2%, transparent 3.4%),
    linear-gradient(168deg, transparent 0 62%, #3d4a4f 62.2% 100%),
    linear-gradient(192deg, transparent 0 54%, #53626a 54.2% 100%),
    linear-gradient(#93a3ae, #c3c9c6 60%);
}
.scene--graded {
  background:
    radial-gradient(circle at 72% 34%, #ffe9a8 0 3.2%, transparent 3.4%),
    linear-gradient(168deg, transparent 0 62%, #14393f 62.2% 100%),
    linear-gradient(192deg, transparent 0 54%, #1f5d66 54.2% 100%),
    linear-gradient(#e08a3c, #f3c77a 60%);
  clip-path: inset(0 0 0 100%); border-left: 0 solid #fff;
}
.zebra { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .85) 0 .5cqw, transparent .5cqw 1.2cqw); -webkit-mask: radial-gradient(circle at 72% 34%, #000 0 9%, transparent 10%); mask: radial-gradient(circle at 72% 34%, #000 0 9%, transparent 10%); opacity: 0; }
.grid { background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.level { position: absolute; left: 30%; right: 30%; top: 50%; display: flex; justify-content: space-between; transform: rotate(-5deg); color: #fff; }
.level i { width: 38%; height: .4cqw; border-radius: 1cqw; background: currentColor; }
.tally { border: .6cqw solid var(--rec); border-radius: 26px; opacity: 0; }

.hud-top { position: absolute; inset: 3% 12% auto 3%; display: flex; align-items: flex-start; gap: 3.2cqw; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.val small, .tc small, .badge small { display: block; font-size: 1.35cqw; letter-spacing: .1em; color: #d6d6d6; font-weight: 500; }
.val b { font-size: 2.6cqw; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-block; }
.tc { margin-inline: auto; text-align: center; }
.tc b { font-size: 3.4cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.tc__digits { counter-reset: s var(--s) f var(--f); }
.tc__digits::after { content: "00:00:" counter(s, decimal-leading-zero) ":" counter(f, decimal-leading-zero); }
.iso { counter-reset: iso var(--iso); }
.iso::after { content: counter(iso); }
.badge { border: .25cqw solid #fff; border-radius: 1.2cqw; padding: .5cqw 1.2cqw; text-align: center; }
.badge b { font-size: 1.9cqw; font-weight: 600; }

.dial { position: absolute; left: 22%; right: 30%; top: 24%; height: 9%; border-radius: 1.4cqw; background: rgba(12, 12, 14, .82); overflow: hidden; opacity: 0; }
.dial__ticks { position: absolute; inset: 20% -60% 20% -60%; background: repeating-linear-gradient(90deg, #ddd 0 .25cqw, transparent .25cqw 2.4cqw); }
.dial__needle { position: absolute; left: 50%; top: 0; bottom: 0; width: .45cqw; background: var(--accent); }
.lookchip { position: absolute; left: 50%; bottom: 27%; translate: -50% 0; padding: .7cqw 2cqw; border-radius: 5cqw; border: .3cqw solid var(--accent); background: rgba(12, 12, 14, .82); font-weight: 600; font-size: 1.9cqw; opacity: 0; }

.rail { position: absolute; right: 2.4%; top: 0; bottom: 0; display: grid; place-items: center; }
.rec { width: 8.2cqw; aspect-ratio: 1; border-radius: 50%; border: .55cqw solid #fff; display: grid; place-items: center; }
.rec span { width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--rec); }

.hud-bottom { position: absolute; inset: auto 13% 4% 3%; display: flex; gap: 1.4cqw; align-items: flex-end; }
.card { background: rgba(18, 18, 20, .86); border-radius: 1.6cqw; padding: 1cqw 1.3cqw; height: 9.5cqw; }
.card--histo { width: 20cqw; transform-origin: 0 100%; }
.card--histo svg { width: 100%; height: 100%; }
.h { mix-blend-mode: screen; opacity: .8; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
.h--r { fill: #E53935; } .h--g { fill: #43A047; animation-delay: -.8s; } .h--b { fill: #1E66F5; animation-delay: -1.6s; }
.card--store { width: 21cqw; display: flex; flex-direction: column; justify-content: center; gap: .6cqw; }
.card--store b { font-size: 2.2cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.card--store i { height: .5cqw; border-radius: 1cqw; background: var(--accent); }
.card--store small { font-size: 1.5cqw; color: #ddd; }
.card--audio { width: 25cqw; display: flex; flex-direction: column; justify-content: center; gap: .9cqw; }
.card--audio i { height: 1.1cqw; border-radius: .3cqw; background: linear-gradient(90deg, #2ecc40 0 62%, #5b6b2a 62% 78%, #7a5a1a 78% 90%, #6b2626 90%); transform-origin: 0 50%; animation: meter 1.1s ease-in-out infinite alternate; }
.card--audio i:last-child { animation-duration: .8s; animation-delay: -.3s; }

/* ---------- the scroll story ---------- */
.story { padding: 96px var(--gutter); }
.story__stage { display: grid; grid-template-columns: minmax(260px, .7fr) 1.3fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.caps { display: grid; gap: 28px; margin-top: 18px; }
.cap__n { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.cap h2 { margin: 6px 0 12px; }
.cap p { color: var(--dim); max-width: 26em; }
.ruler { display: none; }

/* ---------- features ---------- */
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { margin: 12px 0 14px; }
.features, .looks, .specs { padding: 96px var(--gutter); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.feature {
  background: var(--surface); border-radius: 20px; padding: 24px; border: 1px solid transparent;
  transition: border-color .25s var(--ease), translate .25s var(--ease), background .25s;
}
.feature:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); translate: 0 -4px; background: #1b1b1f; }
.feature svg { width: 46px; height: 46px; padding: 11px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 14%, transparent); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: scale .3s var(--ease); }
.feature:hover svg { scale: 1.12; }
.feature h3 { margin: 16px 0 8px; }
.feature p { color: var(--dim); font-size: 17px; }

/* ---------- looks wheel ---------- */
.looks { overflow: clip; }
.wheel { position: relative; padding: 18px 0; container-type: inline-size; }
.wheel__frame { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 172px; translate: -50% 0; border: 3px solid var(--accent); border-radius: 22px; z-index: 2; pointer-events: none; box-shadow: 0 0 40px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.wheel__track { display: flex; gap: 16px; width: max-content; padding-left: calc(50cqw - 78px); }
.wheel figure { width: 156px; flex: none; }
.wheel figure span { display: block; aspect-ratio: 4 / 3; border-radius: 14px; background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--a) 40%, #fff) 0 6%, transparent 7%), linear-gradient(166deg, transparent 0 60%, var(--b) 60.5%), linear-gradient(var(--a), color-mix(in srgb, var(--a) 55%, #fff)); }
.wheel figcaption { text-align: center; margin-top: 10px; font-weight: 500; color: var(--dim); }

/* ---------- specs ---------- */
.spec-table { display: grid; background: var(--surface); border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
.spec-table > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 24px; }
.spec-table > div + div { border-top: 1px solid var(--divider); }
.spec-table dt { color: var(--accent); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; padding-top: 4px; }
.spec-table dd { color: var(--text); }

/* ---------- get ---------- */
.get { padding: 120px var(--gutter); text-align: center; display: grid; justify-items: center; gap: 18px; background: radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.get__icon { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--accent) 70%, transparent); animation: float 5s ease-in-out infinite; }
.get .lede { margin-bottom: 10px; }
.footer nav { display: flex; gap: 20px; }
.footer a { color: var(--dim); transition: color .2s; }
.footer a:hover { color: var(--accent); }
.footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px var(--gutter); border-top: 1px solid var(--divider); color: var(--muted); font-size: 15px; }

/* ---------- time-based keyframes ---------- */
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes lens-in { from { opacity: 0; scale: .86; rotate: -20deg; } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes turn { to { rotate: 360deg; } }
@keyframes ticker { to { translate: -50% 0; } }
@keyframes breathe { 50% { scale: 1 .78; } }
@keyframes meter { from { scale: .55 1; } to { scale: .92 1; } }
@keyframes float { 50% { translate: 0 -10px; } }
@keyframes frames { to { --f: 23; } }
@keyframes seconds { to { --s: 59; } }

/* ---------- scroll-tied animations (CSS scroll-driven animations) ---------- */
@keyframes grow-x { to { transform: scaleX(1); } }
@keyframes reveal { from { opacity: 0; translate: 0 40px; scale: .96; } }
@keyframes lens-scroll { to { rotate: -220deg; } }
@keyframes art-away { to { translate: 0 -12vh; scale: .82; opacity: .25; } }
@keyframes cap { 0% { opacity: 0; translate: 0 26px; } 18%, 82% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -26px; } }
@keyframes cap-first { 0%, 82% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -26px; } }
@keyframes cap-last { 0% { opacity: 0; translate: 0 26px; } 18%, 100% { opacity: 1; translate: 0 0; } }
@keyframes pointer { to { left: 87.5%; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes show-hide { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }
@keyframes iso-up { to { --iso: 3200; } }
@keyframes dial-run { to { translate: -30% 0; } }
@keyframes highlight { 0%, 100% { color: inherit; scale: 1; } 15%, 85% { color: var(--accent); scale: 1.14; } }
@keyframes level-out { 0% { rotate: 0deg; color: #fff; } 80% { rotate: 5deg; color: #fff; } 100% { rotate: 5deg; color: var(--ok); } }
@keyframes histo-pop { 0% { scale: 1; } 30% { scale: 1.5; } 100% { scale: 1.5; } }
@keyframes histo-back { to { scale: 1; } }
@keyframes wipe { from { clip-path: inset(0 0 0 100%); border-left-width: 3px; } 96% { border-left-width: 3px; } to { clip-path: inset(0 0 0 0); border-left-width: 0; } }
@keyframes to-stop { to { border-radius: 22%; scale: .56; } }
@keyframes phone-in { from { rotate: x 18deg; scale: .86; opacity: .4; } }
/* From the first look under the frame to the last one (cqw: the wheel's own width). */
@keyframes shot-up { from { rotate: x 24deg; scale: .84; opacity: .5; } }
@keyframes from-left { from { opacity: 0; translate: var(--slide-left, -70px) 30px; rotate: var(--slide-turn-left, -3deg); } }
@keyframes from-right { from { opacity: 0; translate: var(--slide-right, 70px) 30px; rotate: var(--slide-turn-right, 3deg); } }
@keyframes drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
@keyframes wheel-run { to { translate: calc(-100% + 50cqw + 78px) 0; } }

@supports (animation-timeline: view()) {
  /* How far down the page: the yellow line at the top. */
  .progress { animation: grow-x linear both; animation-timeline: scroll(root); }

  /* Hero: the lens ring turns with the scroll (on top of its slow idle turn) and the art drifts away. */
  .hero__art { animation: lens-in 1s var(--ease) both .1s, art-away linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100svh; }
  .lens__ticks { transform-origin: 108px 108px; animation: lens-scroll linear both; animation-timeline: scroll(root); animation-range: 0 120svh; }

  /* The real viewfinder tips up to face you as it comes into view. */
  .device--wide { animation: shot-up linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  /* Screenshots slide in from their own side; the photos drift inside their frames (parallax). */
  .device--left { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  .device--right { animation: from-right linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  .place { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .place img { animation: drift linear both; animation-timeline: view(); }

  /* Things rise into place as they enter the screen, and their progress is the scroll's, not a clock's. */
  .feature, .section-head, .spec-table > div { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }

  /* The story: a tall section; its stage sticks while the scroll plays the four steps on the phone. */
  .story { height: 480vh; padding-block: 0; view-timeline: --story block; }
  .story__stage { position: sticky; top: 60px; height: calc(100svh - 60px); }
  .caps { display: block; position: relative; height: 290px; margin-top: 18px; }
  .cap { position: absolute; inset: 0; animation: cap linear both; animation-timeline: --story; }
  .cap--1 { animation-name: cap-first; animation-range: contain 0% contain 25%; }
  .cap--2 { animation-range: contain 25% contain 50%; }
  .cap--3 { animation-range: contain 50% contain 75%; }
  .cap--4 { animation-name: cap-last; animation-range: contain 75% contain 100%; }

  .ruler { display: flex; position: relative; width: 200px; height: 26px; margin-top: 8px; }
  .ruler span { flex: 1; background: linear-gradient(var(--muted), var(--muted)) center bottom / 2px 13px no-repeat; }
  .ruler b { position: absolute; top: 0; left: 12.5%; border: 6px solid transparent; border-top: 11px solid var(--accent); translate: -6px 0; animation: pointer linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }

  .phone { animation: phone-in linear both; animation-timeline: --story; animation-range: entry 20% contain 0%; }

  /* 1 — every value on a dial: the dial opens, its ticks run, ISO climbs. */
  .dial { animation: show-hide linear both; animation-timeline: --story; animation-range: contain 2% contain 25%; }
  .dial__ticks { animation: dial-run linear both; animation-timeline: --story; animation-range: contain 2% contain 25%; }
  .story .screen { animation: iso-up linear both; animation-timeline: --story; animation-range: contain 4% contain 22%; }
  .val--iso b { animation: highlight linear both; animation-timeline: --story; animation-range: contain 2% contain 25%; transform-origin: 0 100%; }

  /* 2 — see what you record: zebra on the sun, the histogram comes forward, the level settles green. */
  .zebra { animation: show-hide linear both; animation-timeline: --story; animation-range: contain 27% contain 50%; }
  .card--histo { animation: histo-pop linear both, histo-back linear forwards; animation-timeline: --story, --story; animation-range: contain 26% contain 46%, contain 46% contain 52%; }
  .level { transform: none; rotate: -5deg; animation: level-out linear both; animation-timeline: --story; animation-range: contain 28% contain 46%; }

  /* 3 — looks: the graded picture wipes across; the look's name shows. */
  .scene--graded { animation: wipe linear both; animation-timeline: --story; animation-range: contain 52% contain 72%; }
  .lookchip { animation: show-hide linear both; animation-timeline: --story; animation-range: contain 52% contain 76%; }

  /* 4 — roll: the button becomes a stop square, the tally lights, the timecode runs. */
  .rec span { animation: to-stop linear both; animation-timeline: --story; animation-range: contain 78% contain 84%; }
  .tally { animation: show linear both; animation-timeline: --story; animation-range: contain 78% contain 84%; }

  /* Looks: the wheel slides under its fixed frame as the section crosses the screen. */
  .wheel__track { animation: wheel-run linear both; animation-timeline: view(); animation-range: entry 60% exit 40%; }
}
/* The timecode runs by the clock everywhere (frames at 24 a second). */
.tc__digits { animation: frames 1s steps(24, jump-none) infinite, seconds 60s steps(60, jump-none) infinite; }

/* ---------- without scroll-driven animations: same page, revealed on arrival, story shown as a list ---------- */
.no-scroll-timeline .feature, .no-scroll-timeline .section-head, .no-scroll-timeline .spec-table > div, .no-scroll-timeline .place, .no-scroll-timeline .device, .no-scroll-timeline .wheel { opacity: 0; translate: 0 28px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.no-scroll-timeline .in { opacity: 1; translate: 0 0; }
.no-scroll-timeline .scene--graded { clip-path: inset(0 0 0 55%); border-left-width: 3px; }
.no-scroll-timeline .wheel { overflow-x: auto; }
.no-scroll-timeline .story .screen { --iso: 800; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  :root { --slide-left: 0px; --slide-right: 0px; --slide-turn-left: 0deg; --slide-turn-right: 0deg; }
  .nav nav { display: none; }
  .nav .pill { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 32px; }
  .hero__art { order: -1; }
  .lens { width: min(64vw, 300px); }
  .story__stage { grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .story__words { order: 2; }
  .caps { height: 250px; }
  .spec-table > div { grid-template-columns: 1fr; gap: 4px; }
  .places__grid, .places__strip, .screens__row { grid-template-columns: 1fr; }
  .screens__row--mixed .device--tall { width: min(70%, 300px); justify-self: center; }
  .place { aspect-ratio: 4 / 3; }
  .places, .screens { padding-block: 64px; }
  .shot { padding-bottom: 64px; }
  .footer { flex-direction: column; align-items: flex-start; }
  .features, .looks, .specs, .story { padding-block: 64px; }
}
@media (max-width: 860px) { @supports (animation-timeline: view()) { .story { padding-block: 0; } } }

/* ---------- less motion, on request ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .story { height: auto !important; padding-block: 64px !important; }
  .story__stage { position: static !important; height: auto !important; }
  .caps { display: grid !important; height: auto !important; }
  .cap { position: static !important; }
  .ruler { display: none !important; }
  .scene--graded { clip-path: inset(0 0 0 55%); border-left-width: 3px; }
  .story .screen { --iso: 800; }
}

/* ---------- Support, Privacy and Terms pages ---------- */
.doc { max-width: 820px; margin: 0 auto; padding: 64px var(--gutter) 96px; }
.doc__head { margin-bottom: 36px; animation: rise .6s var(--ease) both; }
.doc__head h1 { font-size: clamp(38px, 6vw, 64px); margin: 14px 0 12px; }
.doc__head p { color: var(--dim); }
.doc section { background: var(--surface); border-radius: 20px; padding: 24px 26px; margin-bottom: 16px; animation: rise .6s var(--ease) both; }
.doc section:nth-of-type(2) { animation-delay: .06s; } .doc section:nth-of-type(3) { animation-delay: .12s; } .doc section:nth-of-type(n+4) { animation-delay: .18s; }
.doc h2 { font-size: 24px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.doc h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.doc p, .doc li { color: #d9d9d9; }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 10px; }
.doc ul { padding-left: 22px; display: grid; gap: 6px; }
.doc li::marker { color: var(--accent); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--divider); }
.doc th { color: var(--accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; border-top: 0; }
.doc .note { border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.contact .pill { text-decoration: none; color: var(--on-accent); }
details { border-top: 1px solid var(--divider); }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; list-style: none; padding: 14px 34px 14px 0; font-weight: 600; font-size: 19px; position: relative; color: var(--text); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); translate: 0 -70%; rotate: 45deg; transition: rotate .25s var(--ease); }
details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
details > *:not(summary) { padding-bottom: 14px; animation: rise .35s var(--ease) both; }
@supports (animation-timeline: view()) {
  .doc section { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; animation-delay: 0s; }
}

/* ---------- questions on the home page ---------- */
.faq { padding: 96px var(--gutter); }
.faq__list { max-width: 860px; background: var(--surface); border-radius: 20px; padding: 6px 24px; }
.faq__list p { color: #d9d9d9; }
.faq__list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .faq { padding-block: 64px; } }