/* Animated explanatory figures from the Grace Journal article picosure-pro-02mm (2026-09-24). Shared by the spots, PicoSure Pro and SkinVive pages via gj_figures.py; class names (gj-, dm-, fx-, fb- prefixes) must stay unique site-wide. Animations start when a figure scrolls into view (gj-figures.js adds .on). */
.gj-fbst{--gold:#C4A870;--gold-bright:#FFE8A0;--light:#F2EDE4;margin:2.8em auto;max-width:680px;}
.gj-fbst-panel{background:#0e1318;border:1px solid rgba(196,168,112,.3);border-radius:16px;padding:26px 24px 20px;box-shadow:0 14px 34px rgba(43,40,35,.16);}
.gj-fbst-eyebrow{font-family:var(--latin,"Marcellus",serif);font-weight:600;font-size:12px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;text-align:center;margin:0 0 6px;}
.gj-fbst-head{font-family:var(--mincho,"Shippori Mincho B1",serif);font-weight:500;font-size:clamp(18px,4vw,24px);color:var(--light);text-align:center;line-height:1.5;letter-spacing:.05em;margin:0 0 20px;}
.gj-fbst-head em{font-style:normal;color:var(--gold-bright);}
.gj-fbst-grid{display:flex;gap:10px;}
.gj-fbst-col{flex:1;background:rgba(22,19,15,.62);border:1px solid rgba(232,226,216,.1);border-radius:12px;overflow:hidden;}
.gj-fbst-col .ttl{padding:9px 6px 7px;text-align:center;border-bottom:1px solid rgba(232,226,216,.06);}
.gj-fbst-col .ttl .tno{display:block;font-family:var(--sans,"Noto Sans JP",sans-serif);font-weight:700;font-size:10px;letter-spacing:.24em;}
.gj-fbst-col.ok .ttl .tno{color:#5AACB8;}
.gj-fbst-col.mid .ttl .tno{color:#C9A96E;}
.gj-fbst-col.ng .ttl .tno{color:#E07578;}
.gj-fbst-col .ttl b{display:block;font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:clamp(11px,2.2vw,14px);color:var(--light);font-weight:700;margin-top:3px;letter-spacing:.02em;}
.gj-fbst-col svg{display:block;width:100%;height:auto;}
.gj-fbst-flow{margin-top:14px;}
.gj-fbst-flow svg{display:block;width:100%;height:auto;}
.gj-fbst-caption{font-size:13px;line-height:1.9;color:#8b7d6b;margin-top:12px;padding:0 4px;}
.gj-fbst .gj-fadeup{opacity:0;transform:translateY(8px);}
.gj-fbst.on .gj-fadeup{animation:gjDmapUp .65s .15s ease-out forwards;}
.gj-fbst.on .gj-fbst-head.gj-fadeup{animation-delay:.3s;}
.gj-fbst .fb-cell{opacity:0;transform-origin:center;transform-box:fill-box;}
.gj-fbst.on .fb-cell{animation:gjFbPop .6s .6s cubic-bezier(.34,1.56,.64,1) forwards;}
.gj-fbst.on .mid .fb-cell{animation-delay:1.0s;}
.gj-fbst.on .ng .fb-cell{animation-delay:1.4s;}
.gj-fbst .fb-fiber,.gj-fbst .fb-dend{opacity:0;}
.gj-fbst.on .fb-fiber{animation:gjFbIn .8s .4s ease forwards;}
.gj-fbst.on .fb-dend{animation:gjFbIn .6s .9s ease forwards;}
.gj-fbst.on .mid .fb-fiber{animation-delay:.8s;}
.gj-fbst.on .mid .fb-dend{animation-delay:1.3s;}
.gj-fbst .fb-sasp{opacity:0;transform-origin:center;transform-box:fill-box;}
.gj-fbst.on .ng .fb-sasp{animation:gjFbSasp 1.8s ease-out infinite;animation-delay:calc(1.9s + var(--d,0) * 1ms);}
.gj-fbst .fb-verdict{opacity:0;}
.gj-fbst.on .fb-verdict{animation:gjFbIn .5s 1.2s ease forwards;}
.gj-fbst.on .mid .fb-verdict{animation-delay:1.6s;}
.gj-fbst.on .ng .fb-verdict{animation-delay:2.0s;}
.gj-fbst .fb-return{stroke-dasharray:80;stroke-dashoffset:80;}
.gj-fbst.on .fb-return{animation:gjFbDraw .7s 2.5s ease forwards;}
.gj-fbst .fb-return-head,.gj-fbst .fb-return-label{opacity:0;}
.gj-fbst.on .fb-return-head{animation:gjFbIn .3s 3.1s ease forwards;}
.gj-fbst.on .fb-return-label{animation:gjFbIn .5s 3.2s ease forwards;}
@media (max-width:520px){.gj-fbst-grid{flex-direction:column}.gj-fbst-col{display:grid;grid-template-columns:96px 1fr;align-items:center}.gj-fbst-col .ttl{border-bottom:none;border-right:1px solid rgba(232,226,216,.06)}.gj-fbst-col svg{grid-column:2}}
.gj-dmap{--gold:#C4A870;--gold-bright:#FFE8A0;--light:#F2EDE4;--mute:#8d8577;margin:2.4em auto;max-width:680px;}
.gj-dmap-panel{background:#0e1318;border:1px solid rgba(196,168,112,.3);border-radius:16px;padding:26px 24px 16px;box-shadow:0 14px 34px rgba(43,40,35,.16);}
.gj-dmap-eyebrow{font-family:var(--latin,"Marcellus",serif);font-weight:600;font-size:12px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;text-align:center;margin:0 0 6px;}
.gj-dmap-head{font-family:var(--mincho,"Shippori Mincho B1",serif);font-weight:500;font-size:clamp(19px,4.2vw,25px);color:var(--light);text-align:center;line-height:1.5;letter-spacing:.06em;margin:0 0 20px;}
.gj-dmap-head em{font-style:normal;color:var(--gold-bright);}
.gj-dmap-grid{display:flex;gap:10px;}
.gj-dmap-col{flex:1;background:rgba(22,19,15,.62);border:1px solid rgba(232,226,216,.1);border-radius:12px;overflow:hidden;}
.gj-dmap-col .ttl{padding:9px 6px 7px;text-align:center;border-bottom:1px solid rgba(232,226,216,.06);}
.gj-dmap-col .ttl .tno{display:block;font-family:var(--sans,"Noto Sans JP",sans-serif);font-weight:700;font-size:10px;letter-spacing:.24em;color:var(--gold);}
.gj-dmap-col .ttl b{display:block;font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:clamp(11px,2.2vw,14px);color:var(--light);font-weight:700;margin-top:3px;letter-spacing:.02em;}
.gj-dmap-col svg{display:block;width:100%;height:auto;}
.gj-dmap-col .dx{padding:8px 8px 10px;text-align:center;font-size:clamp(9.5px,1.9vw,11.5px);font-weight:500;color:rgba(232,237,242,.72);line-height:1.55;border-top:1px solid rgba(232,226,216,.05);}
.gj-dmap-source{font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:10px;line-height:1.7;color:rgba(232,237,242,.38);text-align:right;margin-top:12px;}
.gj-dmap-caption{font-size:13px;line-height:1.9;color:#8b7d6b;margin-top:12px;padding:0 4px;}
.gj-noanim *{animation-duration:0s!important;animation-delay:0s!important;}
.gj-dmap .gj-fadeup{opacity:0;transform:translateY(8px);}
.gj-dmap.on .gj-fadeup{animation:gjDmapUp .65s .15s ease-out forwards;}
.gj-dmap.on .gj-dmap-head.gj-fadeup{animation-delay:.3s;}
.gj-dmap .dm-derm{opacity:.9;}
.gj-dmap .dm-line{stroke-dasharray:200;stroke-dashoffset:200;}
.gj-dmap.on .dm-line{animation:gjDmapDraw 1s .7s ease forwards;}
.gj-dmap .dm-linelabel{opacity:0;}
.gj-dmap.on .dm-linelabel{animation:gjDmapIn .5s 1.5s ease forwards;}
.gj-dmap .dm-dot{opacity:0;transform-origin:center;transform-box:fill-box;}
.gj-dmap.on .dm-dot{animation:gjDmapPop .4s ease-out forwards;animation-delay:calc(1.9s + var(--d,0) * 1ms);}
.gj-dmap .dm-zone{opacity:0;}
.gj-dmap.on .dm-zone{animation:gjDmapZone .8s ease forwards;animation-delay:calc(2.4s + var(--d,0) * 1ms);}
@media (max-width:520px){.gj-dmap-grid{flex-direction:column}.gj-dmap-col{display:grid;grid-template-columns:88px 1fr;align-items:center}.gj-dmap-col .ttl{border-bottom:none;border-right:1px solid rgba(232,226,216,.06)}.gj-dmap-col svg{grid-column:2}.gj-dmap-col .dx{grid-column:1/3;border-top:1px solid rgba(232,226,216,.05)}}
.gj-ssel{--gold:#C4A870;--gold-bright:#FFE8A0;--red:#D49B91;--light:#F2EDE4;--mute:#8d8577;margin:2.8em auto;max-width:680px;}
.gj-ssel-panel{background:#0e1318;border:1px solid rgba(196,168,112,.3);border-radius:16px;padding:26px 24px 16px;box-shadow:0 14px 34px rgba(43,40,35,.16);}
.gj-ssel-eyebrow{font-family:var(--latin,"Marcellus",serif);font-weight:600;font-size:12px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;text-align:center;margin:0 0 6px;}
.gj-ssel-head{font-family:var(--mincho,"Shippori Mincho B1",serif);font-weight:500;font-size:clamp(20px,4.5vw,26px);color:var(--light);text-align:center;line-height:1.5;letter-spacing:.06em;margin:0 0 20px;}
.gj-ssel-head em{font-style:normal;color:var(--gold-bright);}
.gj-ssel .fx-wrap{display:flex;gap:10px;}
.gj-ssel .fx-side{flex:1;background:rgba(22,19,15,.62);border:1px solid rgba(232,226,216,.08);border-radius:12px;overflow:hidden;position:relative;}
.gj-ssel .fx-side.ok{border-color:rgba(196,168,112,.4);background:linear-gradient(180deg,rgba(196,168,112,.06) 0%,rgba(22,19,15,.62) 60%);}
.gj-ssel .fx-side:not(.ok){border-color:rgba(196,120,107,.3);background:linear-gradient(180deg,rgba(196,120,107,.04) 0%,rgba(22,19,15,.62) 60%);}
.gj-ssel .fx-head{padding:10px 10px 7px;text-align:center;font-family:var(--latin,"Marcellus",serif);font-size:10.5px;letter-spacing:.28em;color:var(--mute);text-transform:uppercase;font-weight:600;border-bottom:1px solid rgba(232,226,216,.06);}
.gj-ssel .fx-side.ok .fx-head{color:var(--gold);}
.gj-ssel .fx-side:not(.ok) .fx-head{color:var(--red);}
.gj-ssel .fx-head b{display:block;font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:clamp(11px,2.2vw,14px);color:var(--light);font-weight:700;letter-spacing:.02em;margin-top:3px;}
.gj-ssel .fx-side.ok .fx-head b{color:var(--gold-bright);text-shadow:0 0 12px rgba(196,168,112,.4);}
.gj-ssel .fx-svg{display:block;width:100%;height:auto;overflow:visible;}
.gj-ssel .fx-foot{padding:8px 10px;text-align:center;font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:clamp(10px,2vw,12px);font-weight:600;border-top:1px solid rgba(232,226,216,.05);line-height:1.4;}
.gj-ssel .fx-side:not(.ok) .fx-foot{color:var(--red);}
.gj-ssel .fx-side.ok .fx-foot{color:var(--gold);}
.gj-ssel .fx-foot em{font-style:normal;font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:clamp(13px,2.6vw,16px);font-weight:700;margin-right:3px;}
.gj-ssel-source{font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:10px;line-height:1.7;color:rgba(232,237,242,.38);text-align:right;margin-top:12px;}
.gj-ssel-caption{font-size:13px;line-height:1.9;color:#8b7d6b;margin-top:12px;padding:0 4px;}
.gj-noanim *{animation-duration:0s!important;animation-delay:0s!important;}
.gj-ssel .gj-fadeup{opacity:0;transform:translateY(8px);}
.gj-ssel.on .gj-fadeup{animation:gjSelFadeUp .65s .15s ease-out forwards;}
.gj-ssel.on .gj-ssel-head.gj-fadeup{animation-delay:.3s;}
.gj-ssel .cell{fill:#EADFCB;opacity:.95;transform-origin:center;transform-box:fill-box;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.gj-ssel .cell.melanin{fill:#6B4423;opacity:1;}
.gj-ssel .cell-shard{fill:#EADFCB;opacity:0;transform-origin:center;transform-box:fill-box;}
.gj-ssel .cell-shard.melanin{fill:#6B4423;}
.gj-ssel .cell-ring{fill:none;stroke:#FFE8A0;stroke-width:1.2;opacity:0;transform-origin:center;transform-box:fill-box;}
.gj-ssel .beam-drop{stroke-width:2.5;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 8px currentColor);}
.gj-ssel .fx-side:not(.ok) .beam-drop{stroke:#D49B91;color:#D49B91;}
.gj-ssel .fx-side.ok .beam-drop{stroke:#FFE8A0;color:#FFE8A0;}
.gj-ssel .beam-impact{fill:none;stroke-width:1.5;opacity:0;transform-origin:center;transform-box:fill-box;}
.gj-ssel .fx-side:not(.ok) .beam-impact{stroke:#D49B91;}
.gj-ssel .fx-side.ok .beam-impact{stroke:#FFE8A0;}
.gj-ssel.on .fx-side:not(.ok) .beam-drop{animation:gjBeamDrop 1s .8s cubic-bezier(.4,0,.2,1) forwards;}
.gj-ssel.on .fx-side:not(.ok) .beam-drop:nth-child(2){animation-delay:.85s;}
.gj-ssel.on .fx-side:not(.ok) .beam-drop:nth-child(3){animation-delay:.95s;}
.gj-ssel.on .fx-side:not(.ok) .beam-drop:nth-child(4){animation-delay:1.0s;}
.gj-ssel.on .fx-side:not(.ok) .beam-drop:nth-child(5){animation-delay:1.1s;}
.gj-ssel.on .fx-side:not(.ok) .beam-drop:nth-child(6){animation-delay:1.2s;}
.gj-ssel.on .fx-side.ok .beam-drop{animation:gjBeamDropPrecise 1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(2.8s + var(--bd,0) * 1ms);}
.gj-ssel.on .fx-side:not(.ok) .beam-impact{animation:gjImpactRing .7s cubic-bezier(0,.5,.2,1) forwards;animation-delay:calc(1.4s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side.ok .beam-impact.melanin{animation:gjImpactRing .7s cubic-bezier(0,.5,.2,1) forwards;animation-delay:calc(3.2s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side:not(.ok) .cell.melanin{animation:gjCellExplode .7s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(1.45s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side.ok .cell.melanin{animation:gjCellExplode .7s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(3.25s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side:not(.ok) .cell:not(.melanin){animation:gjCellInflame 1.8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(1.4s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side.ok .cell:not(.melanin){animation:gjCellShield 1.5s 2.9s ease-in-out forwards;}
.gj-ssel.on .fx-side:not(.ok) .cell-ring.melanin{animation:gjRingBurst .6s cubic-bezier(0,.7,.3,1) forwards;animation-delay:calc(1.5s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side.ok .cell-ring.melanin{animation:gjRingBurst .6s cubic-bezier(0,.7,.3,1) forwards;animation-delay:calc(3.3s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side:not(.ok) .cell-shard.melanin{animation:gjShardFly .9s cubic-bezier(.22,.8,.4,1) forwards;animation-delay:calc(1.55s + var(--d,0) * 1ms);}
.gj-ssel.on .fx-side.ok .cell-shard.melanin{animation:gjShardFly .9s cubic-bezier(.22,.8,.4,1) forwards;animation-delay:calc(3.35s + var(--d,0) * 1ms);}
.gj-ssel:not(.on) .cell,.gj-ssel:not(.on) .cell-shard,.gj-ssel:not(.on) .cell-ring,.gj-ssel:not(.on) .beam-drop,.gj-ssel:not(.on) .beam-impact{animation:none!important;}
@keyframes gjFbPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes gjFbIn{to{opacity:1}}
@keyframes gjFbSasp{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes gjFbDraw{to{stroke-dashoffset:0}}
@keyframes gjDmapUp{to{opacity:1;transform:translateY(0)}}
@keyframes gjDmapDraw{to{stroke-dashoffset:0}}
@keyframes gjDmapPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes gjDmapIn{to{opacity:1}}
@keyframes gjDmapZone{to{opacity:1}}
@keyframes gjSelFadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes gjBeamDrop{0%{opacity:0;stroke-dasharray:0 200;stroke-dashoffset:0}20%{opacity:1}60%{opacity:1;stroke-dasharray:200 0}100%{opacity:0;stroke-dasharray:200 0}}
@keyframes gjBeamDropPrecise{0%{opacity:0;stroke-dasharray:0 200}25%{opacity:1}65%{opacity:1;stroke-dasharray:200 0}100%{opacity:0}}
@keyframes gjImpactRing{0%{opacity:0;r:3;stroke-width:2}30%{opacity:1}100%{opacity:0;r:10;stroke-width:.2}}
@keyframes gjCellExplode{0%{transform:scale(1) rotate(0);opacity:1}25%{transform:scale(1.45) rotate(12deg);opacity:1;filter:brightness(1.8) drop-shadow(0 0 8px rgba(255,232,160,.8))}60%{transform:scale(.3) rotate(-20deg);opacity:.5;filter:brightness(3)}100%{transform:scale(0) rotate(45deg);opacity:0}}
@keyframes gjCellInflame{0%{fill:#EADFCB;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));transform:scale(1)}25%{fill:#F5B5A2;filter:brightness(1.25) drop-shadow(0 0 6px rgba(217,91,91,.6));transform:scale(1.12)}55%{fill:#D95B5B;filter:brightness(1.1) drop-shadow(0 0 8px rgba(217,91,91,.7));transform:scale(1.05)}100%{fill:#B84848;filter:drop-shadow(0 0 5px rgba(217,91,91,.4));transform:scale(1)}}
@keyframes gjCellShield{0%,100%{opacity:.95;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}30%,60%{opacity:1;filter:drop-shadow(0 0 10px rgba(196,168,112,.9)) brightness(1.2)}}
@keyframes gjRingBurst{0%{opacity:0;stroke-width:1.2;r:2}30%{opacity:1}100%{opacity:0;stroke-width:.2;r:7}}
@keyframes gjShardFly{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(.3) rotate(var(--r,90deg))}}

/* 2026-09-29 PicoSure Pro: PIH rate version */
.gj-ssel-pih .fx-foot{line-height:1.5}
.gj-ssel-pih .fx-foot em{display:block;font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:clamp(22px,4.6vw,28px);font-weight:500;letter-spacing:.01em;font-variant-numeric:tabular-nums;margin:0 0 2px}
.gj-ssel-rate{font-family:var(--sans,"Noto Sans JP",sans-serif);font-size:12px;color:rgba(232,237,242,.72);text-align:center;margin:12px 0 0;letter-spacing:.04em}
.gj-ssel-pih .gj-ssel-source{text-align:left}
.gj-ssel-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}