/* gruul — spécifique. Tronc commun : assets/guide.css */
:root{--h1:76px}
#bg{background-image:url("../media/60bf0ffa00cd61b42a97.jpg")}

.room{fill:rgba(8,16,22,.28);stroke:rgba(235,245,240,.3);stroke-width:2.5}
.room-inner{fill:none;stroke:rgba(220,238,232,.11);stroke-width:1.5}
[data-step="2"] #L2,[data-step="3"] #L3,[data-step="4"] #L4,[data-step="5"] #L5{opacity:1}
#gruul{animation:grow 4s ease-in-out infinite}
@keyframes grow{50%{transform:scale(1.09)}}
#hs-arrow,#hs-hit{opacity:0}
[data-step="2"] #hs-arrow,[data-step="2"] #hs-hit{animation:strike 2.2s ease-in-out infinite}
@keyframes strike{0%,30%{opacity:0}45%{opacity:1}70%,100%{opacity:0}}
.ci-warn{fill:none;stroke:#FF7A33;stroke-width:3;stroke-dasharray:7 9;opacity:0}
.ci-hit{fill:rgba(255,122,51,.3);opacity:0}
[data-step="3"] .ci-warn{animation:ciw 4.2s linear infinite;animation-delay:var(--d)}
[data-step="3"] .ci-hit{animation:cih 4.2s linear infinite;animation-delay:var(--d)}
@keyframes ciw{0%{opacity:0}8%{opacity:1}30%{opacity:1}38%,100%{opacity:0}}
@keyframes cih{0%,30%{opacity:0}40%{opacity:1}80%{opacity:1}92%,100%{opacity:0}}
.slam-wave{fill:none;stroke:#B58BF5;stroke-width:4;opacity:0}
[data-step="4"] .slam-wave{animation:slamw 4s ease-out infinite}
[data-step="4"] .slam-wave:nth-of-type(2){animation-delay:2s}
@keyframes slamw{0%{r:80;opacity:.95}60%,100%{r:430;opacity:0}}
.tp circle{fill:var(--dps);stroke:#05080D;stroke-width:3}
.tp{transform:rotate(var(--a)) translate(0px,0px)}
.tp{pointer-events:none}
[data-step="4"] .tp{animation:toss 4s ease-out infinite}
@keyframes toss{
  0%{transform:rotate(var(--a)) translate(90px,0) scale(1)}
  22%{transform:rotate(var(--a)) translate(230px,0) scale(1.5)}
  40%{transform:rotate(var(--a)) translate(300px,0) scale(1)}
  100%{transform:rotate(var(--a)) translate(370px,0) scale(1)}
}
.sh{fill:none;stroke-width:3}
.sh-bad{stroke:#E8443C;fill:rgba(232,68,60,.16)}
.sh-ok{stroke:#2FC2C7;fill:rgba(47,194,199,.09)}
[data-step="5"] .sh-bad{animation:pulse 1.1s ease-in-out infinite}
#silence{opacity:0}
[data-step="5"] #silence{animation:sil 5s ease-in-out infinite}
@keyframes sil{0%,55%{opacity:0}65%,85%{opacity:1}95%,100%{opacity:0}}