/* Neko3SE LAB top-page animated thumbnails — prototype: e-Gov + PIANO */
.content-link--thumb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 9px;
}

.n3-thumb {
  display: none;
  grid-column: 1 / -1;
  width: 78%;
  margin-inline: auto;
  aspect-ratio: 2.6 / 1;
  overflow: hidden;
  border: 1px solid rgba(154, 196, 90, 0.18);
  border-radius: 12px;
  background: #0d141c;
}

.n3-thumb.n3-thumb--ready { display: block; }
.n3-thumb__svg { display: block; width: 100%; height: 100%; }
.n3-thumb__grid { opacity: 0.22; }
.n3-thumb__line { fill: none; stroke: #62808a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.n3-thumb__muted { fill: #263640; stroke: #62808a; stroke-width: 2; }
.n3-thumb__active { fill: #9ac45a; stroke: #b7e777; }
.n3-thumb__glow { filter: drop-shadow(0 0 7px rgba(154, 196, 90, 0.78)); }
.n3-thumb__label { fill: #8da0aa; font: 700 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; }
.n3-anim { animation-play-state: paused !important; }
.n3-thumb.is-visible .n3-anim { animation-play-state: running !important; }

.n3-thumb--piano .n3-piano-key-c1 { animation: n3-key-press 3s ease-in-out infinite; animation-delay: 0.25s; }
.n3-thumb--piano .n3-piano-key-e  { animation: n3-key-press 3s ease-in-out infinite; animation-delay: 0.75s; }
.n3-thumb--piano .n3-piano-key-g  { animation: n3-key-press 3s ease-in-out infinite; animation-delay: 1.25s; }
.n3-thumb--piano .n3-piano-key-c2 { animation: n3-key-press-strong 3s ease-in-out infinite; animation-delay: 1.75s; }
.n3-thumb--piano .n3-piano-wave { transform-origin: 320px 92px; animation: n3-wave-pulse 3s ease-in-out infinite; }

.n3-thumb--egov .n3-egov-lens { animation: n3-egov-scan 3.6s ease-in-out infinite; }
.n3-thumb--egov .n3-egov-hit { animation: n3-egov-hit 3.6s ease-in-out infinite; }

@keyframes n3-key-press {
  0%, 10%, 100% { transform: translateY(0); fill: #d6dde0; stroke: #81949d; filter: none; }
  3%, 7% { transform: translateY(4px); fill: #9ac45a; stroke: #b7e777; filter: drop-shadow(0 0 8px rgba(154,196,90,.8)); }
}
@keyframes n3-key-press-strong {
  0%, 12%, 100% { transform: translateY(0); fill: #d6dde0; stroke: #81949d; filter: none; }
  3%, 9% { transform: translateY(4px); fill: #9ac45a; stroke: #c8f58a; filter: drop-shadow(0 0 12px rgba(154,196,90,.95)); }
}
@keyframes n3-wave-pulse {
  0%, 8%, 24%, 40%, 56%, 76%, 100% { transform: scaleY(.62); opacity: .58; }
  14%, 30%, 46%, 64% { transform: scaleY(1.22); opacity: 1; }
}
@keyframes n3-egov-scan {
  0%, 8% { transform: translateY(-58px); }
  18% { transform: translateY(-25px); }
  32% { transform: translateY(10px); }
  46%, 72% { transform: translateY(48px); }
  86%, 100% { transform: translateY(-58px); }
}
@keyframes n3-egov-hit {
  0%, 43%, 82%, 100% { opacity: .08; filter: none; }
  50%, 72% { opacity: 1; filter: drop-shadow(0 0 8px rgba(154,196,90,.85)); }
}

@media (prefers-reduced-motion: reduce) {
  .n3-thumb .n3-anim { animation: none !important; }
  .n3-thumb--egov .n3-egov-hit { opacity: .72; }
}


/* Rev.2: wide 2.6:1 thumbnail + half vertical gap to reduce scrolling. */
@media (max-width: 600px) {
  .n3-thumb {
    width: 86%;
  }
}

/* Rev.3: remaining six content thumbnails. */
.n3-thumb--mudagiken .n3-muda-gear { transform-origin: 493px 131px; animation: n3-muda-gear 3.2s linear infinite; }
.n3-thumb--mudagiken .n3-muda-warning { animation: n3-muda-warning 3.2s steps(1,end) infinite; }
.n3-thumb--mudagiken .n3-muda-glitch { animation: n3-muda-glitch 3.2s steps(2,end) infinite; }
.n3-thumb--prompt .n3-prompt-text { animation: n3-prompt-text 2.8s steps(6,end) infinite; }
.n3-thumb--prompt .n3-prompt-cursor { animation: n3-prompt-cursor .7s steps(1,end) infinite; }
.n3-thumb--imageprompt .n3-image-scan { animation: n3-image-scan 3.4s ease-in-out infinite; }
.n3-thumb--imageprompt .n3-image-result { animation: n3-image-result 3.4s ease-in-out infinite; }
.n3-thumb--gosenfu .n3-note { animation: n3-note-travel 3.8s ease-in-out infinite; }
.n3-thumb--gosenfu .n3-note-glow { animation: n3-note-glow 3.8s ease-in-out infinite; }
.n3-thumb--voice .n3-voice-input { animation: n3-voice-input 2.6s ease-in-out infinite; }
.n3-thumb--voice .n3-voice-output { animation: n3-voice-output 2.6s ease-in-out infinite; }
.n3-thumb--voice .n3-voice-arrow { animation: n3-voice-arrow 2.6s ease-in-out infinite; }
.n3-thumb--tuner .n3-tuner-needle { transform-origin: 320px 190px; animation: n3-tuner-needle 3.3s ease-in-out infinite; }
.n3-thumb--tuner .n3-tuner-center { animation: n3-tuner-center 3.3s ease-in-out infinite; }

@keyframes n3-muda-gear { to { transform: rotate(360deg); } }
@keyframes n3-muda-warning { 0%,38%,52%,100%{opacity:.25;filter:none} 40%,50%{opacity:1;filter:drop-shadow(0 0 9px rgba(154,196,90,.9))} }
@keyframes n3-muda-glitch { 0%,64%,72%,100%{transform:translateX(0);opacity:.55} 66%{transform:translateX(8px);opacity:1} 69%{transform:translateX(-6px);opacity:.85} }
@keyframes n3-prompt-text { 0%,10%{stroke-dasharray:0 260} 62%,82%{stroke-dasharray:260 0} 100%{stroke-dasharray:0 260} }
@keyframes n3-prompt-cursor { 0%,48%{opacity:1} 50%,100%{opacity:.12} }
@keyframes n3-image-scan { 0%,10%{transform:translateX(-170px)} 65%,78%{transform:translateX(170px)} 100%{transform:translateX(-170px)} }
@keyframes n3-image-result { 0%,18%{opacity:.12} 60%,82%{opacity:1;filter:drop-shadow(0 0 9px rgba(154,196,90,.5))} 100%{opacity:.12} }
@keyframes n3-note-travel { 0%,8%{transform:translateX(-190px) translateY(18px)} 30%{transform:translateX(-65px) translateY(-6px)} 54%{transform:translateX(55px) translateY(10px)} 78%{transform:translateX(185px) translateY(-12px)} 100%{transform:translateX(185px) translateY(-12px)} }
@keyframes n3-note-glow { 0%,12%,90%,100%{opacity:.35;filter:none} 30%,78%{opacity:1;filter:drop-shadow(0 0 9px rgba(154,196,90,.9))} }
@keyframes n3-voice-input { 0%,100%{opacity:.45} 30%,58%{opacity:1} }
@keyframes n3-voice-output { 0%,25%{opacity:.18} 55%,85%{opacity:1;filter:drop-shadow(0 0 7px rgba(154,196,90,.75))} 100%{opacity:.18} }
@keyframes n3-voice-arrow { 0%,28%,100%{opacity:.25;transform:translateX(-6px)} 48%,72%{opacity:1;transform:translateX(6px)} }
@keyframes n3-tuner-needle { 0%,8%{transform:rotate(-28deg)} 32%{transform:rotate(18deg)} 52%{transform:rotate(-9deg)} 68%,88%{transform:rotate(0deg)} 100%{transform:rotate(-28deg)} }
@keyframes n3-tuner-center { 0%,58%,96%,100%{opacity:.25;filter:none} 68%,88%{opacity:1;filter:drop-shadow(0 0 10px rgba(154,196,90,.95))} }

@media (prefers-reduced-motion: reduce) {
  .n3-thumb--mudagiken .n3-muda-warning,
  .n3-thumb--imageprompt .n3-image-result,
  .n3-thumb--gosenfu .n3-note-glow,
  .n3-thumb--voice .n3-voice-output,
  .n3-thumb--tuner .n3-tuner-center { opacity: .72; }
}

/* DEVICE CAPABILITY LAB thumbnail */
.n3-thumb--devicecap .n3-device-scan{animation:n3-device-scan 2.8s ease-in-out infinite}.n3-thumb--devicecap .n3-device-node{animation:n3-device-node 2.8s ease-in-out infinite}.n3-thumb--devicecap .n3-device-check{animation:n3-device-check 2.8s steps(1,end) infinite}.n3-thumb--devicecap .n3-device-pulse{animation:n3-device-pulse 2.8s ease-in-out infinite}
@keyframes n3-device-scan{0%,12%{opacity:.18;transform:translateX(-8px)}42%,72%{opacity:1;transform:translateX(7px)}100%{opacity:.18;transform:translateX(-8px)}}@keyframes n3-device-node{0%,18%,100%{opacity:.35}48%,78%{opacity:1;filter:drop-shadow(0 0 7px rgba(154,196,90,.75))}}@keyframes n3-device-check{0%,26%{opacity:.32}28%,82%{opacity:1}84%,100%{opacity:.32}}@keyframes n3-device-pulse{0%,100%{opacity:.25;transform:scale(.72);transform-origin:592px 164px}48%,72%{opacity:1;transform:scale(1.18);transform-origin:592px 164px}}
@media(prefers-reduced-motion:reduce){.n3-thumb--devicecap .n3-device-node,.n3-thumb--devicecap .n3-device-check,.n3-thumb--devicecap .n3-device-pulse{opacity:.72}}