/* ==========================================================================
   GRAPHICS – concept illustrations that replace app screenshots.
   They show what a feature does, not how the current app screen looks,
   so a UI change in the app never forces an update here.

   Sizing: .g is a size container; .g__stage sets 1em = 4% of its width
   (16px at 400px wide, ~12px on a phone),
   so everything inside is written in em and scales like an image.
   Motion: main.js adds .is-live to [data-gfx] while it is on screen.
   Without .is-live (no JS, reduced motion) every graphic is a complete still.
   ========================================================================== */
:root {
  --g-card: #272a27;
  --g-card-2: #313531;
  --g-card-3: #3a3f3a;
  --g-line: rgba(255, 255, 255, .09);
  --g-line-2: rgba(255, 255, 255, .16);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
  --g-shadow: 0 1.6em 3.2em -1.4em rgba(0, 0, 0, .9), 0 .25em .7em -.2em rgba(0, 0, 0, .45);
  --g-glow: 0 0 0 .3em rgba(29, 185, 84, .12), 0 1em 2.4em -1em rgba(29, 185, 84, .55);
}

.g { position: relative; margin: 0; width: 100%; max-width: var(--g-max, 440px); container-type: inline-size; color: var(--text); font-family: var(--font); line-height: 1.35; --ar-w: 4; --ar-h: 5; }
.g__stage { position: relative; font-size: 4cqw; aspect-ratio: var(--ar-w) / var(--ar-h); }

/* Graphics carry their own breathing room, so the grey visual well stays thin. */
@media (min-width: 961px) { .panel .split { grid-template-columns: 1fr 1fr; } }
.panel .split__visual { padding: clamp(8px, 1.4vw, 16px); }
@media (max-width: 640px) { .panel { padding: 20px; } }

/* Sticky panels must fit the viewport, so the graphic shrinks with its height. */
.panel .g { max-width: min(var(--g-max, 440px), calc((100svh - 300px) * var(--ar-w) / var(--ar-h))); }
@media (max-width: 960px) { .panel .g { max-width: var(--g-max, 440px); } }

/* ---------- Primitives ---------- */
.g-card { position: absolute; background: var(--g-card); border: 1px solid var(--g-line); border-radius: 1.25em; box-shadow: var(--g-hi), var(--g-shadow); }
.g-card--flat { position: relative; }
.g-card--2 { background: var(--g-card-2); }
.g-card--glow { border-color: rgba(29, 185, 84, .45); box-shadow: var(--g-hi), var(--g-glow); }

.g-label { font-size: .62em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.g-chip { display: inline-flex; align-items: center; gap: .4em; padding: .38em .85em; border-radius: 999px; font-size: .72em; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--text-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--g-line); }
.g-chip--on { color: var(--green-2); background: var(--green-soft); border-color: rgba(29, 185, 84, .4); }
.g-chip--solid { color: var(--on-accent); background: var(--green); border-color: transparent; }

.g-jp { font-family: var(--font-jp); letter-spacing: 0; }
.g-ok { color: var(--green-2); }
.g-weak { color: var(--weak); }
.g-dim { color: var(--text-3); }

/* JLPT level badge */
.g-lv { display: inline-grid; place-items: center; min-width: 2.2em; padding: .2em .45em; border-radius: .45em; font-size: .66em; font-weight: 800; letter-spacing: .02em; color: #0b0c0b; background: var(--lv, var(--green-2)); }
.g-lv--n5 { --lv: #7ee2a0; } .g-lv--n4 { --lv: #9fd7ff; } .g-lv--n3 { --lv: #f5d93b; } .g-lv--n2 { --lv: #ffae6b; } .g-lv--n1 { --lv: #ff8fa3; }

/* Mascot: 3×3 reaction sheet (0 smile, 1 heart, 2 sparkle, 3 surprised, 4 star-eyes, 5 blush, 6 cheer, 7 dizzy, 8 laugh) */
.g-mascot { display: block; aspect-ratio: 1; background: var(--sheet) 0 0 / 300% 300% no-repeat; filter: drop-shadow(0 .8em 1em rgba(0, 0, 0, .5)); }
.g-mascot--samurai { --sheet: url("assets/mascot-samurai.webp"); }
.g-mascot--tanu { --sheet: url("assets/mascot-tanu.webp"); }
.g-mascot--miko { --sheet: url("assets/mascot-miko.webp"); }
.g-mascot--ninja { --sheet: url("assets/mascot-ninja.webp"); }
.g-face-1 { background-position: 50% 0; } .g-face-2 { background-position: 100% 0; }
.g-face-3 { background-position: 0 50%; } .g-face-4 { background-position: 50% 50%; } .g-face-5 { background-position: 100% 50%; }
.g-face-6 { background-position: 0 100%; } .g-face-7 { background-position: 50% 100%; } .g-face-8 { background-position: 100% 100%; }

/* Video scene: an illustrated background (assets/scenes/<name>.webp, optional)
   over a designed gradient, with a thumbnail-style title on top.
   A missing image simply leaves the gradient, so the scene always renders. */
.g-scene { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: .85em; isolation: isolate; background: var(--scene-img, none) center / cover no-repeat, var(--scene-bg, linear-gradient(135deg, #3a3f3a, #1e1f1e)); }
.g-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, .22), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(0, 0, 0, .28), transparent 60%); }
.g-scene--konbini   { --scene-img: url("assets/scenes/konbini.webp");   --scene-bg: linear-gradient(135deg, #ffe3ec 0%, #ffd1dc 45%, #ffe9a8 100%); }
.g-scene--ramen     { --scene-img: url("assets/scenes/ramen.webp");     --scene-bg: linear-gradient(135deg, #ffb35c 0%, #f06a2e 55%, #b3261e 100%); }
.g-scene--street    { --scene-img: url("assets/scenes/street.webp");    --scene-bg: linear-gradient(135deg, #2b1b5a 0%, #6b2c8f 50%, #ff4f8b 100%); }
.g-scene--cafe      { --scene-img: url("assets/scenes/cafe.webp");      --scene-bg: linear-gradient(135deg, #f3e3c8 0%, #d9b98c 55%, #a8764a 100%); }
.g-scene--travel    { --scene-img: url("assets/scenes/travel.webp");    --scene-bg: linear-gradient(160deg, #bfe7ff 0%, #7cc6ff 45%, #3b82e0 100%); }
.g-scene--podcast   { --scene-img: url("assets/scenes/podcast.webp");   --scene-bg: linear-gradient(135deg, #c9f2ff 0%, #8fdcff 50%, #5ab4e8 100%); }
.g-scene--anime     { --scene-img: url("assets/scenes/anime.webp");     --scene-bg: linear-gradient(135deg, #ffb3e1 0%, #c79bff 55%, #7f7bff 100%); }
.g-scene--interview { --scene-img: url("assets/scenes/interview.webp"); --scene-bg: linear-gradient(135deg, #e7ecef 0%, #b9c3cb 55%, #8793a0 100%); }
.g-scene__title { position: absolute; left: 6%; right: 6%; top: 50%; translate: 0 -50%; font-family: var(--font-jp); font-weight: 700; font-size: 1.5em; line-height: 1.1; letter-spacing: 0; color: #fff; -webkit-text-stroke: .16em #141414; paint-order: stroke fill; text-wrap: balance; }
.g-scene__title--dark { color: #141414; -webkit-text-stroke-color: #fff; }
.g-scene__badge { position: absolute; left: .5em; top: .5em; }
.g-scene__time { position: absolute; right: .45em; bottom: .45em; padding: .15em .4em; border-radius: .35em; font-size: .58em; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .78); }

/* Waveform: <span class="g-wave"><i style="--h:.4"></i>…</span> */
.g-wave { display: flex; align-items: center; gap: .18em; height: 2em; }
.g-wave i { display: block; flex: none; width: .22em; height: calc(var(--h, .5) * 100%); border-radius: 1em; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  [data-gfx] *, [data-gfx] *::before, [data-gfx] *::after { animation: none !important; }
}