/* ================================================================
   icons.css — Nihongo Planet animated icon system
   Animations live HERE (global CSS) and target the unique classes
   of INLINE <svg class="npic anim-*"> instances. Standalone .svg
   files stay static so they are safe anywhere.
   ================================================================ */

svg.npic { display: block; transform-origin: center; transform-box: fill-box; }
.np-draw path { stroke-dasharray: 80; }

@keyframes npPulse      { 0%,100% { transform: scale(1); }    50%    { transform: scale(1.18); } }
@keyframes npSlideUp    { 0%,100% { transform: translateY(5px); opacity: .35; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes npFloat      { 0%,100% { transform: translateY(0); }    50%    { transform: translateY(-3px); } }
@keyframes npFlicker    { 0%,100% { opacity: 1; } 25% { opacity: .35; } 50% { opacity: .85; } 70% { opacity: .5; } }
@keyframes npPop        { 0%,100% { transform: scale(.94); } 45%   { transform: scale(1.14); } }
@keyframes npSpin       { to { transform: rotate(360deg); } }
@keyframes npShine      { 0%,100% { filter: none; transform: scale(1); } 50% { filter: drop-shadow(0 0 5px rgba(255,214,102,.95)); transform: scale(1.06); } }
@keyframes npBreathe    { 0%,100% { transform: scale(1); }        50%    { transform: scale(1.07); } }
@keyframes npShake      { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1.5px); } }
@keyframes npSlideRight { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes npBlink      { 0%,40%,60%,100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes npFlame      { 0%,100% { opacity: 1; filter: hue-rotate(0deg); } 30% { opacity: .72; filter: hue-rotate(22deg) drop-shadow(0 0 4px rgba(255,120,40,.8)); } 60% { opacity: .95; filter: hue-rotate(-14deg); } }
@keyframes npFlipX      { to { transform: rotateX(360deg); } }
@keyframes npBounce     { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 50% { transform: translateY(0); } 65% { transform: translateY(-2.5px); } 80% { transform: translateY(0); } }
@keyframes npFadeIn     { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes npSlideLeft  { 0%,100% { transform: translateX(3px); }  50% { transform: translateX(-3px); } }
@keyframes npFlipY      { to { transform: rotateY(360deg); } }
@keyframes npUnlock     { 0%,55%,100% { transform: translateX(0) rotate(0deg); } 62% { transform: translateX(-2px) rotate(-6deg); } 70% { transform: translateX(2px) rotate(5deg); } 78% { transform: translateX(-1.5px) rotate(-3deg); } 86% { transform: translateX(1px) rotate(0deg); } }
@keyframes npRise       { 0%,100% { transform: translateY(3px); filter: none; } 50% { transform: translateY(-4px); filter: drop-shadow(0 0 5px rgba(247,178,103,.9)); } }
@keyframes npVibrate    { 0%,100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(-1.2px,0) rotate(-2deg); } 75% { transform: translate(1.2px,0) rotate(2deg); } }
@keyframes npPopRot     { 0%,100% { transform: scale(.94) rotate(0deg); } 45% { transform: scale(1.12) rotate(5deg); } }
@keyframes npGrow       { 0%,100% { transform: scale(1); filter: none; } 50% { transform: scale(1.22); filter: drop-shadow(0 0 5px rgba(247,109,142,.9)); } }
@keyframes npShrink     { 0%,100% { transform: scale(1); }         50%    { transform: scale(.82); } }
@keyframes npDrop       { 0% { transform: translateY(-5px); } 55% { transform: translateY(2px); } 70% { transform: translateY(-1.5px); } 85%,100% { transform: translateY(0); } }
@keyframes npDrawStroke { 0% { stroke-dashoffset: 80; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes npDrawPop    { 0% { transform: scale(.96); } 45% { transform: scale(1); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes npWriteLoop  { 0% { stroke-dashoffset: 80; } 55%,80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } }
@keyframes npSunPulse   { 0%,100% { transform: scale(1); filter: none; } 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255,159,64,.95)); } }
@keyframes npTimerSpin  { 0%,15% { transform: rotate(0deg); } 80%,100% { transform: rotate(360deg); } }
@keyframes npWave       { 0%,100% { transform: rotate(-6deg); }    50%    { transform: rotate(6deg); } }
@keyframes npSpinOut    { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-90deg) scale(.78); } }
@keyframes npFlash      { 0%,40%,80% { opacity: 1; } 20%,60% { opacity: .15; } }

/* --- animation classes --- */
.anim-pulse       { animation: npPulse 2s ease-in-out infinite; }
.anim-slide-up    { animation: npSlideUp 2.4s ease-in-out infinite; }
.anim-float       { animation: npFloat 2.6s ease-in-out infinite; }
.anim-flicker     { animation: npFlicker 2.2s linear infinite; }
.anim-pop         { animation: npPop 2s cubic-bezier(.34,1.56,.64,1) infinite; }
.anim-spin        { animation: npSpin 2.5s linear infinite; }
.anim-shine       { animation: npShine 2.4s ease-in-out infinite; }
.anim-breathe     { animation: npBreathe 2.8s ease-in-out infinite; }
.anim-shake       { animation: npShake 1.8s ease-in-out infinite; }
.anim-slide-right { animation: npSlideRight 2.4s ease-in-out infinite; }
.anim-blink       { animation: npBlink 2.6s ease-in-out infinite; }
.anim-flame       { animation: npFlame 1.8s ease-in-out infinite; }
.anim-flip-x      { animation: npFlipX 2.6s linear infinite; }
.anim-bounce      { animation: npBounce 1.8s cubic-bezier(.28,.84,.42,1) infinite; }
.anim-fade-in     { animation: npFadeIn 2.4s ease-in-out infinite; }
.anim-slide-left  { animation: npSlideLeft 2.4s ease-in-out infinite; }
.anim-flip-y      { animation: npFlipY 2.8s linear infinite; }
.anim-unlock      { animation: npUnlock 2.2s ease-in-out infinite; }
.anim-rise        { animation: npRise 2.6s ease-in-out infinite; }
.anim-vibrate     { animation: npVibrate .9s linear infinite; }
.anim-pop-rot     { animation: npPopRot 2.2s cubic-bezier(.34,1.56,.64,1) infinite; }
.anim-grow        { animation: npGrow 2.2s ease-in-out infinite; }
.anim-spin-fast   { animation: npSpin 1.2s linear infinite; }
.anim-shrink      { animation: npShrink 2.2s ease-in-out infinite; }
.anim-drop        { animation: npDrop 2s cubic-bezier(.55,0,.7,.4) infinite; }
.anim-sun-pulse   { animation: npSunPulse 2.4s ease-in-out infinite; }
.anim-timer-spin  { animation: npTimerSpin 2.6s cubic-bezier(.4,0,.6,1) infinite; }
.anim-wave        { animation: npWave 2.4s ease-in-out infinite; transform-origin: 50% 88%; }
.anim-spin-out    { animation: npSpinOut 2.2s ease-in-out infinite; }
.anim-flash       { animation: npFlash 1.6s steps(1,end) infinite; }

/* stroke-draw combos */
.anim-draw-pop svg path, svg.anim-draw-pop path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: npDrawStroke 2.4s ease-in-out infinite, npDrawPop 2.4s ease-in-out infinite; }
.anim-write svg path, svg.anim-write path       { stroke-dasharray: 80; stroke-dashoffset: 80; animation: npWriteLoop 2.6s ease-in-out infinite; }

/* per-icon duration tweaks */
#icon-eg          { animation-duration: 1.4s; }
#icon-moon        { animation-duration: 3s; }
#icon-kanji-study-svgrepo-com { animation-duration: 3s; }
#icon-library-big { animation-duration: 2.8s; }
#icon-circle-user-round { animation-duration: 2.8s; }
#icon-square-library    { animation-duration: 2.6s; }
#icon-square-check-big  { animation-duration: 2.4s; }
#icon-square-pen        { animation-duration: 2.6s; }

@media (prefers-reduced-motion: reduce) {
    svg.npic, .np-draw path, .anim-write path { animation: none !important; }
}

/* ---------- gallery page ---------- */
.icn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}

.icn-card {
    margin: 0;
    border-radius: var(--radius-xl);
    background: var(--glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.15rem 1rem .9rem;
    text-align: center;
    transition: transform .2s ease, border-color .2s ease;
}

.icn-card:hover { transform: translateY(-3px); border-color: rgba(247,109,142,.5); }

.icn-stage {
    height: 84px;
    display: grid;
    place-items: center;
    margin-bottom: .7rem;
}

.icn-stage svg { width: 52px; height: 52px; }

.icn-card figcaption b {
    display: block;
    font-size: .74rem;
    overflow-wrap: anywhere;
}

.icn-card figcaption span {
    font-size: .66rem;
    color: var(--accent-orange);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.icn-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(247, 109, 142, .28);
    background:
        radial-gradient(640px 260px at 100% 0%, rgba(214,48,49,.18), transparent 62%),
        radial-gradient(420px 220px at 0% 100%, rgba(247,178,103,.12), transparent 60%),
        var(--grad-soft);
    padding: 1.5rem 1.7rem;
    margin-bottom: 1.5rem;
}

.icn-hero h1 { margin: 0 0 .3rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.icn-hero p  { margin: 0; color: var(--text-muted); font-size: .88rem; }