/* r17 Gopy moth (Astra, 17 Oct 2026): the "Meet Gopy" block and the mascot layer. Owned with js/r17-moth.js. */

/* the moth's canvas never takes part in layout; its hit button is the only thing that takes clicks */
.gm-canvas { contain: strict; }
.gm-hit { will-change: transform; }

/* Meet Gopy: an empty stage on the left where the moth lands (the stage keeps a fixed size: no layout shift) */
.gm-meet { position: relative; max-width: 1180px; margin: 0 auto; padding: 110px clamp(18px, 3.4vw, 48px) 90px; }
.gm-wrap { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.gm-stage { position: relative; height: 340px; border-radius: var(--r, 22px); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 52%, rgba(52, 232, 140, .16), rgba(52, 232, 140, 0) 70%),
              linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 50%, rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gm-stage .gopy-a { left: 50%; top: 50%; }
.gm-copy h2 { margin: 0 0 22px; }
.gm-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gm-lines li { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5; color: var(--soft, #D9DAD7); padding-left: 18px; position: relative; }
.gm-lines li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #34E88C; box-shadow: 0 0 8px rgba(52, 232, 140, .7); }
.gm-lines b { color: var(--text, #F6F6F4); font-weight: 700; }
.gm-note { margin-top: 22px; font-size: 13.5px; color: var(--mute, #A6A7A9); }
@media (max-width: 760px) {
  .gm-meet { padding: 80px 18px 64px; }
  .gm-wrap { grid-template-columns: 1fr; gap: 26px; }
  .gm-stage { height: 190px; }
}