/* INFERNO · cell-shaded descent — main stylesheet */

:root{
  --ink:#0b0a09;
  --paper:#d8cdb4;
  --paper-hi:#ece2c8;
  --paper-lo:#c4b694;
  --blood:#c0563a;
  --sky:#161d19; --fog:#22302a; --wall:#0b0e0c; --ground:#10150f;
  --accent:#9fbf8d; --fire:#c9d8a8;
  --frame: 4px solid var(--ink);
  --frame-t: 2.5px solid var(--ink);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{
  margin:0; background:var(--sky); color:var(--paper);
  font-family:var(--serif); line-height:1.6;
  overflow-x:hidden;
  transition:background-color 1.2s linear;
}
::selection{background:var(--accent);color:var(--ink)}

/* ---------- loading veil ---------- */
#veil{position:fixed;inset:0;z-index:90;display:grid;place-content:center;justify-items:center;gap:14px;
  background:#0e0d0b;transition:opacity .7s ease, visibility .7s}
#veil.off{opacity:0;visibility:hidden;pointer-events:none}
.veil-ink svg{filter:drop-shadow(0 0 26px rgba(192,86,58,.35));animation:veilpulse 1.6s ease-in-out infinite}
@keyframes veilpulse{50%{transform:scale(1.06)}}
.veil-t{font-style:italic;font-size:1.15rem;margin:0;color:var(--paper)}
.veil-s{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#8b8168;margin:0}

/* ---------- fixed world ---------- */
#world{position:fixed;inset:0;z-index:0;pointer-events:none}
#skygrad{position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 0%, var(--fog) 0%, var(--sky) 55%, #060606 130%);
  transition:background 1.2s linear}
#cone{position:absolute;inset:0;width:100%;height:100%}
#wallL,#wallR{transition:fill 1.2s linear}
#floor{transition:fill 1.2s linear}
#weather{position:absolute;inset:0;width:100%;height:100%}
#vignette{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
             linear-gradient(0deg, rgba(0,0,0,.4), transparent 22%)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:30;pointer-events:none;font-family:var(--serif)}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 18px;pointer-events:auto;
  background:linear-gradient(180deg, rgba(6,6,6,.72), transparent)}
.brand{display:flex;flex-direction:column;gap:2px;user-select:none}
.brand-mark{font-size:1.5rem;font-weight:700;letter-spacing:.42em;color:var(--paper-hi);
  text-shadow:2px 2px 0 var(--ink)}
.brand-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.hud-actions{display:flex;gap:8px}
.hbtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--serif);font-size:.86rem;letter-spacing:.05em;
  color:var(--paper);background:rgba(12,11,9,.82);border:var(--frame-t);border-radius:3px;
  padding:8px 12px;min-height:40px;
  box-shadow:3px 3px 0 rgba(0,0,0,.55);transition:transform .12s, background .2s}
.hbtn:hover{background:#241f18;transform:translate(-1px,-1px)}
.hbtn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.hbtn-k{font-family:var(--mono);font-size:.66rem;border:1px solid var(--paper-lo);border-radius:2px;padding:1px 5px;color:var(--accent)}
.hud-side{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:12px;pointer-events:auto}
#gauge{width:64px;height:230px;color:var(--paper-lo)}
#gauge-dot{fill:var(--accent);stroke:var(--ink);stroke-width:2}
#gauge-ticks line{stroke:var(--paper-lo);stroke-width:1.4;opacity:.55}
#gauge-ticks text{fill:var(--paper-lo);font-family:var(--mono);font-size:8px}
#gauge{cursor:grab;touch-action:none}
#gauge:active{cursor:grabbing}
#hud-read{max-width:150px}
#hud-ring{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
#hud-canto{font-size:.95rem;font-weight:700;color:var(--paper-hi);margin:3px 0}
#hud-zone{font-size:.78rem;font-style:italic;color:var(--paper-lo)}
#hud-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:#7d7460;pointer-events:none}
#hud-hint kbd{border:1px solid #554c3c;border-radius:2px;padding:0 4px;color:var(--paper-lo)}

/* ---------- descent ---------- */
#descent{position:relative;z-index:2}
.zone{position:relative;min-height:230vh;display:flex;align-items:flex-start;justify-content:center;
  padding:16vh 5vw 10vh}
.zone-inner{width:min(880px, 92vw)}
.zone-head{position:sticky;top:11vh;z-index:3;margin-bottom:5vh;pointer-events:none}
.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  display:inline-block;background:rgba(10,9,7,.78);border:var(--frame-t);padding:5px 10px;border-radius:2px}
.zone-title{margin:.35em 0 .1em;font-size:clamp(2.1rem,6.4vw,4.4rem);line-height:1.02;letter-spacing:.01em;
  color:var(--paper-hi);text-shadow:3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink)}
.zone-sub{font-size:clamp(.95rem,2.2vw,1.2rem);font-style:italic;color:var(--paper);
  text-shadow:1px 1px 0 var(--ink)}
.zone-cantos{font-family:var(--mono);font-size:.72rem;color:var(--paper-lo);margin-top:.5em;letter-spacing:.1em}

/* scene frame */
.scene{margin:4vh 0 5vh;background:var(--paper-lo);border:var(--frame);border-radius:4px;
  box-shadow:8px 8px 0 rgba(0,0,0,.6), inset 0 0 0 6px rgba(0,0,0,.15);
  overflow:hidden;position:relative}
.scene svg{display:block;width:100%;height:auto}
.scene-cap{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper);background:rgba(10,9,7,.8);padding:3px 8px;border:var(--frame-t);border-radius:2px}

/* lede */
.lede{font-size:clamp(1.02rem,2.3vw,1.22rem);color:var(--paper-hi);
  background:rgba(10,9,7,.72);border-left:5px solid var(--accent);
  padding:16px 20px;margin:0 0 4vh;border-radius:0 4px 4px 0;
  text-shadow:1px 1px 0 var(--ink)}
.lede::first-letter{font-size:2.4em;float:left;line-height:.86;padding:4px 8px 0 0;color:var(--accent);font-weight:700}

/* cards — comic frames */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0 0 5vh}
.card{background:linear-gradient(160deg, var(--paper-hi), var(--paper) 60%, var(--paper-lo));
  color:#241c10;border:var(--frame);border-radius:4px;padding:0;
  box-shadow:6px 6px 0 rgba(0,0,0,.6);position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%233a2c18' opacity='.13'%3E%3Ccircle cx='22' cy='30' r='1.3'/%3E%3Ccircle cx='98' cy='14' r='.9'/%3E%3Ccircle cx='140' cy='60' r='1.5'/%3E%3Ccircle cx='50' cy='96' r='1'/%3E%3Ccircle cx='120' cy='130' r='1.2'/%3E%3Ccircle cx='30' cy='140' r='.8'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.card .card-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:#f4ead0;background:var(--ink);display:inline-block;padding:4px 10px 4px 12px;margin:0 0 10px -1px}
.card h3{margin:0;padding:0 18px;font-size:1.12rem;letter-spacing:.02em;
  border-bottom:2px solid var(--ink);padding-bottom:8px}
.card p{padding:0 18px;margin:.8em 0;font-size:.94rem;line-height:1.62}
.card p:last-of-type{margin-bottom:18px}
.card em{font-style:italic}

/* souls rail */
.souls-rail{margin:0 0 5vh}
.rail-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper-lo);margin-bottom:10px}
.souls{display:flex;flex-wrap:wrap;gap:10px}
.soul-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  background:rgba(12,11,9,.85);color:var(--paper);border:var(--frame);border-radius:4px;
  padding:10px 14px;min-height:48px;min-width:120px;
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
  transition:transform .12s, box-shadow .12s, background .2s;position:relative;text-align:left}
.soul-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.55);background:#221d16}
.soul-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.soul-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.soul-btn .s-name{font-weight:700;font-size:.95rem;letter-spacing:.02em}
.soul-btn .s-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.soul-btn .s-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
  background:transparent;border:1px solid var(--paper-lo)}
.soul-btn.seen .s-dot{background:var(--blood);border-color:var(--ink)}

/* quotes */
.quotes{margin:0 0 5vh;display:grid;gap:14px}
.quote{border:var(--frame);background:rgba(12,11,9,.8);border-radius:4px;padding:14px 18px;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);position:relative}
.quote .q-it{font-style:italic;font-size:1.02rem;color:var(--paper-hi);white-space:pre-line;margin:0 0 6px}
.quote .q-en{font-size:.9rem;color:var(--paper-lo);margin:0}
.quote .q-cite{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--accent);margin-top:8px}

/* marginalia chips */
.margin{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6vh}
.mchip{cursor:pointer;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  color:var(--paper);background:rgba(12,11,9,.8);border:var(--frame-t);border-radius:20px;
  padding:7px 13px;min-height:34px;box-shadow:3px 3px 0 rgba(0,0,0,.5);transition:transform .12s}
.mchip:hover{transform:translateY(-2px);background:#221d16}
.mchip::before{content:"❧ ";color:var(--accent)}

/* scene animation helpers */
.fl-flick{transform-origin:50% 100%;animation:flick 2.6s ease-in-out infinite}
.fl-flick-slow{animation:flick 4.2s ease-in-out infinite}
@keyframes flick{50%{transform:scaleY(.93) scaleX(1.04)}}
.fire-fall{animation:fall 2.8s linear infinite}
@keyframes fall{to{transform:translateY(660px)}}
.wind-line{animation:wind 5.5s linear infinite}
@keyframes wind{to{transform:translateX(140px)}}
.wind-tumble{animation:tumble 6s linear infinite}
@keyframes tumble{to{transform:translate(90px,-40px) rotate(12deg)}}
.wind-pair{animation:pair 7s ease-in-out infinite}
@keyframes pair{50%{transform:translate(36px,-26px)}}
.friar-step{animation:step 3.4s ease-in-out infinite}
@keyframes step{50%{transform:translateY(-3px)}}
.geryon-bob{animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px)}}
.wing-l{transform-origin:560px 210px;animation:beat 5s ease-in-out infinite}
.wing-r{transform-origin:640px 210px;animation:beat 5s ease-in-out infinite}
@keyframes beat{50%{transform:rotate(-4deg)}}

/* inter-zone shafts — the connective drop */
.shaft{position:relative;height:16vh;display:grid;place-items:center;z-index:2;pointer-events:none}
.shaft span{font-family:var(--mono);font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--paper-lo);
  background:rgba(10,9,7,.6);padding:4px 12px;border-left:2px solid var(--accent);border-right:2px solid var(--accent)}

/* ---------- epilogue ---------- */
#outro{position:relative;z-index:2;min-height:70vh;display:grid;place-content:center;text-align:center;
  padding:12vh 6vw;background:linear-gradient(180deg, transparent, rgba(10,16,24,.9) 40%)}
.outro-line{font-style:italic;font-size:clamp(1.5rem,4.4vw,2.6rem);color:var(--paper-hi);
  text-shadow:2px 2px 0 var(--ink);margin:0}
.outro-sub{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:var(--accent);margin:.8em 0 2.4em}
.outro-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bigbtn{cursor:pointer;font-family:var(--serif);font-size:1rem;letter-spacing:.04em;
  color:var(--ink);background:var(--accent);border:var(--frame);border-radius:4px;
  padding:14px 26px;min-height:52px;box-shadow:5px 5px 0 rgba(0,0,0,.6);transition:transform .12s}
.bigbtn:hover{transform:translate(-2px,-2px)}
.bigbtn.ghost{background:transparent;color:var(--paper)}
.outro-note{max-width:560px;margin:4em auto 0;font-size:.82rem;color:#8b8168;font-style:italic}

/* ---------- manuscript panel ---------- */
dialog#panel{border:none;background:transparent;padding:0;max-width:min(620px,94vw);max-height:88vh}
dialog#panel::backdrop{background:rgba(6,5,4,.78);backdrop-filter:blur(3px)}
.panel-leaf{position:relative;
  background:linear-gradient(160deg,#efe6cc,#e2d6b4 55%,#d3c49c);
  color:#241c10;border:4px solid var(--ink);border-radius:6px;
  box-shadow:0 0 0 6px #b3984f, 0 0 0 9px var(--ink), 10px 14px 0 rgba(0,0,0,.6);
  padding:26px 30px 30px;overflow-y:auto;max-height:86vh}
.panel-leaf::before{content:"";position:absolute;inset:10px;border:2px solid #8a6f3a;border-radius:3px;pointer-events:none}
.panel-rubric{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:#8a2f1d;border-bottom:2px solid #8a2f1d;display:inline-block;padding-bottom:4px;margin-bottom:8px}
.panel-name{font-size:1.9rem;margin:.2em 0 .15em;letter-spacing:.01em;color:#1c1408}
.panel-canto{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:#5c4a28;margin-bottom:14px}
.panel-body p{margin:.85em 0;font-size:.97rem;line-height:1.66}
.panel-body p:first-of-type::first-letter{font-size:2.6em;float:left;line-height:.8;padding:6px 10px 0 0;
  color:#8a2f1d;font-weight:700}
.panel-quote{margin-top:16px;border-top:1.5px solid #8a6f3a;padding-top:12px}
.panel-quote .q-it{font-style:italic;white-space:pre-line;margin:0 0 6px;font-size:.98rem}
.panel-quote .q-en{font-size:.86rem;color:#5c4a28;margin:0}
.panel-quote .q-cite{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:#8a2f1d;display:block;margin-top:6px}
.panel-x{position:absolute;top:10px;right:12px;cursor:pointer;z-index:2;
  font-family:var(--mono);font-size:.9rem;color:var(--paper);background:var(--ink);
  border:2px solid var(--ink);border-radius:3px;width:40px;height:40px}
.panel-x:hover{background:#3a2f22}
.panel-stamp{position:absolute;right:22px;bottom:16px;font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;
  color:#8a2f1d;border:2.4px solid #8a2f1d;border-radius:4px;padding:3px 9px;transform:rotate(-8deg);
  opacity:0;transition:opacity .5s}
.panel-stamp.on{opacity:.55}

/* ---------- atlas ---------- */
#atlas,#hist{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:3vh 3vw;
  background:rgba(6,5,4,.82);backdrop-filter:blur(4px)}
#atlas[hidden],#hist[hidden]{display:none}
.atlas-frame,.hist-frame{width:min(1060px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#161310,#0e0c0a);border:var(--frame);border-radius:6px;
  box-shadow:0 0 0 3px #4d3d24, 12px 14px 0 rgba(0,0,0,.6);overflow:hidden}
.atlas-head,.hist-head{position:relative;padding:18px 26px 10px;border-bottom:2px solid #3a2f22}
.atlas-head h2,.hist-head h2{margin:0;font-size:1.6rem;color:var(--paper-hi);letter-spacing:.06em}
.atlas-head p,.hist-head p{margin:.3em 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--paper-lo)}
.atlas-head .panel-x,.hist-head .panel-x{top:16px;right:18px}
.atlas-stage{display:flex;gap:0;min-height:0;flex:1}
.atlas-tilt{flex:1.4;display:grid;place-items:center;overflow:auto;
  perspective:1100px;touch-action:none;cursor:grab;padding:10px}
.atlas-tilt:active{cursor:grabbing}
#atlas-svg{width:min(430px,88%);height:auto;transition:transform .18s ease-out;
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.5))}
.atlas-tier{cursor:pointer}
.atlas-tier path{fill:var(--tfill,#22302a);stroke:#000;stroke-width:2.4;transition:fill .3s, transform .15s}
.atlas-tier:hover path{fill:var(--accent)}
.atlas-tier text{fill:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.06em;pointer-events:none}
.atlas-tier.now path{fill:var(--accent);stroke:#000}
.atlas-tier.now text{fill:var(--ink);font-weight:700}
.atlas-river{stroke:#4f7f8a;stroke-width:3;stroke-dasharray:8 7;fill:none;opacity:.85}
.atlas-side{flex:1;border-left:2px solid #3a2f22;padding:20px 24px;overflow-y:auto;min-width:0}
.atlas-side h3{margin:0 0 .5em;font-size:1.02rem;color:var(--accent);letter-spacing:.06em}
.atlas-side p{font-size:.9rem;color:var(--paper);margin:.7em 0}
.atlas-note{font-size:.8rem !important;color:var(--paper-lo) !important;font-style:italic}
.atlas-zoom{display:flex;gap:10px;align-items:center;margin-top:18px}
.atlas-zoom button{width:42px;height:42px;font-size:1.2rem;cursor:pointer;background:var(--ink);
  color:var(--paper);border:var(--frame-t);border-radius:3px}
.atlas-zoom input[type=range]{flex:1;accent-color:var(--accent);min-height:40px}
.atlas-jump{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:16px}
.ajump{cursor:pointer;text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--paper);background:rgba(20,17,13,.8);border:var(--frame-t);border-radius:3px;
  padding:9px 10px;min-height:38px;transition:background .15s}
.ajump:hover{background:#2c261c}
.ajump.now{color:var(--ink);background:var(--accent);font-weight:700}

/* ---------- history ---------- */
.hist-filters{display:flex;gap:8px;padding:12px 26px 4px;flex-wrap:wrap}
.hflt{cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-lo);background:transparent;border:var(--frame-t);border-radius:20px;padding:8px 14px;min-height:38px}
.hflt.on{color:var(--ink);background:var(--accent);border-color:var(--ink)}
.hist-body{flex:1;overflow-y:auto;padding:10px 26px 26px;position:relative}
.hist-body::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:2px;background:#3a2f22}
.hist-entry{position:relative;padding:10px 0 16px 56px;max-width:720px}
.hist-entry::before{content:"";position:absolute;left:26px;top:16px;width:12px;height:12px;border-radius:50%;
  background:var(--ink);border:2.4px solid var(--accent)}
.hist-entry .h-year{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--accent)}
.hist-entry .h-title{font-weight:700;color:var(--paper-hi);font-size:1.04rem;margin:.2em 0}
.hist-entry .h-body{font-size:.9rem;color:var(--paper);margin:.2em 0}
.hist-entry .h-link{cursor:pointer;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--accent);
  background:transparent;border:1px solid var(--accent);border-radius:3px;padding:8px 12px;margin-top:6px;min-height:36px}
.hist-entry .h-link:hover{background:var(--accent);color:var(--ink)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);z-index:60;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--paper);
  background:rgba(12,11,9,.92);border:var(--frame-t);border-radius:3px;padding:10px 16px;
  opacity:0;transition:transform .3s, opacity .3s;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .zone{padding-top:12vh}
  .hud-side{left:8px;top:auto;bottom:58px;transform:none;flex-direction:row;align-items:flex-end}
  #gauge{width:52px;height:180px}
  #hud-read{max-width:120px}
  #hud-hint{display:none}
  .brand-mark{font-size:1.15rem}
  .hud-top{padding:10px 10px}
  .hbtn{padding:8px 10px;font-size:.78rem}
  .hbtn .hbtn-k{display:none}
  .zone-title{text-shadow:2px 2px 0 var(--ink)}
  .cards{grid-template-columns:1fr}
  .atlas-stage{flex-direction:column;overflow-y:auto}
  .atlas-side{border-left:none;border-top:2px solid #3a2f22}
  .panel-leaf{padding:20px 18px}
  .hist-body::before{left:34px}
  .hist-entry{padding-left:46px}
  .hist-entry::before{left:16px}
}

/* ---------- reduced motion ---------- */
html.rm *{animation-play-state:paused !important}
html.rm .fl-flick,html.rm .fire-fall,html.rm .wind-line,html.rm .wind-tumble,html.rm .wind-pair,
html.rm .friar-step,html.rm .geryon-bob,html.rm .wing-l,html.rm .wing-r{animation:none !important}
@media (prefers-reduced-motion: reduce){
  html:not(.motion-ok) *{animation-play-state:paused !important}
}