/* RawCam landing page. Colours and type from the app (scripts/store-screenshots/slots.json, Develop's EditorTheme);
   quiet and small after Refrakt: near-black page, 16px text; the hero is the app icon over a phone playing the app. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #060708;
  --text: #fff;
  --text-2: rgb(255 255 255 / 0.78);
  --text-3: rgb(255 255 255 / 0.52);
  --orange: #ff9e0a;        /* rgb(255 158 10) */
  --orange-ink: #111417;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1 { margin: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--orange); color: var(--orange-ink); }

/* Hero: the app icon, then the app on a phone, sized so the whole phone fits the first screen */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: clamp(40px, 6svh, 64px) 24px 64px; }
.hero-title { position: relative; z-index: 2; margin: 0; line-height: 0; }
.hero-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.9); }

/* The phone: a CSS iPhone (17 Pro proportions) around a muted, looping screen recording.
   Display corners are 62pt on a 402pt-wide screen; the Dynamic Island is part of the recording. */
.device {
  /* Fits the first screen's height, and leaves 52px on each side for the pause button on narrow phones */
  --pw: clamp(200px, min(calc((100svh - 200px) * 0.48), calc(100vw - 104px)), 340px);
  --edge: calc(var(--pw) * 0.011);
  --bezel: calc(var(--pw) * 0.03);
  --sw: calc(var(--pw) - 2 * (var(--edge) + var(--bezel)));
  --r-screen: calc(var(--sw) * 0.154);
  position: relative; margin-top: clamp(28px, 4.5svh, 44px);
}
.device::before {  /* the app's faint orange glow */
  content: ""; position: absolute; z-index: -1; inset: 8% -55% -6%;
  background: radial-gradient(closest-side, rgb(255 158 10 / 0.13), rgb(255 158 10 / 0.04) 55%, transparent);
  pointer-events: none;
}
.phone {
  position: relative; width: var(--pw); padding: var(--edge);
  border-radius: calc(var(--r-screen) + var(--bezel) + var(--edge));
  background: linear-gradient(150deg, #5c6166 0%, #24282b 18%, #15181a 50%, #26292c 82%, #63686d 100%);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.04);
}
.phone::before, .phone::after {  /* side buttons: Action and volume on the left; side button and Camera Control on the right */
  content: ""; position: absolute; width: 3px; border-radius: 2px; --b: #34383b;
}
.phone::before {
  left: -2.5px; top: 17%; height: 26%;
  background: linear-gradient(var(--b) 0 13%, transparent 13% 25%, var(--b) 25% 59%, transparent 59% 66%, var(--b) 66% 100%);
}
.phone::after {
  right: -2.5px; top: 27%; height: 37%;
  background: linear-gradient(var(--b) 0 37%, transparent 37% 74%, var(--b) 74% 100%);
}
.phone-screen {
  position: relative; overflow: hidden; aspect-ratio: 402 / 874;
  border: var(--bezel) solid #050606; border-radius: calc(var(--r-screen) + var(--bezel));
  background: #0b0d0f; box-sizing: content-box; width: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.03);
}
.phone-video { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-screen); background: #0b0d0f; }
.js .device .phone { opacity: 0; transform: translateY(18px); animation: rise 1100ms var(--ease) 200ms forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Pause / play: autoplaying motion longer than five seconds needs a way to stop it (WCAG 2.2.2) */
.video-toggle {
  position: absolute; left: calc(100% + 14px); bottom: 6px; width: 36px; height: 36px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: var(--text-2); cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.video-toggle[hidden] { display: none; }
.video-toggle:hover { background: rgb(255 255 255 / 0.14); color: var(--text); }
.video-toggle:focus-visible { border-radius: 50%; }
.video-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.video-toggle .icon-play, .video-toggle.is-paused .icon-pause { display: none; }
.video-toggle.is-paused .icon-play { display: block; }

/* Intro: one short text column, then Apple's official badge, unmodified, with its clear space */
.intro { max-width: 540px; margin: 0 auto; padding: 8px 24px 0; }
.intro p { color: var(--text-2); margin-top: 14px; }
.store-badge { display: block; width: max-content; margin: 32px auto 0; border-radius: 8px; transition: opacity 160ms var(--ease); }
.store-badge:hover { opacity: 0.85; }
.store-badge img { width: 144px; height: 48px; }

/* Credits */
.credits { padding: 112px 24px 40px; text-align: center; font: 400 12px/1.6 var(--mono); color: var(--text-3); }
.credits a { color: inherit; text-decoration-color: rgb(255 158 10 / 0.7); text-underline-offset: 3px; }
.credits a:hover { color: var(--orange); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hero { padding-bottom: 48px; }
  .hero-icon { width: 56px; height: 56px; border-radius: 13px; }
  .video-toggle { left: calc(100% + 10px); width: 32px; height: 32px; }
  .credits { padding-top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}