/* KAO website. Tokens mirror Y2KCCD/Y2KCCD/DesignSystem/KAOTokens.swift (KAOColor, KAOSpace,
   KAORadius, KAOMotion springs). Font: Space Grotesk (OFL, fonts/). */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #f9faf6;
  --surface: #eef0e9;
  --raised: #ffffff;
  --line: #dde0d6;
  --outline: rgba(0, 0, 0, .08);
  --text: #171a15;
  --secondary: #656a60;
  --accent: #bcf522;
  --on-accent: #172000;
  --on-accent-2: #435512;
  --photo: #101410;
  --device-shadow: rgba(36, 48, 10, .28);

  --r-image: 28px; --r-sheet: 32px; --r-card: 24px; --r-control: 20px;
  --gutter: 20px;
  --max: 1200px;

  /* KAOMotion springs as CSS linear() curves (response / damping from KAOTokens.swift). */
  --glide-dur: 705ms;
  --glide: linear(0, .0274, .0949, .185, .2851, .3866, .4839, .5733, .6531, .7227, .782, .8316, .8723, .9053, .9316, .9521, .9678, .9797, .9884, .9947, .999, 1.0019, 1.0036, 1.0046, 1.005, 1.005, 1.0047, 1.0043, 1.0038, 1.0033, 1.0028, 1.0023, 1);
  --settle-dur: 1030ms;
  --settle: linear(0, .0277, .0962, .1878, .2898, .3933, .4924, .5834, .6646, .735, .7948, .8446, .8851, .9176, .9431, .9627, .9775, .9883, .996, 1.0012, 1.0046, 1.0066, 1.0075, 1.0077, 1.0075, 1.0069, 1.0062, 1.0054, 1.0046, 1.0038, 1.0032, 1.0025, 1);
  --pop-dur: 560ms;
  --pop: linear(0, .0414, .146, .2872, .4434, .598, .7393, .8601, .9569, 1.029, 1.078, 1.1066, 1.1186, 1.1178, 1.108, 1.0926, 1.0744, 1.0556, 1.0379, 1.0224, 1.0096, .9998, .9928, .9884, .9862, .9857, .9865, .9881, .9902, .9924, .9946, .9966, 1);
  --fade-dur: 380ms;
  --fade: linear(0, .0298, .1004, .191, .2885, .3846, .4747, .5563, .6285, .6912, .7449, .7903, .8285, .8603, .8866, .9082, .9259, .9404, .9521, .9616, .9693, .9755, .9805, .9845, .9877, .9902, .9922, .9939, .9951, .9962, .997, .9976, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151713;
    --surface: #23261f;
    --raised: #2b2e27;
    --line: #373c30;
    --outline: rgba(255, 255, 255, .08);
    --text: #f4f6ef;
    --secondary: #adb3a5;
    --accent: #c2f643;
    --on-accent: #182000;
    --device-shadow: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, p, ul { margin: 0; }
h1, h2 { text-wrap: balance; font-weight: 700; }
p, li { text-wrap: pretty; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; border-radius: 8px; }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 10; background: var(--accent); color: var(--on-accent); padding: 12px 16px; border-radius: 14px; font-weight: 600; }
.skip:focus-visible { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* The owner's wordmark, tinted with the text colour through a mask. */
.wordmark {
  display: block;
  width: 74px;
  aspect-ratio: 283 / 153;
  background: currentColor;
  -webkit-mask: url("img/kao-wordmark.svg") center / contain no-repeat;
  mask: url("img/kao-wordmark.svg") center / contain no-repeat;
}

.site-header { position: relative; z-index: 2; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.site-header a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header nav a { font-size: 15px; font-weight: 500; color: var(--secondary); text-decoration: none; padding: 0 4px; }
.site-header nav a:hover { color: var(--text); }

/* Type */
.display { font-size: clamp(50px, 6.4vw, 92px); line-height: .94; letter-spacing: -.055em; }
.h2 { font-size: clamp(38px, 5.6vw, 72px); line-height: .98; letter-spacing: -.045em; }
.lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; letter-spacing: -.01em; max-width: 26em; }
.line { color: var(--secondary); font-size: clamp(17px, 1.5vw, 19px); max-width: 30em; }
.cam-name { font-size: 17px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.cam-sub { font-size: 13px; line-height: 1.35; color: var(--secondary); }

/* App Store badge: Apple's artwork, unmodified, at least 40px tall with clear space. */
.badge { display: inline-block; padding: 12px 0; line-height: 0; border-radius: 10px; }
.badge img { height: 54px; width: auto; }

/* Devices: Apple's official bezels with KAO screens, composited into one image, always upright. */
.device { position: relative; filter: drop-shadow(0 2px 3px var(--device-shadow)) drop-shadow(0 28px 40px var(--device-shadow)); }
.device img { width: 100%; height: auto; }
.device .stack { position: relative; }
.device .stack img + img { position: absolute; inset: 0; }
.device .look { opacity: 0; transition: opacity var(--fade-dur) var(--fade); }
.device .look.on { opacity: 1; }
.device video { position: absolute; object-fit: cover; background: var(--photo); }

/* Hero: the copy sits on the page canvas; the store kit's sky panel (day in light mode, night in dark)
   holds the kit's grass mound, the iPhone in front of it and the four jelly cameras in front of the phone. */
.hero { padding: 8px 0 24px; }
.hero-grid { display: grid; gap: 32px; }
.hero-copy { display: grid; gap: 20px; }
.scene {
  position: relative; overflow: hidden; isolation: isolate; height: 500px;
  border-radius: var(--r-sheet);
  background: #6db8ee url("img/sky-day.webp") center 35% / cover no-repeat;
}
.scene .device { position: absolute; z-index: 2; left: 50%; bottom: 74px; width: 200px; margin-left: -100px; }
.mound { position: absolute; z-index: 1; left: 50%; bottom: -66px; width: 470px; height: auto; max-width: none; margin-left: -235px; pointer-events: none; }
.jellies { position: absolute; inset: 0; z-index: 3; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.jellies li { position: absolute; transition: transform var(--pop-dur) var(--pop); filter: drop-shadow(0 8px 10px rgba(20, 50, 10, .28)); }
.jellies img { width: 100%; height: auto; }
.jellies li.on { transform: translateY(-10px) scale(1.08); }
.j1 { width: 74px; left: calc(50% - 168px); bottom: 50px; rotate: -10deg; }
.j2 { width: 60px; left: calc(50% - 104px); bottom: 10px; rotate: 6deg; }
.j3 { width: 66px; left: calc(50% + 52px); bottom: 12px; rotate: -6deg; }
.j4 { width: 44px; left: calc(50% + 118px); bottom: 58px; rotate: 9deg; }
@media (prefers-color-scheme: dark) {
  .scene { background-color: #0d1530; background-image: url("img/sky-night.webp"); }
  .mound { filter: brightness(.6) saturate(.85); }
  .jellies li { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)) brightness(.92); }
}

/* Sections */
.section { padding: 96px 0; }
.head { display: grid; gap: 14px; margin-bottom: 40px; }

/* Camera roll: a horizontal strip, native scroll with snap. */
.roll-wrap { position: relative; }
.roll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62vw; gap: 14px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter);
  list-style: none; margin: 0;
}
.roll::-webkit-scrollbar { display: none; }
.roll li { scroll-snap-align: start; min-width: 0; }
.frame { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-image); overflow: hidden; background: var(--photo); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--outline); pointer-events: none; }
.cam { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-width: 0; }
.cam img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.roll-nav { display: none; gap: 8px; }
.roll-nav button {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface); color: var(--text); display: grid; place-items: center;
  transition: transform var(--pop-dur) var(--pop), background-color 150ms;
}
.roll-nav button:hover { background: var(--line); }
.roll-nav button:active { transform: scale(.94); }
.roll-nav svg { width: 20px; height: 20px; fill: currentColor; }

/* Crisp or crunchy: one photo, four cameras. */
.crisp { display: grid; gap: 32px; }
.crisp .frame { aspect-ratio: 4 / 5; }
.crisp .frame img { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity var(--fade-dur) var(--fade), transform var(--glide-dur) var(--glide); }
.crisp .frame img.on { opacity: 1; transform: none; }
.picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; padding: 0; }
.picker button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 72px; padding: 12px 14px; border: 0; cursor: pointer; border-radius: var(--r-card);
  background: var(--surface);
  transition: background-color 150ms, transform var(--pop-dur) var(--pop);
}
.picker button:hover { background: var(--line); }
.picker button:active { transform: scale(.97); }
.picker button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.picker button[aria-pressed="true"] .cam-sub { color: var(--on-accent-2); }
.picker img { width: 44px; height: 44px; object-fit: contain; flex: none; }

/* Record like a camcorder */
.band { background: var(--surface); }
.clips { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; max-width: 720px; margin: 0 auto; }
.clips figure { margin: 0; }
.clips figure:nth-child(2) { margin-top: 56px; }
.clips .cam { justify-content: center; }
.v-sp90 { left: 8.367%; top: 16.467%; width: 83.265%; height: 54.4%; }
.v-qc3 { left: 8.503%; top: 13.533%; width: 82.993%; height: 49.733%; image-rendering: pixelated; }

/* Also in KAO */
.more { display: grid; gap: 48px; }
.duo-stage { position: relative; padding-bottom: 8%; }
.duo-stage .ipad { width: 82%; }
.duo-stage .iphone { position: absolute; right: 0; bottom: 0; width: 34%; }
.feats { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.feats li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 10px; border-radius: 20px; background: var(--surface); font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.feat-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--raised); display: grid; place-items: center; box-shadow: 0 1px 2px var(--outline); }
.feat-icon svg { width: 22px; height: 22px; fill: currentColor; }
.list { list-style: none; padding: 0; display: grid; gap: 14px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.35; letter-spacing: -.01em; }

/* Free and Pro, and the download */
.end { text-align: center; display: grid; justify-items: center; gap: 20px; padding-top: 96px; padding-bottom: 112px; }
.end .icon { width: 112px; height: 112px; }
.end .lead { max-width: 30em; }
.end .small { font-size: 14px; color: var(--secondary); max-width: 40em; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 15px; color: var(--secondary); }
.site-footer .wrap { display: grid; gap: 16px; }
.site-footer .wordmark { width: 56px; color: var(--text); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }

/* Privacy */
.legal { max-width: 720px; padding-top: 24px; padding-bottom: 96px; }
.legal h1 { margin-bottom: 8px; }
.legal .updated { color: var(--secondary); font-size: 15px; margin-bottom: 32px; }
.legal h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--secondary); }
.legal p + p, .legal ul + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; margin-top: 12px; }
.legal li strong, .legal p strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--text); }
.summary { margin-top: 24px; background: var(--surface); border-radius: var(--r-card); padding: 24px; }
.summary h2 { margin-top: 0; }

/* Entrances (only with JS and motion allowed). */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
/* Inside the horizontal roll, fade only: a vertical offset would make the strip scroll vertically. */
.js .roll [data-reveal] { transform: none; }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--fade-dur) var(--fade), transform var(--glide-dur) var(--glide);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .scene .device[data-reveal] { transform: translateY(96px); }
.js .scene .device[data-reveal].in { transform: none; transition-duration: var(--fade-dur), var(--settle-dur); transition-timing-function: var(--fade), var(--settle); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Depth on scroll: devices drift at different rates, never rotate. */
    .drift { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    .drift-more { animation: drift-more linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes drift { from { translate: 0 24px; } to { translate: 0 -24px; } }
    @keyframes drift-more { from { translate: 0 64px; } to { translate: 0 -64px; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .device .look, .crisp .frame img { transition: none; transform: none; }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .scene { height: 600px; }
  .scene .device { width: 250px; margin-left: -125px; bottom: 84px; }
  .mound { width: 640px; margin-left: -320px; bottom: -92px; }
  .j1 { width: 100px; left: calc(50% - 250px); bottom: 64px; }
  .j2 { width: 84px; left: calc(50% - 160px); bottom: 14px; }
  .j3 { width: 90px; left: calc(50% + 80px); bottom: 16px; }
  .j4 { width: 60px; left: calc(50% + 180px); bottom: 74px; }
  .roll { grid-auto-columns: 280px; gap: 20px; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .roll-nav { display: flex; }
  .roll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .picker { grid-template-columns: 1fr; }
  .clips { gap: 48px; }
  .clips figure:nth-child(2) { margin-top: 96px; }
  .section { padding: 128px 0; }
}

@media (min-width: 960px) {
  .hero--stack .hero-copy { justify-items: center; text-align: center; padding: 40px 0 16px; }
  .hero--stack .scene { height: 620px; }
  .hero--split .hero-grid { grid-template-columns: minmax(0, 1fr) 540px; gap: 56px; align-items: center; }
  .hero--split .scene { height: 700px; }
  .hero--split .display { font-size: clamp(50px, 5.3vw, 78px); }
  .hero--split .scene .device { width: 270px; margin-left: -135px; }
  .crisp { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; align-items: center; }
  .more { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
}