/* NAW FX — direction artistique : 30 cosmétiques V1 individualisés.
 * Formes originales en CSS, sans emoji, images externes, RAF ni nœud de plus.
 * Les éléments restent STRICTEMENT enfants du masque alpha WebP / anneau.
 * Les formes s'éclairent lors de l'apparition, puis vivent à rythme doux.
 */
.naw-frame-fx-art {
    background:var(--color);
    box-shadow:0 0 2px var(--color),0 0 4px var(--naw-fx-primary,var(--color));
    filter:drop-shadow(0 0 .7px rgba(20,16,8,.65));
    will-change:opacity,transform;
}
.naw-frame-fx-art::before,.naw-frame-fx-art::after {
    content:'';
    position:absolute;
    display:block;
    pointer-events:none;
}
.naw-frame-fx-art--firefly {
    background:radial-gradient(circle,#fffce5 0 19%,var(--naw-fx-highlight) 23% 43%,var(--color) 60%,transparent 85%);
    box-shadow:0 0 3px 1px var(--color),0 0 5px var(--color);
}
.naw-frame-fx-art--pollen {
    border-radius:48% 52% 52% 48%;
    background:radial-gradient(circle at 32% 23%,#fff5d8,var(--color) 66%,#b88128);
}
.naw-frame-fx-art--spore {
    border:1px solid var(--naw-fx-highlight);
    border-radius:45% 55% 38% 62%;
    background:radial-gradient(circle at 28% 26%,#ffffff,var(--color) 58%,rgba(43,145,133,.16));
    box-shadow:0 0 4px var(--color);
}
.naw-frame-fx-art--leaf {
    border-radius:0 85% 0 85%;
    background:linear-gradient(140deg,var(--naw-fx-highlight),var(--color) 65%,#577a39);
    box-shadow:0 0 2px var(--color);
}
.naw-frame-fx-art--leaf::before {
    top:15%;left:49%;width:1px;height:76%;
    background:#e8ffb3;transform:rotate(-42deg);opacity:.75;
}
.naw-frame-fx-art--dew {
    border-radius:65% 65% 65% 4%;
    border:1px solid rgba(235,252,255,.86);
    transform-origin:center;
    background:radial-gradient(circle at 35% 32%,white 0 16%,var(--color) 35%,rgba(79,186,236,.28) 95%);
    box-shadow:0 0 3px var(--color);
}
.naw-frame-fx-art--ember {
    border-radius:70% 0 68% 38%;
    background:linear-gradient(150deg,#ffef9b 2%,var(--color) 46%,#c7391c);
    box-shadow:0 0 3px var(--color),0 0 5px rgba(255,96,32,.6);
}
.naw-frame-fx-art--rift {
    clip-path:polygon(55% 0,90% 16%,61% 43%,100% 68%,42% 100%,12% 78%,36% 47%,0 21%);
    background:linear-gradient(45deg,#ef8734,var(--color),#fff3c1);
}
.naw-frame-fx-art--amber {
    clip-path:polygon(50% 0,100% 40%,75% 100%,18% 83%,0 35%);
    background:linear-gradient(130deg,#fff6d8,var(--color) 45%,#9f652d);
}
.naw-frame-fx-art--swarm {
    border-radius:48%;
    background:radial-gradient(ellipse at 23% 50%,#5a733f 0 17%,transparent 20%),
      radial-gradient(ellipse at 50% 50%,var(--color) 0 19%,transparent 23%),
      radial-gradient(ellipse at 80% 50%,#304d2f 0 21%,transparent 23%);
}
.naw-frame-fx-art--swarm::after {
    top:3%;left:33%;height:94%;width:35%;
    border-left:1px solid var(--naw-fx-highlight);
    border-right:1px solid var(--naw-fx-highlight);
    transform:rotate(30deg);
}
.naw-frame-fx-art--silk {
    height:max(1.5px,calc(var(--size)*.18));
    width:calc(var(--size)*2);
    border-radius:80%;
    background:linear-gradient(90deg,transparent,var(--naw-fx-highlight),#ffffff,var(--color),transparent);
    box-shadow:0 0 2px var(--color);
}
.naw-frame-fx-art--trail {
    width:calc(var(--size)*1.7);
    height:max(2px,calc(var(--size)*.3));
    border-radius:90%;
    background:linear-gradient(90deg,transparent,var(--color) 35%,#fffad0);
    box-shadow:0 0 2px var(--color);
}
.naw-frame-fx-art--snow {
    clip-path:polygon(44% 0,56% 0,56% 34%,76% 13%,86% 24%,65% 44%,100% 44%,
        100% 56%,65% 56%,86% 78%,77% 87%,56% 66%,56% 100%,44% 100%,44% 66%,
        24% 87%,13% 77%,34% 56%,0 56%,0 44%,34% 44%,13% 23%,23% 13%,44% 34%);
    background:linear-gradient(115deg,#fff,var(--color));
}
.naw-frame-fx-art--bat {
    clip-path:polygon(0 21%,22% 34%,29% 9%,43% 35%,49% 42%,57% 33%,71% 9%,
        79% 36%,100% 19%,92% 77%,73% 61%,64% 88%,51% 64%,38% 88%,28% 61%,9% 76%);
    background:linear-gradient(130deg,var(--naw-fx-highlight),#45366b 75%);
    box-shadow:0 0 2px var(--color);
}
.naw-frame-fx-art--petal {
    border-radius:5% 90% 9% 90%;
    background:linear-gradient(135deg,#fff5fb,var(--color) 53%,#d78ea9);
}
.naw-frame-fx-art--star {
    clip-path:polygon(50% 0,60% 38%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 38%);
    background:linear-gradient(115deg,#fff,var(--color));
    box-shadow:0 0 4px var(--color);
}
.naw-frame-fx-art--storm {
    clip-path:polygon(53% 0,100% 0,63% 41%,88% 41%,28% 100%,40% 56%,9% 56%);
    background:linear-gradient(130deg,#ffffff,var(--color),#4f71de);
}
.naw-frame-fx-art--mist {
    width:calc(var(--size)*2.1);
    height:max(2px,calc(var(--size)*.6));
    border-radius:50%;
    opacity:0;
    background:radial-gradient(ellipse,var(--naw-fx-highlight),rgba(108,166,133,.44) 42%,transparent 77%);
    box-shadow:none;
}
.naw-frame-fx-art--beam {
    height:calc(var(--size)*2);
    width:max(2px,calc(var(--size)*.32));
    border-radius:75%;
    background:linear-gradient(180deg,transparent,#fff9db,var(--color),transparent);
    box-shadow:0 0 3px var(--color);
}
.naw-frame-fx-art--rain {
    height:calc(var(--size)*1.75);
    width:max(1.8px,calc(var(--size)*.42));
    border-radius:80% 80% 65% 65%;
    background:linear-gradient(180deg,transparent 0%,#fff 17%,var(--color) 90%);
    box-shadow:0 0 2px var(--color);
}
.naw-frame-fx-art--frost {
    clip-path:polygon(50% 0,58% 34%,85% 15%,67% 44%,100% 50%,67% 56%,85% 85%,
      58% 66%,50% 100%,42% 66%,15% 85%,33% 56%,0 50%,33% 44%,15% 15%,42% 34%);
    background:linear-gradient(90deg,#ffffff,var(--color));
}
.naw-frame-fx-art--crystal {
    clip-path:polygon(50% 0,93% 31%,70% 100%,29% 100%,7% 31%);
    background:linear-gradient(112deg,#e0fff6,var(--color) 40%,#348f77 75%,#dcfff1);
}
.naw-frame-fx-art--ash {
    border-radius:31% 67% 45% 33%;
    background:radial-gradient(circle at 38% 34%,var(--color),#4d3b35 70%);
    box-shadow:0 0 1px var(--color);
}
.naw-frame-fx-art--moon {
    box-shadow:0 0 3px var(--color);
    border-radius:50%;
    background:radial-gradient(circle at 70% 31%,transparent 0 43%,var(--color) 45% 66%,transparent 69%);
}
.naw-frame-fx-art--root {
    height:calc(var(--size)*1.8);
    width:max(2px,calc(var(--size)*.4));
    border-radius:45% 70% 25% 60%;
    background:linear-gradient(90deg,#5f7b3d,var(--color),#b6e58c);
}
.naw-frame-fx-art--flower {
    border-radius:25%;
    background:radial-gradient(circle at 30% 30%,var(--color) 0 21%,transparent 25%),
       radial-gradient(circle at 70% 30%,var(--color) 0 21%,transparent 25%),
       radial-gradient(circle at 30% 70%,var(--color) 0 21%,transparent 25%),
       radial-gradient(circle at 70% 70%,var(--color) 0 21%,transparent 25%),
       radial-gradient(circle at 50% 50%,#ffe27a 0 14%,transparent 17%);
}
.naw-frame-fx-art--sand {
    border-radius:43% 25% 72% 35%;
    background:linear-gradient(120deg,var(--naw-fx-highlight),var(--color) 65%,#865a3b);
}
.naw-frame-fx-art--aurora {
    width:calc(var(--size)*1.7);
    height:calc(var(--size)*1.35);
    border-radius:75% 28% 81% 19%;
    background:linear-gradient(145deg,transparent,var(--color) 34%,#a9adff 68%,transparent);
    box-shadow:0 0 3px var(--color);
}
.naw-frame-fx-art--bee {
    width:calc(var(--size)*1.25);
    height:calc(var(--size)*.78);
    border-radius:57%;
    background:repeating-linear-gradient(90deg,#f6d872 0 24%,#563b2a 24% 36%,var(--color) 36% 50%);
    box-shadow:0 0 1.4px var(--color);
}
.naw-frame-fx-art--bee::before,
.naw-frame-fx-art--bee::after {
    width:44%;height:60%;top:-42%;
    border:1px solid #e5faff;border-radius:70%;
    background:rgba(201,239,255,.43);
}
.naw-frame-fx-art--bee::before {left:12%;transform:rotate(-24deg);}
.naw-frame-fx-art--bee::after {right:10%;transform:rotate(24deg);}
.naw-frame-fx-art--ant {
    width:calc(var(--size)*1.3);height:calc(var(--size)*.65);
    border-radius:45%;
    background:radial-gradient(ellipse at 17% 53%,#5e3726 0 15%,transparent 18%),
       radial-gradient(circle at 50% 50%,var(--color) 0 17%,transparent 21%),
       radial-gradient(ellipse at 82% 52%,#683d2d 0 19%,transparent 22%);
    box-shadow:0 0 1.2px var(--color);
}
.naw-frame-fx-art--ant::before {
    top:-23%;left:19%;width:66%;height:146%;
    border-left:1px solid var(--naw-fx-highlight);
    border-right:1px solid var(--naw-fx-highlight);
    transform:rotate(25deg);
}
.naw-frame-fx-art--dust {
    border-radius:25% 60% 45%;
    background:radial-gradient(circle,var(--naw-fx-highlight),var(--color) 60%,#8b6647);
    box-shadow:0 0 1px var(--color);
}
/* Chorégraphies individuelles : toutes dessinent uniquement dans la couche
   de cadre masquée ; les déplacements courts seront coupés par cet alpha. */
@keyframes naw-frame-art-firefly {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translateY(2px) scale(.5);}
    20%,75%{opacity:.96;} 48%{transform:translate(-50%,-50%) translate(var(--dx),-2px) scale(1.15);}
}
@keyframes naw-frame-art-drift {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translate(-2px,2px) scale(.65);}
    21%,77%{opacity:.9;} 53%{transform:translate(-50%,-50%) translate(var(--dx),-1px) scale(1.05);}
}
@keyframes naw-frame-art-flutter {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translate(-2px,-2px) rotate(-35deg) scale(.65);}
    22%,78%{opacity:.9;} 51%{transform:translate(-50%,-50%) translate(var(--dx),1px) rotate(32deg) scale(1.1);}
}
@keyframes naw-frame-art-glimmer {
    0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.65) rotate(-20deg);}
    25%,69%{opacity:.98;transform:translate(-50%,-50%) scale(1.13) rotate(12deg);}
}
@keyframes naw-frame-art-ember {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translateY(2px) scale(.55);}
    18%,76%{opacity:.95;} 52%{transform:translate(-50%,-50%) translate(var(--dx),-3px) scale(1.1);}
}
@keyframes naw-frame-art-crackle {
    0%,12%,60%,66%,100%{opacity:0;transform:translate(-50%,-50%) scale(.65);}
    17%,46%,63%,77%{opacity:1;transform:translate(-50%,-50%) scale(1.16);}
    85%{opacity:.14;}
}
@keyframes naw-frame-art-dart {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translateX(-3px) scale(.7);}
    20%,77%{opacity:.9;} 56%{transform:translate(-50%,-50%) translateX(3px) scale(1);}
}
@keyframes naw-frame-art-trace {
    0%,100%{opacity:0;transform:translate(-50%,-50%) scaleX(.15) rotate(-15deg);}
    22%,79%{opacity:.9;} 55%{transform:translate(-50%,-50%) scaleX(1.2) rotate(12deg);}
}
@keyframes naw-frame-art-fall {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translateY(-3px) scale(.6);}
    20%,80%{opacity:.94;} 62%{transform:translate(-50%,-50%) translate(var(--dx),3px) scale(1);}
}
@keyframes naw-frame-art-mist {
    0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.5);}
    24%,73%{opacity:.68;} 54%{transform:translate(-50%,-50%) translateX(2px) scale(1.2);}
}
@keyframes naw-frame-art-freeze {
    0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
    31%,73%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}
}
@keyframes naw-frame-art-bloom {
    0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-22deg);}
    33%,72%{opacity:.96;transform:translate(-50%,-50%) scale(1.2) rotate(12deg);}
}
@keyframes naw-frame-art-spin {
    0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.6);}
    25%,78%{opacity:.88;} 64%{transform:translate(-50%,-50%) rotate(190deg) scale(1.05);}
}
@keyframes naw-frame-art-aurora {
    0%,100%{opacity:0;transform:translate(-50%,-50%) skewX(-12deg) scale(.5);}
    25%,75%{opacity:.83;} 55%{transform:translate(-50%,-50%) translate(var(--dx),0) skewX(16deg) scale(1.12);}
}
@keyframes naw-frame-art-bee {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translate(-3px,0) rotate(-20deg) scale(.8);}
    17%{opacity:.9;}
    28%{transform:translate(-50%,-50%) translate(0,-2px) rotate(4deg) scale(1.06);opacity:1;}
    44%{transform:translate(-50%,-50%) translate(2px,1px) rotate(19deg) scale(1.08);}
    59%{transform:translate(-50%,-50%) translate(0,2px) rotate(-4deg) scale(1);}
    75%{transform:translate(-50%,-50%) translate(-2px,-1px) rotate(-19deg) scale(1.04);opacity:.9;}
    88%{opacity:.22;}
}
@keyframes naw-frame-art-march {
    0%,100%{opacity:0;transform:translate(-50%,-50%) translateX(-3px) scale(.85);}
    18%,80%{opacity:.94;} 55%{transform:translate(-50%,-50%) translateX(3px) scale(1);}
}
/* Pause, accessibilité et budget : réutilise tous les gardes du moteur V1. */
@media (prefers-reduced-motion:reduce) {
    .naw-frame-fx-art{animation:none!important;opacity:0!important;}
}

/* V1.8 — détails individuels visibles sans aucune fuite hors alpha. */
.naw-frame-fx-art--firefly::before {
    inset: 21%; border-radius: 50%; background: #fffef0;
    box-shadow: 0 0 2px #ffffff;
}
.naw-frame-fx-art--storm::after,.naw-frame-fx-art--rift::after {
    left: 47%; top: 19%; width: 17%; height: 66%;
    background: rgba(255,255,255,.85);
    clip-path: polygon(25% 0,100% 0,44% 49%,88% 49%,0 100%,29% 51%);
}
.naw-frame-fx-art--flower::after {
    left: 40%; top: 40%; width: 20%; height: 20%;
    border-radius: 50%; background: #fff3ba; box-shadow: 0 0 2px #fff5c8;
}
.naw-frame-fx-art--aurora::after {
    left: 13%; top: 13%; width: 74%; height: 60%;
    border-radius: 50%; border-top: 1px solid rgba(245,255,248,.85);
    transform: rotate(-24deg);
}
.naw-frame-fx-art--ant::after {
    left: 9%; top: 22%; width: 13%; height: 28%;
    border-radius: 50%; background: #e9bd8b;
}
.naw-frame-fx-art--bee {filter: drop-shadow(0 0 1px #fff1c2);}
.naw-frame-fx-art--leaf::after {
    top: 18%; left: 8%; width: 83%; height: 1px;
    background: rgba(255,255,213,.85);
    transform: rotate(42deg); transform-origin: left center;
}