/* Decorative scenes, not data or protocol diagrams. Original mascot pixels stay intact. */
[data-mascot-scene]{isolation:isolate}
.mascot-scene-effects{position:absolute;inset:0;z-index:0;pointer-events:none;color:#83e1ec;overflow:clip}
.mascot-scene-effects svg{width:100%;height:auto;display:block}
[data-mascot-scene]>img{z-index:1}
.scene-page,.scene-envelope,.research-panel{position:absolute;display:block;filter:drop-shadow(0 7px 14px #0005)}
/* A flight path and receding wake behind the intact paper plane. */
[data-mascot-scene=courier]>img{animation:mascot-courier-flight 8s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
.courier-wake{position:absolute;left:5%;top:26%;width:46%;height:18%;transform:rotate(-26deg)}
.courier-wake i{position:absolute;left:0;top:15%;height:2px;width:55%;border-radius:2px;background:linear-gradient(90deg,transparent,#83e1ecaa);animation:mascot-slipstream 3.6s linear infinite}
.courier-wake i:nth-child(2){top:47%;left:8%;width:70%;animation-delay:-1.2s;background:linear-gradient(90deg,transparent,#b8ee95aa)}
.courier-wake i:nth-child(3){top:78%;left:3%;width:43%;animation-delay:-2.4s}
.courier-trail{position:absolute;left:4%;top:24%;width:83%;height:49%;border:1px solid #78dce62e;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-24deg)}
.courier-trail--two{left:11%;top:30%;width:75%;height:42%;opacity:.5}
/* Reading: quiet movement around the book, never across the face or feet. */
[data-mascot-scene=library]>img{animation:mascot-reader-settle 9s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite;transform-origin:50% 85%}
.scene-page{width:11%;opacity:.75;animation:mascot-page-drift 9s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
.scene-page--one{left:6%;top:24%;animation-delay:-2s}
.scene-page--two{right:4%;top:30%;width:9%;color:#b6ef94;animation-delay:-5s}
.scene-page--three{right:12%;top:9%;width:7%;opacity:.45;animation-delay:-7s}
.reading-aura{position:absolute;inset:24% 5% 12%;border-radius:50%;background:radial-gradient(ellipse at 50% 62%,#80dee72a,transparent 66%);animation:mascot-book-light 9s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
.reading-arc{position:absolute;inset:17% 5% 11%;border:1px solid #83e1ec24;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(18deg)}
/* Mentor: a small three-ray idea accent beside the raised hand. */
[data-mascot-scene=mentor]>img{animation:mascot-mentor-settle 8s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite;transform-origin:50% 85%}
.mentor-idea{position:absolute;left:11%;top:12%;width:22%;height:23%;animation:mascot-idea-light 6s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
.mentor-idea i{position:absolute;width:2px;height:17%;left:50%;top:0;background:#b9ed95;border-radius:2px;box-shadow:0 0 8px #b9ed9555}
.mentor-idea i:nth-child(2){left:10%;top:25%;transform:rotate(-45deg)}
.mentor-idea i:nth-child(3){left:90%;top:25%;transform:rotate(45deg)}
.scene-page--mentor{right:1%;top:22%;width:16%;animation-delay:-3s}
.mentor-aura{position:absolute;inset:15% 0 5%;background:radial-gradient(ellipse at 50% 55%,#7fd9e622,transparent 65%)}
/* Research: abstract code panes and a travelling signal, without invented metrics. */
[data-mascot-scene=research]>img{animation:mascot-research-focus 10s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite;transform-origin:50% 80%}
.research-panel{width:24%;animation:mascot-panel-drift 8s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
.research-panel--one{left:0;top:15%;opacity:.8}
.research-panel--two{right:0;top:23%;width:19%;color:#b4ed94;animation-delay:-4s;opacity:.65}
.research-link{position:absolute;left:5%;top:43%;width:85%;height:1px;background:linear-gradient(90deg,transparent,#7ddce644,transparent);transform:rotate(-16deg)}
.research-link i{position:absolute;left:0;top:-1px;width:8%;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#8ee3ed);animation:mascot-data-travel 5s linear infinite}
.research-link i+i{animation-delay:-2.5s}
.research-aura{position:absolute;inset:15% 0 4%;background:radial-gradient(ellipse at 65% 55%,#71dce72e,transparent 63%);animation:mascot-book-light 8s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
/* Bot page: messages travel outward, different from the courier scene. */
[data-mascot-scene=messenger]>img{animation:mascot-messenger-send 8s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite;transform-origin:50% 60%}
.message-route{position:absolute;inset:13% 3% 18%;border:1px solid #83e1ec42;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-17deg)}
.scene-envelope{width:13%;color:#87dfea;animation:mascot-message-send 7s var(--m-ease-io,cubic-bezier(.65,0,.35,1)) infinite}
.scene-envelope--one{right:5%;top:19%}
.scene-envelope--two{right:1%;top:49%;width:10%;color:#b6ed94;animation-delay:-3.5s}
.message-aura{position:absolute;inset:9% 0 8%;background:radial-gradient(ellipse at 62% 50%,#6ed8e524,transparent 67%)}
.mentor-aura,.research-aura,.message-aura{border-radius:50%;mask-image:radial-gradient(ellipse,#000 40%,transparent 70%)}
@keyframes mascot-courier-flight{0%,100%{transform:translate(-5px,5px) rotate(-1deg)}50%{transform:translate(8px,-8px) rotate(1deg)}}
@keyframes mascot-slipstream{0%{transform:translate(25%,0);opacity:0}15%{opacity:.8}75%{opacity:.5}100%{transform:translate(-45%,0);opacity:0}}
@keyframes mascot-reader-settle{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg)}}
@keyframes mascot-page-drift{0%,100%{transform:translateY(4px) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes mascot-book-light{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes mascot-mentor-settle{0%,100%{transform:translateY(1px) rotate(-.5deg)}50%{transform:translateY(-3px) rotate(.5deg)}}
@keyframes mascot-idea-light{0%,100%{opacity:.4;transform:translateY(1px)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes mascot-research-focus{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.4deg)}}
@keyframes mascot-panel-drift{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@keyframes mascot-data-travel{0%{transform:translateX(0);opacity:0}15%,80%{opacity:.85}100%{transform:translateX(1000%);opacity:0}}
@keyframes mascot-messenger-send{0%,100%{transform:translateY(4px) rotate(-.7deg)}50%{transform:translateY(-8px) rotate(.7deg)}}
@keyframes mascot-message-send{0%,100%{transform:translate(-6px,8px);opacity:.5}50%{transform:translate(8px,-10px);opacity:1}}
[data-visual-paused=true] [data-mascot-scene] *,[data-mascot-scene].scene-offscreen *{animation-play-state:paused!important}
/* Article art remains 250px/200px; keep its effects inside that same square. */
.article-emblem [data-mascot-scene]>.mascot-scene-effects{width:250px;height:250px;left:50%;transform:translateX(-50%)}
@media(max-width:767px){.article-emblem [data-mascot-scene]>.mascot-scene-effects{width:200px;height:200px}}
@media(prefers-reduced-motion:reduce){[data-mascot-scene] *{animation:none!important}[data-mascot-scene]>img{transform:none}}
@media print{.mascot-scene-effects{display:none}}