/* planquokka.com homepage (ko + en). Static-first: the base below is the stacked,
   fully visible page. Pinning and scroll animation live only inside the single
   MOTION media query at the end, which site.js matches with the same string. */

@font-face { font-family: "Jua"; src: url(/assets/fonts/jua-sub.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PQ Sans"; src: url(/assets/fonts/pq-sans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PQ Sans"; src: url(/assets/fonts/pq-sans-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #FDF8F1;
  --card: #FFFFFF;
  --ink: #3B2A1E;
  --muted: #7A6A5C;
  --accent: #F09B5A;
  --accent-deep: #C9692B;
  --soft: #FBE7D3;
  --line: #EFE3D5;
  --nav-h: 64px;
  --sans: "PQ Sans", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --display: "Jua", "PQ Sans", -apple-system, "Apple SD Gothic Neo", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
h1, h2, .step p { word-break: keep-all; overflow-wrap: anywhere; }
p, li { word-break: keep-all; overflow-wrap: break-word; }
section[id] { scroll-margin-top: var(--nav-h); }

/* Inline lists separated by a middle dot (the dot is drawn by the body font). */
.dotlist > span + span::before { content: "\00B7"; margin: 0 .45em; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(16px, calc((100% - 1120px) / 2));
  background: rgba(253, 248, 241, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { border-bottom-color: var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 21px; color: var(--ink); text-decoration: none; }
.logo img { width: 32px; height: 32px; border-radius: 8px; }
.nav-end { display: flex; align-items: center; gap: 22px; }
.nav .links { display: none; }
.nav .links a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav .links a:hover { color: var(--ink); }
.lang-switch {
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px;
}
.lang-switch:hover { border-color: var(--accent); }

/* ---------- store badges (official artwork, never transformed) ---------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store { display: block; line-height: 0; }
.store img { display: block; height: 48px; width: auto; max-width: none; }
.store-block .store-soon { margin: 14px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--accent-deep); }
html[data-launch="live"] .store-soon { display: none; }

/* ---------- phone frame (neutral, no device details) ---------- */
.phone { position: relative; border-radius: 40px; background: #1F1A16; padding: 9px; box-shadow: 0 30px 70px rgba(90, 50, 20, .25); }
.phone .scr { position: relative; border-radius: 31px; overflow: hidden; aspect-ratio: 1320 / 2868; background: #fff; }
.phone .scr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#screens img { opacity: 0; }
#screens img.on { opacity: 1; }

/* ---------- hero (static) ---------- */
.hero { position: relative; }
.hero .pin {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) 20px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
.hero h1 { font-size: clamp(40px, 11vw, 72px); line-height: 1.12; margin: 0 0 18px; }
.hero p.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--muted); margin: 0 0 28px; }
.stage { position: relative; height: 470px; }
.stage .phone { position: absolute; left: 50%; top: 50%; width: 210px; transform: translate(-50%, -50%); }
.stage .c1, .stage .c2 { position: absolute; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .15)); }
.stage .c1 { width: 120px; left: 0; bottom: 4%; }
.stage .c2 { width: 110px; right: 0; bottom: 2%; }
.scrollhint { display: none; }

/* ---------- features (static: each screenshot under its text) ---------- */
.features { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.features .sticky { display: none; }
.step { padding: 48px 0; }
.eyebrow { color: var(--accent-deep); font-weight: 600; font-size: 15px; margin: 0 0 10px; }
.step h2, .blk h2 { font-size: clamp(30px, 7vw, 48px); line-height: 1.18; margin: 0 0 14px; }
.step p, .blk p { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0; }
.step .mshot { width: 230px; margin: 28px auto 0; }

/* ---------- later sections ---------- */
section.blk { max-width: 1120px; margin: 0 auto; padding: 56px 16px; }
.friend {
  background: var(--soft); border-radius: 36px; padding: 36px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center;
  overflow: clip;
}
.friend .row { display: flex; gap: 6px; justify-content: center; align-items: flex-end; }
.friend .row img { width: 130px; }
.plus { text-align: center; }
.plus ul { list-style: none; padding: 0; margin: 32px auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 900px; text-align: left; }
.plus li { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.plus li b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.blk.plus .note { font-size: 14px; margin-top: 18px; }
.dl { text-align: center; background: var(--card); border-radius: 36px; padding: 40px 12px; }
.dl img.wave { width: 140px; margin: 0 auto 6px; display: block; }
.blk .dl p.platforms { margin: 0; }
.dl .store-block { margin-top: 26px; }
.dl .badges { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { max-width: 1120px; margin: 0 auto; padding: 32px 20px 48px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.site-footer a { color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.foot-links .legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-links .social { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer p { margin: 0 0 8px; }
/* Fine print: the full business info (e-commerce act display duty), trademark and
   copyright lines, always visible but quieter than the links above. #7F6F61 on
   --bg #FDF8F1 is 4.57:1 (WCAG AA for normal text). */
.site-footer .fine { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: #7F6F61; }
.site-footer .fine p { margin: 0 0 4px; }
.site-footer .biz span { white-space: normal; }
.copyright::before { content: "\00A9\00A0"; }

/* ---------- wider static layout (also the reduced-motion desktop) ---------- */
@media (min-width: 600px) {
  .plus ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 821px) {
  .nav .links { display: flex; gap: 22px; }
  .hero .pin {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    justify-content: center; align-items: center; gap: 40px;
    padding: calc(var(--nav-h) + 40px) 32px 40px;
  }
  .stage { height: 560px; }
  .stage .phone { width: 250px; }
  .stage .c1 { width: 170px; }
  .stage .c2 { width: 150px; }
  .features { padding: 0 32px; }
  .step {
    display: grid;
    grid-template-columns: minmax(0, 30rem) 260px;
    grid-template-rows: 1fr auto auto auto 1fr;
    justify-content: center; column-gap: clamp(56px, 7vw, 112px);
    padding: 64px 0;
  }
  .step .eyebrow { grid-column: 1; grid-row: 2; }
  .step h2 { grid-column: 1; grid-row: 3; }
  .step p { grid-column: 1; grid-row: 4; }
  .step .mshot { grid-column: 2; grid-row: 1 / -1; width: 260px; margin: 0; }
  section.blk { padding: 100px 32px; }
  .friend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 64px; gap: 40px; }
  .friend .row img { width: 170px; }
  .plus ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl { padding: 64px 32px; }
  .site-footer { padding: 40px 32px 56px; }
}

/* ---------- MOTION layout: pinning + scroll storytelling ---------- */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  :root {
    --stage-h: min(calc(100svh - var(--nav-h) - 64px), 640px);
    --phone-h: min(calc(100svh - var(--nav-h) - 96px), 640px);
    --phone-w: calc((var(--phone-h) - 18px) * 1320 / 2868 + 18px);
  }
  .nav { transition: border-color .3s; }

  /* hero: pinned; copy fades and lifts, phone straightens and grows, stickers drift out */
  .hero { height: 170vh; height: 170svh; overflow-x: clip; }
  .hero .pin {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    overflow-x: clip;
    /* Full-width pin so its clip edge is the viewport, not the 1120px column:
       the same 1056px content column comes from the inline padding instead. */
    max-width: none;
    padding: var(--nav-h) max(32px, calc((100% - 1056px) / 2)) 0;
  }
  .stage { height: var(--stage-h); }
  .stage .phone {
    /* Height-based size, capped by the stage width so a narrow, tall window
       (e.g. 900x1000) never pushes the scaled phone past the right edge. */
    width: min(calc((var(--stage-h) * .92 - 18px) * 1320 / 2868 + 18px), 84%);
    transform: translate(-45%, -50%) rotate(calc(2deg * (1 - var(--p, 0)))) scale(calc(1 + .14 * var(--p, 0)));
    will-change: transform;
  }
  .stage .c1 {
    width: min(190px, calc(var(--stage-h) * .3));
    bottom: 6%;
    transform: translate(calc(-80px * var(--p, 0)), calc(40px * var(--p, 0))) rotate(calc(-10deg * var(--p, 0)));
    will-change: transform;
  }
  /* The panda sits at the stage's right edge, so its outward drift is bounded by the
     page gutter (pin max-width 1120px, 32px padding) minus room for the 10deg turn:
     ~4px up to 1120px wide, 80px only where the gutter allows. Mostly vertical. */
  .stage .c2 {
    --gutter: max(32px, calc((100vw - 1120px) / 2 + 32px));
    --dx: clamp(0px, calc(var(--gutter) - 28px), 80px);
    width: min(170px, calc(var(--stage-h) * .27));
    transform: translate(calc(var(--dx) * var(--p, 0)), calc(-50px * var(--p, 0))) rotate(calc(10deg * var(--p, 0)));
    will-change: transform;
  }
  .hero .copy { opacity: calc(1 - var(--p, 0) * 1.2); transform: translateY(calc(-40px * var(--p, 0))); }
  .scrollhint {
    display: block; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
    font-size: 13px; color: var(--muted); opacity: calc(1 - var(--p, 0) * 4);
  }
  .scrollhint::after { content: "\2193"; margin-left: .4em; }

  /* features: one sticky phone; text blocks share its centre line (D-03) */
  .features { max-width: none; }
  .features .grid {
    display: grid;
    grid-template-columns: minmax(0, 30rem) var(--phone-w);
    justify-content: center;
    column-gap: clamp(56px, 7vw, 112px);
  }
  .features .sticky {
    display: flex; align-items: center; justify-content: center; align-self: start;
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding-top: var(--nav-h);
  }
  .features .sticky .phone { width: var(--phone-w); flex: none; }
  #screens img { transform: scale(1.04); transition: opacity .6s ease, transform .8s ease; }
  #screens img.on { transform: none; }
  .dots {
    position: absolute; left: calc(100% + 20px); top: calc(50% + var(--nav-h) / 2);
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 10px;
  }
  .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
  .dots i.on { background: var(--accent); transform: scale(1.4); }
  .step {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100vh; min-height: 100svh;
    padding: var(--nav-h) 0 0;
    opacity: .3; transition: opacity .5s ease;
  }
  .step.on { opacity: 1; }
  .step .mshot { display: none; }
  .step .eyebrow { font-size: clamp(15px, calc(var(--phone-h) * .027), 17px); margin: 0 0 12px; }
  .step h2 { font-size: clamp(36px, calc(var(--phone-h) * .078), 52px); line-height: 1.2; margin: 0 0 20px; }
  .step p { font-size: clamp(17px, calc(var(--phone-h) * .031), 20px); line-height: 1.65; max-width: 24em; }

  /* reveal on enter (hidden state only once site.js has run) */
  .reveal { transition: opacity .8s ease, transform .8s ease; }
  .js .reveal:not(.in) { opacity: 0; transform: translateY(40px); }
  .friend .row img { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
  .js .friend:not(.in) .row img:first-child { transform: translateX(-60px) rotate(-8deg); }
  .js .friend:not(.in) .row img:last-child { transform: translateX(60px) rotate(8deg); }
  .plus li { transition: opacity .6s ease, transform .6s ease; }
  .js .plus:not(.in) li { opacity: 0; transform: translateY(20px); }
  .plus li:nth-child(2) { transition-delay: .06s; }
  .plus li:nth-child(3) { transition-delay: .12s; }
  .plus li:nth-child(4) { transition-delay: .18s; }
  .plus li:nth-child(5) { transition-delay: .24s; }
  /* The download card holds the store badges, which must never move: it only fades,
     and its sticker and headline rise inside it. */
  .js #d .dl.reveal:not(.in) { transform: none; }
  .dl img.wave, .dl h2 { transition: transform .8s ease; }
  .js .dl:not(.in) img.wave, .js .dl:not(.in) h2 { transform: translateY(24px); }
}