/* /all-square: the All Square landing page.
   Colors follow the app's brand catalog (SharedUI Brand.xcassets): the
   system canvas with the brand purple #7A4183 in light, true black with the
   lighter purple #B572C0 in dark, green for "gets back" and amber for "owes".
   The app uses system fonts (the brand font is not licensed for it), so the
   page does too, with SF Pro Rounded headings where the system has them.
   Light and dark follow prefers-color-scheme. */

.as {
    position: relative;
    --as-bg: #F2F2F7;
    --as-surface: #FFFFFF;
    --as-sunken: #E9E6EF;
    --as-text: #1C1426;
    --as-text-2: #5C5865;
    --as-sep: #DCD6E3;
    --as-accent: #7A4183;
    --as-accent-2: #1F7A4D;
    --as-owe: #B4530A;
    --as-glow: rgba(122, 65, 131, .16);
    --as-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --as-round: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
    background: var(--as-bg);
    color: var(--as-text);
    font-family: var(--as-font);
    overflow: clip;
}
@media (prefers-color-scheme: dark) {
    .as {
        --as-bg: #0B0710;
        --as-surface: #1C1424;
        --as-sunken: #160F1D;
        --as-text: #F4EEF7;
        --as-text-2: #B7B0C0;
        --as-sep: #2E2438;
        --as-accent: #C995D2;
        --as-accent-2: #4CD38A;
        --as-owe: #FFB061;
        --as-glow: rgba(181, 114, 192, .16);
    }
}
@media (prefers-color-scheme: dark) { body.as-page { background: #0B0710; } }

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

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

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

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

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

/* ── 3D layout (japanese-hiragana.js adds .is-3d once WebGL is up) ────────────────── */
.as.is-3d .as-stage {
    display: block; position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
    z-index: 0; pointer-events: none;
}
.as.is-3d .as-stage canvas { display: block; width: 100%; height: 100%; }
.as.is-3d .as-shot { display: none; }
.as.is-3d .as-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;
}
.as.is-3d .as-hero { min-height: 130vh; padding-top: max(12vh, 64px); }
.as.is-3d .as-feature { min-height: 200vh; }
.as.is-3d .as-finale { min-height: 190vh; }
.as.is-3d .as-card {
    position: sticky; top: max(calc(var(--nav-h) + 24px), 20vh);
    padding: 30px 32px; border-radius: 26px;
    background: color-mix(in srgb, var(--as-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(--as-sep) 70%, transparent);
    box-shadow: 0 20px 50px rgba(46, 26, 71, .08);
}
.as.is-3d .as-hero .as-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) {
    .as.is-3d .as-ch {
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 14px 0; min-height: 150vh;
    }
    .as.is-3d .as-feature { min-height: 175vh; }
    .as.is-3d .as-hero { min-height: 120vh; }
    .as.is-3d .as-card, .as.is-3d .as-hero .as-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(--as-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(--as-sep) 70%, transparent);
    }
    .as.is-3d .as-card h1 { font-size: 2.6rem; margin-bottom: 10px; }
    .as.is-3d .as-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
    .as.is-3d .as-card p { font-size: .97rem; line-height: 1.5; margin-bottom: 8px; }
    .as.is-3d .as-card .as-lede { font-size: 1.05rem; }
    .as.is-3d .as-icon img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px; }
    .as.is-3d .as-badges { margin: 12px 0 8px; }
    .as.is-3d .as-scroll-cue { display: none; }
    .as.is-3d .as-facts li { padding: 7px 0; font-size: .92rem; }
}

/* ── The header while the story plays: slim and see-through ───────────────── */
body.as-page .nav-inner, body.as-page .nav-links { transition: height .35s ease; }
body.as-page .nav-logo img { transition: height .35s ease; }
body.as-page.as-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.as-page.as-immersive .nav {
    --nav-h: 50px;
    background: color-mix(in srgb, var(--white) 55%, transparent);
    border-bottom-color: transparent;
}
body.as-page.as-immersive .nav-logo img { height: 34px !important; }
body.as-page.as-immersive .nav-links a:not(.nav-cta) { font-size: .82rem; }
}
.as:not(.is-3d) .as-scroll-cue { display: none; }

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

.as-price { font-family: var(--as-round); font-size: 1.45rem !important; color: var(--as-accent) !important; margin: 6px 0 12px !important; }
.as-aside a { color: var(--as-accent); }
.as-price { font-family: var(--as-round); font-size: 1.45rem !important; color: var(--as-accent) !important; margin: 6px 0 12px !important; }
.as-aside a { color: var(--as-accent); }
/* Words, not only color: "gets back" in green, "owes" in amber, as in the app. */
.as-gets { color: var(--as-accent-2); font-weight: 650; }
.as-owes { color: var(--as-owe); font-weight: 650; }
.as-ledger { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; gap: 6px; max-width: 360px; }
.as-ledger li { display: flex; justify-content: space-between; gap: 12px; font-size: 1rem; color: var(--as-text); padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--as-surface) 80%, transparent); border: 1px solid var(--as-sep); }
.as-ledger li span:last-child { font-variant-numeric: tabular-nums; }