/* ==========================================================================
   CamTrainer — marketing site layer
   Extends the Blue Glass design system (design-system/styles.css) to web scale.
   The mobile DS type scale tops out at 32px; a landing page needs display sizes,
   so this file adds a *web* scale on top of the DS tokens. Everything else —
   color, glass, radius, shadow, motion feel — comes straight from the DS.
   No new colors are invented here: every hue traces back to tokens/colors.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Web-scale extension tokens
   -------------------------------------------------------------------------- */
:root {
  /* Fluid display scale (web-only additions) */
  --fs-hero: clamp(38px, 6.2vw, 68px);
  --fs-sec: clamp(28px, 3.8vw, 44px);
  --fs-sub-sec: clamp(20px, 2.4vw, 26px);
  --fs-lead: clamp(16px, 1.5vw, 19px);
  --fs-web-body: 16px;

  /* Layout */
  --container: 1120px;
  --container-narrow: 840px;
  --web-gutter: 24px;
  --section-y: clamp(72px, 9vw, 132px);

  /* Motion (DS: gentle + springy) */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, .8, .36, 1);

  /* ---- Primary-glass legibility override (site layer only) ---------------
     The DS primary glass is fully translucent. In the app it floats over the
     camera feed or over small controls, so white text on it reads fine. On a
     web page it sits on a flat, near-white field (--bg #EEF5FF), and the blue
     tint washes out until white text is effectively invisible (~1.1:1 measured
     on the hero CTA and the nav button).

     Fix: keep all three DS layers — top sheen, diagonal specular streak, blue
     tint — and add ONE opaque brand-blue base underneath. The surface still
     reads as liquid glass (rim, inset highlight, sheen all unchanged), but the
     white label now sits on real blue instead of on the page.

     Deliberately overridden here and NOT in design-system/tokens/glass.css, so
     the imported design system stays byte-identical to the source project. */
  --glass-primary-bg:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.06) 46%, rgba(255,255,255,0)),
    linear-gradient(125deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(98,198,255,0.66), rgba(0,144,225,0.56)),
    linear-gradient(135deg, var(--blue-600), var(--blue-700));
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-web-body);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Korean must break at word boundaries, not mid-word. Without keep-all,
     browsers break Hangul anywhere ("세어드 / 려요"). break-word keeps long
     unbroken Latin strings (URLs, emails) from overflowing their column. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: var(--tracking-tight); font-weight: var(--fw-extrabold); line-height: 1.14; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 12px 20px; border-radius: var(--r-lg);
  /* blue-700 rather than blue-600: white on #0073C4 clears AA (5.2:1), on #0090E1 it does not */
  background: var(--blue-700); color: #fff; font-weight: var(--fw-bold);
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Numerals — DS rule: Space Grotesk, always tabular */
.num { font-family: var(--font-num); font-feature-settings: 'tnum'; }

/* Eyebrow — DS rule: uppercase mono, wide tracking */
.eyebrow {
  font-family: var(--font-num);
  font-size: var(--fs-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  /* blue-700, not blue-600: at 10px this is the smallest text on the page, and
     #0090E1 on --bg is only 3.15:1. #0073C4 reaches 4.5:1 and still reads as
     the same brand blue at this size. */
  color: var(--blue-700);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--web-gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--section-y); }
.section--alt { background: var(--bg-2); }

/* Anchor targets must clear the sticky header (70px desktop / 62 / 58 mobile). */
:where(section, header, footer, main)[id] { scroll-margin-top: 88px; }
@media (max-width: 900px) { :where(section, header, footer, main)[id] { scroll-margin-top: 78px; } }
@media (max-width: 620px) { :where(section, header, footer, main)[id] { scroll-margin-top: 72px; } }

.section-head { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: var(--fs-sec); color: var(--ink-900); }
.section-head p { margin-top: 16px; font-size: var(--fs-lead); color: var(--ink-500); line-height: 1.65; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   4. Ambient glow blobs — DS: blurred radial blobs behind glass, so the frost
      has something to refract. Decorative only (aria-hidden in markup).
   -------------------------------------------------------------------------- */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.glow--1 { background: var(--glow-1); }
.glow--2 { background: var(--glow-2); }

/* Keep real content above the glows */
.section > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. Glass surfaces — verbatim from the DS glass tokens
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-xl);
}
.glass--sm { box-shadow: var(--glass-shadow-sm); border-radius: var(--r-lg); }

.glass-primary {
  background: var(--glass-primary-bg);
  backdrop-filter: var(--glass-primary-blur);
  -webkit-backdrop-filter: var(--glass-primary-blur);
  border: var(--glass-primary-border);
  box-shadow: var(--glass-primary-shadow);
  border-radius: var(--r-xl);
  color: #fff;
  text-shadow: var(--on-accent-shadow);
}

/* Card = glass surface with padding */
.card { padding: clamp(22px, 2.4vw, 30px); }

/* --------------------------------------------------------------------------
   6. Buttons — DS GlassButton, primary + neutral
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border: 0;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 16px;
  cursor: pointer;
  transition: transform .12s var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: scale(.985); }
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--glass-primary-bg);
  backdrop-filter: var(--glass-primary-blur);
  -webkit-backdrop-filter: var(--glass-primary-blur);
  border: var(--glass-primary-border);
  box-shadow: var(--glass-primary-shadow);
  color: #fff;
  text-shadow: var(--on-accent-shadow);
  font-weight: var(--fw-extrabold);
}
.btn--neutral {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
  /* blue-700 for the same reason as .eyebrow/.chip: on white-frost glass over
     the pale field, blue-600 label text lands around 3.5:1. */
  color: var(--blue-700);
  font-weight: var(--fw-bold);
}
.btn--sm { padding: 10px 18px; font-size: 13px; }

/* Store button — icon + two-line label */
.btn--store { padding: 13px 24px; text-align: left; }
.btn--store .store-glyph { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; }
/* 10px at reduced opacity was the least legible text on the page — the small
   store line carries real information, so it keeps full opacity here. */
.btn--store .store-top { display: block; font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.3; }
.btn--store .store-name { display: block; font-size: 15px; font-weight: var(--fw-extrabold); line-height: 1.25; }
.btn--primary .store-top { opacity: 1; }

/* --------------------------------------------------------------------------
   7. Chips & pills — DS accent-soft pill
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  /* blue-700 on accent-soft clears AA (4.09:1); blue-600 does not (3.05:1) */
  color: var(--blue-700);
  font-size: var(--fs-sub);
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------------------------
   8. Skill orbs — DS SkillOrb: solid gradient, glossy sheen, NOT frosted
   -------------------------------------------------------------------------- */
.orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.9),
    inset 0 -8px 16px rgba(0,60,90,.22),
    0 14px 26px rgba(0,110,190,.34);
  font-size: 28px;
  line-height: 1;
}
.orb--blue  { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 72%), var(--grad-primary); }
.orb--teal  { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 72%), linear-gradient(135deg, var(--teal-400), var(--teal-600)); }
.orb--royal { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 72%), linear-gradient(135deg, var(--royal-400), var(--royal-600)); }
.orb--sky   { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 72%), linear-gradient(135deg, var(--blue-300), var(--blue-500)); }
.orb--indigo{ background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 72%), linear-gradient(135deg, var(--royal-400), var(--indigo-600)); }

/* Square icon tile variant (same gloss, r-sm) */
.tile { border-radius: var(--r-sm); }

/* --------------------------------------------------------------------------
   9. Device frame — phone mockup holding a real app screen
   -------------------------------------------------------------------------- */
.device {
  position: relative;
  width: 300px;
  aspect-ratio: 390 / 844;
  border-radius: var(--r-phone);
  padding: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(219,236,250,.8));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-float);
  flex-shrink: 0;
}
.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-phone) - 10px);
  overflow: hidden;
  background: var(--bg);
}
.device__notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 22px;
  border-radius: var(--r-pill);
  background: rgba(16,58,82,.82);
  z-index: 20;
}

/* --------------------------------------------------------------------------
   10. Brand lockup — from guidelines/brand-logo.html
   -------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__icon {
  width: 38px; height: 38px;
  display: inline-block;
  object-fit: contain;
}
.logo__word { font-size: 21px; font-weight: var(--fw-extrabold); letter-spacing: -.03em; color: var(--ink-900); }
.logo__word b { color: var(--blue-600); font-weight: var(--fw-extrabold); }

/* --------------------------------------------------------------------------
   11. Reveal on scroll — DS motion: content fades up 8px, gently
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

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