/* Themed looks from motifs.js: banner effects and avatar frames in CSS and SVG.
   Each layer is a size container; --u turns design pixels into its own size (banner 150 high, avatar 88 wide). */
.mtf{position:absolute;inset:0;pointer-events:none;container-type:size}
.mtf-banner{z-index:1;overflow:hidden}
.mtf-sky{position:absolute;inset:0}
.mtf-stage{position:absolute;inset:0;--u:calc(100cqh / 150)}
.mtf-ring .mtf-stage{--u:calc(100cqw / 88)}
/* the back layer sits under the profile picture, the front layer over it, like the image decorations */
.mtf-back{z-index:1}.mtf-front{z-index:5}
.mtf .ab{position:absolute;display:block;max-width:none}
.mtf .ring{position:absolute;inset:calc(-5 * var(--u));border-radius:50%;box-sizing:border-box}
:is(.profile-banner,.detail-banner,.studio-banner,.pp-banner):has(.mtf-banner)::before,
:is(.profile-banner,.detail-banner,.studio-banner,.pp-banner):has(.mtf-banner)::after{content:none}
/* still unless animation is on; lists and previews play while the pointer rests on them */
.mtf[data-motion="false"] *{animation-play-state:paused}
:is(button,article,a,.avatar,.person-row,.studio-banner):hover .mtf[data-motion="false"] *,
:is(button,article):focus-visible .mtf[data-motion="false"] *{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.mtf *{animation:none!important}}
/* studio and shop: a small banner with its frame, the avatar overlapping its lower edge like on a profile */
.motif-mini{position:relative;display:block;width:100%;aspect-ratio:2.3/1;flex:none}
.motif-mini>.mtf-banner{bottom:28%;border-radius:8px}
.motif-mini>.avatar{position:absolute;left:7%;bottom:3%;width:auto;height:44%;aspect-ratio:1;z-index:2;box-shadow:0 0 0 3px #141a2b;border-radius:50%}
.motif-card{justify-content:flex-start;padding:7px 7px 9px}
.motif-card .motif-mini{margin-bottom:3px}
/* shop: own art box, so the shop's round icon styles for spans do not reach the drawings */
.shop-motif-art{position:relative;height:110px;overflow:hidden;isolation:isolate;background:#141a2b}
.shop-motif-art.is-frame{display:grid;place-items:center;overflow:visible;background:radial-gradient(circle,#2b2440 0,#141a2b 70%)}
.shop-motif-art>.hint-tag{position:absolute;top:9px;left:9px;z-index:6;box-shadow:0 2px 10px #0006}
.shop-motif-avatar{position:absolute;left:16px;bottom:10px;width:56px;height:56px;border-radius:50%;z-index:2;isolation:isolate}
.shop-motif-art.is-frame .shop-motif-avatar{position:relative;left:auto;bottom:auto;width:64px;height:64px}
.shop-motif-avatar>img,.shop-motif-face{display:block;position:relative;z-index:2;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#2a3350}
.shop-motif-parts{margin-top:10px}
.shop-motif-parts>summary{cursor:pointer;font-size:12px;font-weight:800;color:#c9d3ea;padding:6px 0}
.shop-motif-parts>.shop-items{margin-top:8px}
.group-motif .shop-motif-parts .shop-items{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:620px){.group-motif .shop-motif-parts .shop-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@keyframes hw-flick {  0%, 100% { opacity: 1; } 40% { opacity: .55; } 44% { opacity: .95; } 48% { opacity: .5; } 62% { opacity: .9; } }
@keyframes hw-ringFlick {  0%, 100% { box-shadow: 0 0 calc(14 * var(--u)) calc(3 * var(--u)) rgba(255,140,30,.75); } 45% { box-shadow: 0 0 calc(5 * var(--u)) calc(1 * var(--u)) rgba(255,140,30,.3); } 55% { box-shadow: 0 0 calc(20 * var(--u)) calc(6 * var(--u)) rgba(255,170,60,.9); } }
@keyframes hw-ghost {  0% { transform: translate(0,calc(14 * var(--u))); opacity: 0; } 20% { opacity: .95; } 50% { transform: translate(calc(14 * var(--u)),calc(-8 * var(--u))); } 80% { opacity: .85; } 100% { transform: translate(0,calc(14 * var(--u))); opacity: 0; } }
@keyframes hw-ghostRing {  0%, 100% { box-shadow: 0 0 calc(6 * var(--u)) calc(2 * var(--u)) rgba(225,232,255,.35); } 50% { box-shadow: 0 0 calc(22 * var(--u)) calc(7 * var(--u)) rgba(225,232,255,.8); } }
@keyframes hw-fog {  from { transform: translateX(-18%); } to { transform: translateX(18%); } }
@keyframes hw-drip {  0% { transform: scaleY(0); } 55%, 100% { transform: scaleY(1); } }
@keyframes hw-drop {  0%, 55% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(calc(130 * var(--u))); opacity: 0; } }
@keyframes hw-beat {  0%, 100% { transform: scale(1); box-shadow: 0 0 calc(10 * var(--u)) calc(2 * var(--u)) rgba(200,10,30,.55); } 14% { transform: scale(1.07); box-shadow: 0 0 calc(24 * var(--u)) calc(7 * var(--u)) rgba(235,20,40,.9); } 28% { transform: scale(1); } 42% { transform: scale(1.04); } }
@keyframes hw-flyA {  0% { transform: translate(-16.1cqw,calc(30 * var(--u))); } 25% { transform: translate(21.4cqw,0); } 50% { transform: translate(53.6cqw,calc(36 * var(--u))); } 75% { transform: translate(83.1cqw,calc(6 * var(--u))); } 100% { transform: translate(118.0cqw,calc(30 * var(--u))); } }
@keyframes hw-flap {  from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@keyframes hw-spin {  to { transform: rotate(360deg); } }
@keyframes hw-swing {  0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }
@keyframes hw-descend {  0%, 100% { height: calc(26 * var(--u)); } 50% { height: calc(82 * var(--u)); } }
@keyframes hw-blinkEye {  0%, 86%, 100% { opacity: 1; } 90% { opacity: 0; } 94% { opacity: 1; } }
@keyframes hw-wisp {  0%, 100% { transform: translate(0,0); opacity: .95; } 50% { transform: translate(calc(16 * var(--u)),calc(-18 * var(--u))); opacity: .35; } }
@keyframes hw-greenPulse {  0%, 100% { box-shadow: 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgba(110,255,170,.4); } 50% { box-shadow: 0 0 calc(22 * var(--u)) calc(7 * var(--u)) rgba(110,255,170,.85); } }
@keyframes hw-twk {  0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes cu-blink {  0%, 88%, 100% { transform: scaleY(1); } 92% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
@keyframes cu-earTw {  0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 90% { transform: rotate(5deg); } }
@keyframes cu-paw {  0%, 8% { opacity: 0; transform: scale(.5); } 16% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes cu-bob {  0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-8 * var(--u))); } }
@keyframes cu-drift {  from { transform: translateX(calc(-14 * var(--u))); } to { transform: translateX(calc(14 * var(--u))); } }
@keyframes cu-twinkle {  0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes cu-roll {  0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(calc(130 * var(--u))) rotate(360deg); } }
@keyframes cu-swipe {  0%, 55%, 100% { transform: rotate(0); } 66% { transform: rotate(-30deg); } 78% { transform: rotate(6deg); } }
@keyframes cu-hop {  0%, 100% { transform: translateY(0) scaleY(1); } 10% { transform: translateY(0) scaleY(.84); } 40% { transform: translateY(calc(-36 * var(--u))) scaleY(1.06); } 68% { transform: translateY(0) scaleY(.9); } 80% { transform: scaleY(1); } }
@keyframes cu-wiggle {  0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes cu-rise {  0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(calc(-150 * var(--u))) scale(1.1); opacity: 0; } }
@keyframes cu-wag {  0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes cu-spin {  to { transform: rotate(360deg); } }
@keyframes cu-softGlow {  0%, 100% { box-shadow: 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgba(255,170,205,.45); } 50% { box-shadow: 0 0 calc(20 * var(--u)) calc(6 * var(--u)) rgba(255,170,205,.85); } }
@keyframes gl-petal {  0% { transform: translate(0,calc(-24 * var(--u))) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(calc(70 * var(--u)),calc(180 * var(--u))) rotate(540deg); opacity: 0; } }
@keyframes gl-sparkle {  0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes gl-sweep {  from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(420%) skewX(-20deg); } }
@keyframes gl-spin {  to { transform: rotate(360deg); } }
@keyframes gl-spinR {  to { transform: rotate(-360deg); } }
@keyframes gl-sway {  0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes gl-ribbon {  0%, 100% { transform: skewY(0) translateY(0); } 50% { transform: skewY(5deg) translateY(calc(4 * var(--u))); } }
@keyframes gl-flutter {  0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }
@keyframes gl-flyB {  0% { transform: translate(0,0); } 25% { transform: translate(calc(70 * var(--u)),calc(-22 * var(--u))); } 50% { transform: translate(calc(140 * var(--u)),calc(10 * var(--u))); } 75% { transform: translate(calc(70 * var(--u)),calc(30 * var(--u))); } 100% { transform: translate(0,0); } }
@keyframes gl-iri {  0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes gl-rise {  0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(calc(-150 * var(--u))) scale(1.1); opacity: 0; } }
@keyframes gl-roseGlow {  0%, 100% { box-shadow: 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgba(255,77,136,.45); } 50% { box-shadow: 0 0 calc(22 * var(--u)) calc(7 * var(--u)) rgba(255,77,136,.85); } }
@keyframes gl-lilacGlow {  0%, 100% { box-shadow: 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgba(215,166,255,.45); } 50% { box-shadow: 0 0 calc(22 * var(--u)) calc(7 * var(--u)) rgba(215,166,255,.85); } }