/* /japanese-hiragana: the Japanese Hiragana landing page.
   Colors follow the app's sakura theme: warm washi paper in light, a deep
   plum night in dark, the cherry accent, indigo for Write and plum for Quiz.
   Kana are set in Klee One and the English headings in Yuji Syuku, the two
   fonts the app bundles (both SIL Open Font License 1.1), subset to what this
   page draws. Light and dark follow prefers-color-scheme. */

@font-face {
    font-family: "Klee One Kana"; src: url("/css/fonts/klee-one-kana.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+3001-3002, U+3040-309F, U+30FC, U+512A;
}
@font-face {
    font-family: "Yuji Syuku Latin"; src: url("/css/fonts/yuji-syuku-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}

.jh {
    position: relative;
    --jh-bg: #FBF5EC;
    --jh-surface: #FFFDF8;
    --jh-sunken: #F3E9DC;
    --jh-text: #2B1E22;
    --jh-text-2: #6B5059;
    --jh-sep: #EAD9CF;
    --jh-accent: #A8284F;
    --jh-accent-2: #35506E;
    --jh-glow: rgba(243, 191, 204, .45);
    --jh-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --jh-round: "Yuji Syuku Latin", "Hiragino Mincho ProN", Georgia, serif;
    --jh-kana: "Klee One Kana", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
    background: var(--jh-bg);
    color: var(--jh-text);
    font-family: var(--jh-font);
    overflow: clip;
}
@media (prefers-color-scheme: dark) {
    .jh {
        --jh-bg: #1C1420;
        --jh-surface: #2A1F2D;
        --jh-sunken: #241A27;
        --jh-text: #F7EDF1;
        --jh-text-2: #CDB6C2;
        --jh-sep: #3A2C3D;
        --jh-accent: #F29BB6;
        --jh-accent-2: #A6C1E0;
        --jh-glow: rgba(231, 154, 178, .14);
    }
}
@media (prefers-color-scheme: dark) { body.jh-page { background: #1C1420; } }

.jh::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 140vh; pointer-events: none;
    background: radial-gradient(60% 50% at 70% 30%, var(--jh-glow), transparent 70%);
}

/* ── Chapter text ─────────────────────────────────────────────────────────── */
.jh-card { position: relative; z-index: 2; max-width: 440px; }
.jh-card h1, .jh-card h2 { font-family: var(--jh-round); color: var(--jh-text); letter-spacing: -.02em; }
.jh-card h1 { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 800; line-height: 1; margin: 6px 0 18px; }
.jh-card h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.08; margin: 4px 0 14px; }
.jh-card p { color: var(--jh-text-2); font-size: 1.08rem; line-height: 1.6; margin: 0 0 12px; }
.jh-card .jh-lede { font-size: 1.25rem; color: var(--jh-text); }
.jh-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--jh-accent) !important; margin-bottom: 6px !important;
}
.jh-feature h2 { color: var(--jh-text); }
.jh-ja { font-family: var(--jh-kana); font-weight: 600; font-size: 1.15em; line-height: 1.2; color: var(--jh-accent); }
.jh-letters {
    font-family: var(--jh-kana); font-size: 1.35rem !important; line-height: 1.7 !important; letter-spacing: .06em;
    color: var(--jh-text) !important; margin: 4px 0 14px !important; word-spacing: .2em;
}
.jh-aside { font-size: .95rem !important; font-weight: 600; color: var(--jh-text) !important; opacity: .8; }
.jh-note { font-size: .92rem !important; }
.jh-icon img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 10px 30px rgba(60, 24, 36, .18); display: block; margin-bottom: 18px; }
/* Facts: a quiet two-column list, label left and detail right, split by hairlines. */
.jh-facts { list-style: none; padding: 0; margin: 4px 0 16px; border-top: 1px solid var(--jh-sep); }
.jh-facts li {
    display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 16px; align-items: baseline;
    color: var(--jh-text-2); line-height: 1.5; padding: 11px 0; border-bottom: 1px solid var(--jh-sep);
}
.jh-facts strong {
    color: var(--jh-accent); font-family: var(--jh-round); font-weight: 650;
    font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 380px) { .jh-facts li { grid-template-columns: 1fr; row-gap: 2px; } }
/* Bottom center of the first screen; it scrolls away with the hero. */
.jh-scroll-cue {
    position: absolute; left: 50%; top: calc(100svh - var(--nav-h) - 96px); transform: translateX(-50%);
    margin: 0; text-align: center; white-space: nowrap; z-index: 2;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--jh-text-2);
}
.jh-scroll-cue::after { content: ""; display: block; width: 2px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--jh-accent), transparent); animation: jh-cue 1.8s ease-in-out infinite; }
@keyframes jh-cue { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(8px); opacity: 1; } }

/* ── Store badges ─────────────────────────────────────────────────────────── */
.jh-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.jh-badge {
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px;
    border-radius: 12px; font-family: var(--jh-font); font-size: 1.2rem; font-weight: 600; line-height: 1.05; text-decoration: none;
}
.jh-badge svg { width: 22px; height: 26px; flex: none; }
.jh-badge span { display: flex; flex-direction: column; }
.jh-badge small { font-size: .68rem; font-weight: 500; letter-spacing: .01em; }
.jh-badge-apple { background: #000; color: #fff; border: 1px solid #000; transition: transform .2s, box-shadow .2s; }
.jh-badge-apple:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); color: #fff; }
.jh-badge-apple:focus-visible { outline: 3px solid var(--jh-accent); outline-offset: 3px; }
.jh-badge-play { background: #000; color: #fff; border: 1px solid #000; transition: transform .2s, box-shadow .2s; }
.jh-badge-play:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); color: #fff; }
.jh-badge-play:focus-visible { outline: 3px solid var(--jh-accent); outline-offset: 3px; }
.jh-badge-play svg { width: 20px; height: 22px; }
@media (prefers-color-scheme: dark) { .jh-badge-apple, .jh-badge-play { border-color: #A6A6A6; } }

/* ── Screenshots (shown when the page is not in 3D) ───────────────────────── */
.jh-shot { margin: 0; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.jh-shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; border-radius: 32px; box-shadow: 0 24px 60px rgba(60, 24, 36, .18); }
.jh-shot-wide img { max-height: 460px; border-radius: 22px; }
.jh-shot-watch img { max-height: 300px; border-radius: 0; box-shadow: none; }
.jh-shot-widgets img { max-height: 200px; border-radius: 0; box-shadow: none; }

/* Flat layout: a normal stack of chapters, text beside the screen. */
.jh-ch { padding: 72px 24px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.jh-ch + .jh-ch { border-top: 1px solid var(--jh-sep); }
.jh-stage { display: none; }
@media (max-width: 820px) {
    .jh-ch { grid-template-columns: 1fr; gap: 28px; padding: 56px 20px; }
    .jh-shot img { max-height: 520px; }
}

/* ── 3D layout (japanese-hiragana.js adds .is-3d once WebGL is up) ────────────────── */
.jh.is-3d .jh-stage {
    display: block; position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
    z-index: 0; pointer-events: none;
}
.jh.is-3d .jh-stage canvas { display: block; width: 100%; height: 100%; }
.jh.is-3d .jh-shot { display: none; }
.jh.is-3d .jh-ch {
    display: block; max-width: none; margin: 0; border: 0; position: relative; z-index: 1;
    min-height: 170vh; padding: 24vh max(32px, calc((100vw - 1200px) / 2)) 0;
}
.jh.is-3d .jh-hero { min-height: 130vh; padding-top: max(12vh, 64px); }
.jh.is-3d .jh-feature { min-height: 200vh; }
.jh.is-3d .jh-finale { min-height: 190vh; }
.jh.is-3d .jh-card {
    position: sticky; top: max(calc(var(--nav-h) + 24px), 20vh);
    padding: 30px 32px; border-radius: 26px;
    background: color-mix(in srgb, var(--jh-bg) 74%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--jh-sep) 70%, transparent);
    box-shadow: 0 20px 50px rgba(60, 24, 36, .08);
}
.jh.is-3d .jh-hero .jh-card { top: max(12vh, 64px); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; }

/* Phones and portrait tablets: the devices take the top of the screen and the
   chapter text pins to the bottom. Matches japanese-hiragana.js (aspect below 1). */
@media (max-aspect-ratio: 1/1) {
    .jh.is-3d .jh-ch {
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 14px 0; min-height: 150vh;
    }
    .jh.is-3d .jh-feature { min-height: 175vh; }
    .jh.is-3d .jh-hero { min-height: 120vh; }
    .jh.is-3d .jh-card, .jh.is-3d .jh-hero .jh-card {
        position: sticky; top: auto; bottom: 14px; max-width: 560px; width: 100%; margin: 0 auto;
        padding: 20px 22px; border-radius: 22px;
        background: color-mix(in srgb, var(--jh-bg) 80%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
        border: 1px solid color-mix(in srgb, var(--jh-sep) 70%, transparent);
    }
    .jh.is-3d .jh-card h1 { font-size: 2.6rem; margin-bottom: 10px; }
    .jh.is-3d .jh-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
    .jh.is-3d .jh-card p { font-size: .97rem; line-height: 1.5; margin-bottom: 8px; }
    .jh.is-3d .jh-card .jh-lede { font-size: 1.05rem; }
    .jh.is-3d .jh-icon img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px; }
    .jh.is-3d .jh-badges { margin: 12px 0 8px; }
    .jh.is-3d .jh-scroll-cue { display: none; }
    .jh.is-3d .jh-facts li { padding: 7px 0; font-size: .92rem; }
}

/* ── The header while the story plays: slim and see-through ───────────────── */
body.jh-page .nav-inner, body.jh-page .nav-links { transition: height .35s ease; }
body.jh-page .nav-logo img { transition: height .35s ease; }
body.jh-page.jh-immersive .nav {
    background: color-mix(in srgb, var(--white) 55%, transparent);
    border-bottom-color: transparent;
}
/* Only the desktop bar shrinks: on phones the menu is a drawer sized from --nav-h. */
@media (min-width: 769px) {
body.jh-page.jh-immersive .nav {
    --nav-h: 50px;
    background: color-mix(in srgb, var(--white) 55%, transparent);
    border-bottom-color: transparent;
}
body.jh-page.jh-immersive .nav-logo img { height: 34px !important; }
body.jh-page.jh-immersive .nav-links a:not(.nav-cta) { font-size: .82rem; }
}
.jh:not(.is-3d) .jh-scroll-cue { display: none; }

@media (prefers-reduced-motion: reduce) {
    .jh-scroll-cue::after { animation: none; }
    body.jh-page .nav-inner, body.jh-page .nav-links, body.jh-page .nav-logo img { transition: none; }
}

/* ── Letter sounds: a small pill under the header, off until pressed ──────── */
.jh-sound {
    position: fixed; z-index: 5; right: 18px; top: calc(var(--nav-h, 64px) + 14px);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px 9px 12px; border-radius: 999px; cursor: pointer;
    font: 600 .88rem/1 var(--jh-font); color: var(--jh-text);
    background: color-mix(in srgb, var(--jh-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--jh-sep); box-shadow: 0 8px 24px rgba(60, 24, 36, .1);
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.jh-sound[hidden] { display: none; }
.jh-sound:hover { transform: translateY(-1px); }
.jh-sound:active { transform: scale(.97); }
.jh-sound:focus-visible { outline: 3px solid var(--jh-accent); outline-offset: 3px; }
.jh-sound .jh-sound-on { display: none; }
.jh-sound[aria-pressed="true"] { background: var(--jh-accent); border-color: var(--jh-accent); color: var(--jh-bg); }
.jh-sound[aria-pressed="true"] .jh-sound-on { display: inline; }
.jh-sound[aria-pressed="true"] .jh-sound-off { display: none; }
@media (prefers-reduced-motion: reduce) { .jh-sound { transition: none; } }

/* Headings in brush lettering stay regular weight (the face has one). */
.jh-card h1, .jh-card h2 { font-weight: 400 !important; letter-spacing: 0; }
.jh-price { font-family: var(--jh-round); font-size: 1.45rem !important; color: var(--jh-accent) !important; margin: 6px 0 12px !important; }
.jh-aside a { color: var(--jh-accent); }
/* Google Play is not live yet: plain text, not a badge. */
.jh-badge-soon {
    display: inline-flex; align-items: center; min-height: 52px; padding: 0 4px;
    font-size: .95rem; font-weight: 600; color: var(--jh-text-2);
}