/* /about hero, "爆米花": press the kernel and handfuls of popcorn fly out and land on the faint dotted
   "Bonmipang"; hold to keep popping. The dotted word and the kernel are the first paint, so nothing changes until
   someone presses. Statement icons below pop from kernel to puff as each statement scrolls up. */

.pop-hero { position: relative; min-height: 100vh; min-height: 100svh; min-height: calc(var(--svh-lock, 1svh) * 100); display: flex; align-items: center; padding: 7.5rem 0 4rem; overflow: hidden; }
.pop-hero .glow { position: absolute; top: -20%; right: -8%; width: 760px; height: 620px; background: radial-gradient(circle at center, rgba(235,162,78,0.16), transparent 62%); filter: blur(20px); pointer-events: none; }
.pop-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pop-copy h1 { font-size: clamp(2.3rem, 4.4vw, 4.4rem); margin: 1.4rem 0 1.4rem; }
.pop-copy h1 .nw { white-space: nowrap; }
.pop-copy h1 em { font-style: normal; color: var(--gold); }
.pop-copy p { color: var(--on-dark-2); font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 34rem; line-height: 1.8; }

/* ---- Field ---- */
.pop-field {
    position: relative; cursor: pointer; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.pop-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pop-ghosts circle { fill: rgba(245,233,211,0.17); }
.pop-pieces { transition: filter 0.8s ease; }
.pop-field.is-full .pop-pieces { filter: drop-shadow(0 0 6px rgba(235,162,78,0.45)); }
.pop-flash { opacity: 0; }
.pop-kernel-body { transition: transform 0.12s cubic-bezier(0.23, 1, 0.32, 1); }
.pop-field.is-heating .pop-kernel-body { transform: scale(1.12, 0.86); }
@media (hover: hover) and (pointer: fine) {
    .pop-field:hover .pop-kernel-body { transform: scale(1.08); }
    .pop-field.is-heating:hover .pop-kernel-body { transform: scale(1.12, 0.86); }
}

/* The accessible control sits over the kernel; the whole field also takes presses */
.pop-btn { position: absolute; left: 50%; top: 89%; width: 56px; height: 56px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.pop-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pop-hint { display: flex; justify-content: center; align-items: baseline; gap: 1rem; margin-top: 1rem; font-size: 0.86rem; color: var(--on-dark-2); }
.pop-count { color: var(--gold); font-size: 0.74rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* ---- Statement icons: kernel → puff ---- */
.statement { grid-template-columns: 3rem 2.75rem 1fr; }
.stmt-pop { align-self: start; width: 30px; height: 30px; margin-top: 0.35em; }
.stmt-pop svg { display: block; overflow: visible; }
.sp-kernel, .sp-puff { transform-box: fill-box; transform-origin: center; }
.sp-kernel { opacity: 0; }
.js-motion:not(.motion-fallback) .statement:not(.popped) .sp-kernel { opacity: 1; }
.js-motion:not(.motion-fallback) .statement:not(.popped) .sp-puff { opacity: 0; transform: scale(0.3); }
.statement .sp-kernel { transition: opacity 0.15s ease; }
.statement .sp-puff { transition: opacity 0.2s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.statement.no-anim .sp-kernel, .statement.no-anim .sp-puff { transition: none; }
/* Until about-pop.js has set each icon to the right state (e.g. a restored scroll position), the icons stay unpainted */
.js-motion:not(.motion-fallback):not(.pops-ready) .stmt-pop { visibility: hidden; }

@media (max-width: 980px) {
    .pop-wrap { grid-template-columns: 1fr; }
    .pop-hero { padding-top: 6.5rem; }
}
@media (max-width: 560px) {
    .statement { grid-template-columns: auto 1fr; align-items: center; }
    .statement p { grid-column: 1 / -1; }
    .stmt-pop { margin-top: 0; }
    .pop-hint { flex-direction: column; align-items: center; gap: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pop-kernel-body, .pop-pieces { transition: none; }
}