<input id="rage" type="checkbox" aria-label="Rage" class="rage-control">
<label for="rage" class="retsuko">
<div class="retsuko-head">
<div class="retsuko-face">
<div class="retsuko-eye-wrap retsuko-eye-left">
<div class="retsuko-eye"></div>
</div>
<div class="retsuko-eye-wrap retsuko-eye-right">
<div class="retsuko-eye"></div>
</div>
<div class="retsuko-eye-rage retsuko-eye-rage-left">
<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-1"></div>
<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-2"></div>
<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-3"></div>
</div>
<div class="retsuko-eye-rage retsuko-eye-rage-right">
<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-1"></div>
<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-2"></div>
<div class="retsuko-eye-rage-makeup retsuko-eye-rage-makeup-3"></div>
</div>
<div class="retsuko-eyebrow retsuko-eyebrow-left"></div>
<div class="retsuko-eyebrow retsuko-eyebrow-right"></div>
<div class="retsuko-snout">
<div class="retsuko-snout-fur-wrap">
<div class="retsuko-snout-fur"></div>
<div class="retsuko-face-fur retsuko-face-fur-left"></div>
<div class="retsuko-face-fur retsuko-face-fur-right"></div>
<div class="retsuko-face-fur-white retsuko-face-fur-white-left">
<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-1"></div>
<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-2"></div>
<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-3"></div>
</div>
<div class="retsuko-face-fur-white retsuko-face-fur-white-right">
<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-1"></div>
<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-2"></div>
<div class="retsuko-face-fur-white-detail retsuko-face-fur-white-detail-3"></div>
</div>
</div>
<div class="retsuko-nose"></div>
<div class="retsuko-mouth"></div>
<div class="retsuko-mouth-rage">
<div class="retsuko-mouth-rage-makeup retsuko-mouth-rage-makeup-top"></div>
<div class="retsuko-mouth-rage-makeup retsuko-mouth-rage-makeup-bottom"></div>
<div class="retsuko-mouth-rage-inner">
<div class="retsuko-mouth-rage-teeth retsuko-mouth-rage-teeth-top">
<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-1"></div>
<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-2"></div>
<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-3"></div>
<div class="retsuko-mouth-rage-teeth-tooth retsuko-mouth-rage-teeth-tooth-4"></div>
</div>
<div class="retsuko-mouth-rage-teeth retsuko-mouth-rage-teeth-bottom">
<div class="retsuko-mouth-rage-teeth-tooth"></div>
<div class="retsuko-mouth-rage-teeth-tooth"></div>
<div class="retsuko-mouth-rage-teeth-tooth"></div>
<div class="retsuko-mouth-rage-teeth-tooth"></div>
</div>
</div>
<div class="retsuko-mouth-rage-tongue"></div>
</div>
</div>
<div class="retsuko-blush retsuko-blush-left"></div>
<div class="retsuko-blush retsuko-blush-right"></div>
<div class="retsuko-rage" lang="ja">
烈
</div>
</div>
<div class="retsuko-ear retsuko-ear-left">
<div class="retsuko-ear-fur retsuko-ear-fur-1"></div>
<div class="retsuko-ear-fur retsuko-ear-fur-2"></div>
</div>
<div class="retsuko-ear retsuko-ear-right">
<div class="retsuko-ear-fur retsuko-ear-fur-1"></div>
<div class="retsuko-ear-fur retsuko-ear-fur-2"></div>
</div>
</div>
<div class="retsuko-body">
<div class="retsuko-torso">
<div class="retsuko-shirt"></div>
<div class="retsuko-shirt-cut">
<div class="retsuko-shirt-cut-fur"></div>
<div class="retsuko-shirt-collar retsuko-shirt-collar-left"></div>
<div class="retsuko-shirt-collar retsuko-shirt-collar-right"></div>
</div>
<div class="retsuko-arm retsuko-arm-left">
<div class="retsuko-arm-lower"></div>
<div class="retsuko-arm-paw"></div>
</div>
<div class="retsuko-arm retsuko-arm-right">
<div class="retsuko-arm-lower"></div>
<div class="retsuko-arm-paw"></div>
</div>
</div>
<div class="retsuko-body-lower">
<div class="retsuko-skirt"></div>
<div class="retsuko-leg retsuko-leg-left">
<div class="retsuko-leg-shoe"></div>
</div>
<div class="retsuko-leg retsuko-leg-right">
<div class="retsuko-leg-shoe"></div>
</div>
<div class="retsuko-tail"></div>
</div>
</div>
<div class="retsuko-body retsuko-arm-clone">
<div class="retsuko-arm retsuko-arm-left">
<div class="retsuko-arm-lower">
<div class="retsuko-arm-paw retsuko-arm-paw-rage"></div>
<div class="retsuko-arm-paw-rage-finger-wrap">
<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-1"></div>
<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-2"></div>
<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-3"></div>
</div>
</div>
</div>
<div class="retsuko-arm retsuko-arm-right">
<div class="retsuko-arm-lower">
<div class="retsuko-arm-paw retsuko-arm-paw-rage"></div>
<div class="retsuko-arm-paw-rage-finger-wrap">
<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-1"></div>
<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-2"></div>
<div class="retsuko-arm-paw-rage-finger retsuko-arm-paw-rage-finger-3"></div>
</div>
</div>
</div>
</div>
</label>
<div class="rage-background"></div>@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@700&display=swap');
:root {
--black: #634f38;
--white: #fff;
--primary-color: #f5bc60;
--primary-color-dark: hsl(37, 88%, 50%);
--primary-color-tint: hsl(37, 88%, 80%);
--secondary-color: #d4a672;
--accent-color: #3774b6;
--blush-color: #ff99b8;
--mouth-color: #c42127;
--tongue-color: #e0464b;
--shadow-color: rgba(73, 104, 136, 0.3);
--rage-color: #bf1739;
--background: linear-gradient(hsl(8, 100%, 90%) 0%, hsl(342, 100%, 90%) 100%);
--stroke-width: 0.1875rem;
--stroke-width-2: 0.25rem;
}
* { box-sizing: border-box; }
body {
display: grid;
place-items: center;
height: 100vh;
background: var(--background);
font-family: 'Shippori Mincho B1', serif;
font-size: 16px;
line-height: 1;
}
.retsuko {
position: relative;
z-index: 666;
cursor: pointer;
*,
*::before,
*::after {
position: absolute;
}
&-rage {
top: 3rem;
left: 50%;
transform: translateX(-50%);
font-size: 1.25rem;
font-weight: 700;
color: var(--black);
opacity: var(--rage-opacity, 0);
transition: var(--rage-transition, opacity 0.2s);
}
&-eye {
@include border-radius(50% 60%, 50% 40%);
@include absolute-fill();
transform: rotate(calc(var(--eye-rotate, 15deg) * var(--eye-rotate-flip, 1))) scaleY(var(--eye-scale, 1));
background-color: var(--black);
visibility: var(--eye-visibility, visible);
transition: var(--eye-transition, transform 0.25s ease-in-out);
&::before {
content: '';
top: -0.5rem;
height: 1rem;
width: 1.5rem;
border-radius: 100%;
border-bottom: 0.5rem solid var(--black);
}
&-left {
left: var(--eye-position-x);
.retsuko-eye::before {
left: var(--eye-lash-position-x);
}
}
&-right {
--eye-rotate-flip: -1;
right: var(--eye-position-x);
.retsuko-eye::before {
right: var(--eye-lash-position-x);
}
}
&,
&-wrap {
transform-origin: center 70%;
}
&-wrap {
--eye-position-x: 2.75rem;
--eye-lash-position-x: -0.25rem;
z-index: 5;
top: 5.5rem;
height: 1.875rem;
width: 1.625rem;
animation: var(--eye-animation);
}
}
&-eye-rage {
--eye-position-x: 2.375rem;
z-index: 5;
top: calc(5.5rem + var(--eye-rage-top-offset, 0px));
height: 2.125rem;
width: 2.125rem;
transform: scaleY(var(--eye-rage-scale, 0));
transition: var(--eye-rage-transition);
&::before {
content: '';
top: 0;
height: calc(100% - var(--stroke-width-2) * 2);
width: calc(100% - var(--stroke-width-2) * 2);
transform: rotate(var(--eye-rage-rotate));
border: var(--stroke-width-2) solid var(--black);
background-color: var(--white);
}
&-makeup {
z-index: -1;
height: 1.375rem;
width: 1.375rem;
&::before {
content: '';
height: 100%;
width: 100%;
transform-origin: var(--eye-makeup-transform-origin);
transform: rotate(var(--eye-makeup-rotate));
border-top-left-radius: var(--eye-makeup-top-left-radius);
border-top-right-radius: var(--eye-makeup-top-right-radius);
border-bottom-left-radius: var(--eye-makeup-bottom-left-radius);
border-bottom-right-radius: var(--eye-makeup-bottom-right-radius);
background-color: var(--black);
}
&-1 {
--eye-makeup-position-x: -1.25rem;
--eye-makeup-rotate: calc(80deg * var(--eye-makeup-rotate-flip, 1));
top: -0.5rem;
}
&-2 {
--eye-makeup-position-x: -0.375rem;
--eye-makeup-rotate: calc(-10deg * var(--eye-makeup-rotate-flip, 1));
top: 0.25rem;
}
&-3 {
--eye-makeup-position-x: -0.75rem;
--eye-makeup-rotate: calc(-130deg * var(--eye-makeup-rotate-flip, 1));
top: -0.75rem;
}
}
&-left {
--eye-rage-rotate: -25deg;
--eye-makeup-transform-origin: right bottom;
--eye-makeup-top-right-radius: 100% 80%;
--eye-makeup-bottom-right-radius: 20%;
--eye-makeup-bottom-left-radius: 80% 100%;
left: var(--eye-position-x);
&::before {
left: 0;
border-top-left-radius: 50%;
border-top-right-radius: 45% 100%;
border-bottom-left-radius: 100% 45%;
}
.retsuko-eye-rage-makeup {
left: var(--eye-makeup-position-x);
}
}
&-right {
--eye-rage-rotate: 25deg;
--eye-makeup-transform-origin: left bottom;
--eye-makeup-top-left-radius: 100% 80%;
--eye-makeup-bottom-left-radius: 20%;
--eye-makeup-bottom-right-radius: 80% 100%;
--eye-makeup-rotate-flip: -1;
right: var(--eye-position-x);
&::before {
right: 0;
border-top-right-radius: 50%;
border-top-left-radius: 45% 100%;
border-bottom-right-radius: 100% 45%;
}
.retsuko-eye-rage-makeup {
right: var(--eye-makeup-position-x);
}
}
}
&-eyebrow {
--eyebrow-flip: 1;
--eyebrow-position-x: 3.25rem;
--eyebrow-rage-position-x: 0;
top: 4rem;
height: 1rem;
width: 1.125rem;
border-radius: 100%;
transform: var(--eyebrow-transform);
background-color: var(--white);
transition: var(--eyebrow-transition, transform 0.25s ease-in-out);
&::before {
content: '';
left: var(--eyebrow-rage-left);
right: var(--eyebrow-rage-right);
height: 1rem;
width: 1rem;
transform: rotate(calc(80deg * var(--eyebrow-flip))) scaleX(var(--eyebrow-rage-scale, 0));
border-bottom-left-radius: var(--eyebrow-rage-bottom-left-radius, 0);
border-bottom-right-radius: var(--eyebrow-rage-bottom-right-radius, 0);
border-top-left-radius: 100%;
border-top-right-radius: 100%;
background-color: var(--white);
transition: var(--eyebrow-rage-transition, transform 0.25s ease-in-out);
}
&-left {
--eyebrow-rage-left: var(--eyebrow-rage-position-x);
--eyebrow-rage-bottom-right-radius: 100%;
left: var(--eyebrow-position-x);
}
&-right {
--eyebrow-flip: -1;
--eyebrow-rage-right: var(--eyebrow-rage-position-x);
--eyebrow-rage-bottom-left-radius: 100%;
right: var(--eyebrow-position-x);
}
}
&-blush {
top: 6.75rem;
height: 1.25rem;
width: 1.625rem;
border-radius: 100%;
background-color: var(--blush-color);
opacity: var(--blush-opacity, 0.5);
transition: var(--blush-transition, opacity 0.5s ease-in-out);
&-left {
left: 1.625rem;
}
&-right {
right: 1.625rem;
}
}
&-mouth {
z-index: 4;
bottom: 1rem;
left: 50%;
height: 0.3125rem;
width: 1.5rem;
transform: translateX(-50%);
overflow: hidden;
&::before {
content: '';
bottom: 0;
left: 0;
height: 200%;
width: calc(100% - (var(--stroke-width) * 2));
transform-origin: center bottom;
transform: var(--mouth-transform, none);
border-radius: var(--mouth-border-radius, 100%);
border: var(--stroke-width) solid var(--black);
background-color: var(--mouth-background-color, transparent);
transition: var(--mouth-transition, transform 0.25s ease-in-out);
}
}
&-mouth-rage {
z-index: 4;
bottom: 0.25rem;
left: 50%;
height: 2.75rem;
width: 2.625rem;
transform-origin: center 60%;
transform: translateX(-50%) scale(var(--mouth-rage-scale, 0));
transition: var(--mouth-rage-transition, transform 0.15s ease-in-out);
animation: var(--mouth-rage-animation);
&-teeth {
display: flex;
justify-content: space-between;
width: 100%;
&-tooth {
position: relative;
border-style: solid;
}
&-top {
top: 0;
.retsuko-mouth-rage-teeth-tooth {
border-width: 0.5rem 0.25rem 0 0.25rem;
border-color: var(--white) transparent transparent transparent;
&-2,
&-3 {
border-width: 0.5rem 0.1875rem 0 0.1875rem;
}
}
}
&-bottom {
bottom: 0;
.retsuko-mouth-rage-teeth-tooth {
border-width: 0 0.25rem 0.375rem 0.25rem;
border-color: transparent transparent var(--white) transparent;
}
}
}
&-inner {
@include absolute-fill();
border: 0.3125rem solid var(--black);
border-top-width: 0.5rem;
background-color: var(--mouth-color);
transform: perspective(1rem) rotateX(5deg);
}
&-makeup {
--makeup-tip-border-radius: 0.0625rem;
z-index: -1;
left: 50%;
transform: translateX(-50%);
&::before,
&::after {
content: '';
height: 1rem;
width: 1rem;
background-color: var(--black);
}
&-top {
top: -0.5rem;
width: 90%;
height: 0.75rem;
&::before,
&::after {
top: 0.5rem;
}
&::before {
left: -0.125rem;
transform: rotate(-5deg);
border-top-left-radius: var(--makeup-tip-border-radius);
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
}
&::after {
right: -0.125rem;
transform: rotate(5deg);
border-top-right-radius: var(--makeup-tip-border-radius);
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
}
}
&-bottom {
bottom: -0.875rem;
width: 110%;
height: 0.75rem;
&::before,
&::after {
bottom: 0.5rem;
}
&::before {
left: -0.125rem;
transform: rotate(15deg);
border-bottom-left-radius: var(--makeup-tip-border-radius);
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
}
&::after {
right: -0.125rem;
transform: rotate(-15deg);
border-bottom-right-radius: var(--makeup-tip-border-radius);
border-bottom-left-radius: 100%;
border-top-right-radius: 100%;
}
}
}
&-tongue {
@include border-radius(50% 20%, 50% 80%);
right: 0;
top: calc(100% - 1.125rem);
height: 1.875rem;
width: 1.5rem;
transform-origin: center 20%;
transform: rotate(-20deg) scaleY(var(--tongue-scale, 0));
background-color: var(--tongue-color);
transition: var(--tongue-transition, transform 0.25s ease-in-out);
&::before {
content: '';
top: 0;
left: 50%;
height: 60%;
width: var(--stroke-width);
transform: translateX(-50%);
border-bottom-right-radius: var(--stroke-width);
border-bottom-left-radius: var(--stroke-width);
background-color: var(--mouth-color);
}
}
}
&-nose {
z-index: 4;
top: 1.25rem;
left: 50%;
height: 0.9375rem;
width: 0.9375rem;
transform: translate(-50%, var(--nose-translate-y, 0)) scaleY(0.65);
transition: var(--nose-transition, transform 0.25s ease-in-out);
&::before {
@include absolute-fill(true);
border-top-left-radius: 100%;
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.25rem;
transform: rotate(45deg);
background-color: var(--black);
}
}
&-face-fur {
--face-fur-position-x: -1.375rem;
--face-fur-border-radius: 60% 70%;
z-index: 2;
bottom: 0.1875rem;
height: 2.5rem;
width: 3rem;
transform-origin: center bottom;
transform: rotate(var(--face-fur-rotate)) scaleY(var(--face-fur-scale, 1));
background-color: var(--secondary-color);
transition: var(--face-fur-transition, transform 0.25s ease-in-out);
&-left {
--face-fur-rotate: 5deg;
left: var(--face-fur-position-x);
border-bottom-left-radius: var(--face-fur-border-radius);
}
&-right {
--face-fur-rotate: -5deg;
right: var(--face-fur-position-x);
border-bottom-right-radius: var(--face-fur-border-radius);
}
&-white {
--face-fur-white-position-x: -2.5rem;
--face-fur-white-border-top-radius: 30% 70%;
--face-fur-white-border-bottom-radius: 70% 70%;
bottom: 0.75rem;
height: 2.875rem;
width: 2.125rem;
transform-origin: center bottom;
transform: rotate(var(--face-fur-white-rotate));
background-color: var(--white);
&-detail {
height: 1.25rem;
width: 1.25rem;
border-radius: var(--face-fur-detail-border-radius);
background-color: var(--white);
&-1 {
top: 0;
left: var(--face-fur-detail-1-left, auto);
right: var(--face-fur-detail-1-right, auto);
transform: rotate(var(--face-fur-detail-1-rotate));
}
&-2 {
top: 1rem;
left: var(--face-fur-detail-2-left, auto);
right: var(--face-fur-detail-2-right, auto);
transform: rotate(var(--face-fur-detail-2-rotate));
}
&-3 {
top: 1.625rem;
left: var(--face-fur-detail-3-left, auto);
right: var(--face-fur-detail-3-right, auto);
transform: rotate(var(--face-fur-detail-3-rotate));
}
}
&-left {
--face-fur-white-rotate: 15deg;
--face-fur-detail-border-radius: 90% 0 90% 0;
--face-fur-detail-1-left: -0.5rem;
--face-fur-detail-1-rotate: -15deg;
--face-fur-detail-2-left: -0.325rem;
--face-fur-detail-2-rotate: -30deg;
--face-fur-detail-3-left: 0.125rem;
--face-fur-detail-3-rotate: -72deg;
left: var(--face-fur-white-position-x);
border-top-left-radius: var(--face-fur-white-border-top-radius);
border-bottom-left-radius: var(--face-fur-white-border-bottom-radius);
}
&-right {
--face-fur-white-rotate: -15deg;
--face-fur-detail-border-radius: 0 90% 0 90%;
--face-fur-detail-1-right: -0.5rem;
--face-fur-detail-1-rotate: 15deg;
--face-fur-detail-2-right: -0.325rem;
--face-fur-detail-2-rotate: 30deg;
--face-fur-detail-3-right: 0.125rem;
--face-fur-detail-3-rotate: 72deg;
right: var(--face-fur-white-position-x);
border-top-right-radius: var(--face-fur-white-border-top-radius);
border-bottom-right-radius: var(--face-fur-white-border-bottom-radius);
}
}
}
&-snout {
bottom: 0.5rem;
left: 50%;
height: 4rem;
width: 4.5rem;
transform: translateX(-50%);
&-fur {
@include border-radius(50% 65%, 50% 35%);
z-index: 3;
background-color: var(--white);
&,
&-wrap {
@include absolute-fill;
transform-origin: center bottom;
transform: var(--snout-fur-transform, none);
transition: var(--snout-fur-transition, transform 0.25s ease-in-out);
}
}
}
&-face {
@include absolute-fill;
@include border-radius(50% 75%, 50% 25%);
z-index: 3;
background-color: var(--primary-color);
}
&-ear {
--ear-position-x: -2rem;
z-index: 1;
top: 1.5rem;
height: 6rem;
width: 6rem;
background-color: var(--white);
border-radius: var(--ear-border-radius);
transform-origin: var(--ear-transform-origin);
transform: rotate(var(--ear-rotate));
&::before {
content: '';
top: 1.5rem;
left: var(--ear-inner-left, auto);
right: var(--ear-inner-right, auto);
height: 3rem;
width: 3rem;
transform: rotate(var(--ear-inner-rotate));
border-radius: var(--ear-inner-border-radius);
background-color: var(--secondary-color);
}
&::after {
content: '';
bottom: 0.5rem;
left: var(--ear-shadow-left, auto);
right: var(--ear-shadow-right, auto);
height: 4rem;
width: 3rem;
border-radius: 100%;
background-color: var(--shadow-color);
opacity: 0.5;
}
&-fur {
height: 1.25rem;
width: 1.25rem;
transform: skewX(var(--ear-fur-skew)) rotate(var(--ear-fur-rotate, 0deg));
background-color: var(--white);
&-1 {
bottom: 0.625rem;
left: var(--ear-fur-1-left, auto);
right: var(--ear-fur-1-right, auto);
}
&-2 {
--ear-fur-rotate: var(--ear-fur-2-rotate);
bottom: 0rem;
left: var(--ear-fur-2-left, auto);
right: var(--ear-fur-2-right, auto);
}
}
&-left {
--ear-border-radius: 0.5rem 0 0 100%;
--ear-transform-origin: right center;
--ear-rotate: 30deg;
--ear-shadow-right: 0.625rem;
--ear-inner-left: 1.5rem;
--ear-inner-rotate: -5deg;
--ear-inner-border-radius: 0.25rem 90% 0 90%;
--ear-fur-skew: -30deg;
--ear-fur-1-left: 1.875rem;
--ear-fur-2-left: 2.325rem;
--ear-fur-2-rotate: -30deg;
left: var(--ear-position-x);
}
&-right {
--ear-border-radius: 0 0.5rem 100% 0;
--ear-transform-origin: left center;
--ear-rotate: -30deg;
--ear-shadow-left: 0.625rem;
--ear-inner-right: 1.5rem;
--ear-inner-rotate: 5deg;
--ear-inner-border-radius: 90% 0.25rem 90% 0;
--ear-fur-skew: 30deg;
--ear-fur-1-right: 1.875rem;
--ear-fur-2-right: 2.325rem;
--ear-fur-2-rotate: 30deg;
right: var(--ear-position-x);
}
}
&-head {
position: relative;
z-index: 10;
height: 10rem;
width: 12.5rem;
transform-origin: center bottom;
animation: var(--head-animation);
}
&-shirt {
@include absolute-fill;
z-index: 5;
background-color: var(--accent-color);
// transform: perspective(1rem) rotateX(3deg);
transform: perspective(2rem) rotateX(6deg) translateZ(1px); // safari💀
&::before,
&::after {
--shirt-bottom-position-x: 0.1875rem;
content: '';
bottom: -0.325rem;
height: 1.9375rem;
width: 1.9375rem;
transform: rotate(var(--shirt-bottom-rotate));
background-color: var(--accent-color);
}
&::before {
--shirt-bottom-rotate: 15deg;
left: var(--shirt-bottom-position-x);
}
&::after {
--shirt-bottom-rotate: -15deg;
right: var(--shirt-bottom-position-x);
}
&-cut {
z-index: 6;
left: 50%;
-webkit-transform: translateZ(2px); // safari💀
&-fur {
z-index: 2;
border-style: solid;
border-width: 2rem 1.25rem 0 1.25rem;
border-color: var(--secondary-color) transparent transparent transparent;
left: 50%;
transform: translateX(-50%);
}
}
&-collar {
z-index: 1;
&::before,
&::after {
content: '';
background-color: var(--white);
}
&::before {
top: 0.5rem;
left: var(--collar-1-left, auto);
right: var(--collar-1-right, auto);
height: 1rem;
width: 1rem;
transform: rotate(var(--collar-1-rotate));
}
&::after {
top: 1.25rem;
left: var(--collar-2-left, auto);
right: var(--collar-2-right, auto);
height: 0.625rem;
width: 0.625rem;
transform: rotate(var(--collar-2-rotate));
}
&-left {
--collar-1-rotate: 20deg;
--collar-2-rotate: 18deg;
--collar-1-left: -1rem;
--collar-2-left: -0.5rem;
}
&-right {
--collar-1-rotate: -20deg;
--collar-2-rotate: -18deg;
--collar-1-right: -1rem;
--collar-2-right: -0.5rem;
}
}
}
&-arm {
--arm-rotate-flip: 1;
--arm-position-x: -0.25rem;
--arm-height-lower: 1rem;
z-index: 1;
top: 0.25rem;
height: 2rem;
width: 0.5rem;
transform-origin: 0.25rem center;
transform: rotate(calc(var(--arm-rotate, 50deg) * var(--arm-rotate-flip)));
background-color: var(--white);
transition: var(--arm-transition, transform 0.25s 1.5s ease-in-out);
animation: var(--arm-animation);
&-lower {
z-index: 2;
top: calc(100% - 0.25rem);
width: 100%;
height: var(--arm-height-lower);
transform-origin: center 0.25rem;
transform: rotate(calc(var(--arm-lower-rotate) * var(--arm-rotate-flip)));
background-color: inherit;
transition: var(--arm-lower-transition, transform 0.25s ease-in-out)
}
&-paw {
z-index: 1;
left: calc(50% - 0.375rem);
top: calc(100% + var(--arm-height-lower) - 0.375rem);
height: 1rem;
width: 0.75rem;
transform: rotate(calc(10deg * var(--arm-rotate-flip))) scale(var(--arm-paw-scale, 1));
transform-origin: center 0.125rem;
background-color: var(--secondary-color);
border-radius: var(--arm-paw-border-radius, 100%);
transition: var(--arm-paw-transition, 0s 0.25s);
}
&-left {
--finger-rotate-flip: -1;
--arm-paw-finger-1-right: var(--arm-paw-finger-1-position-x);
--arm-paw-finger-2-right: var(--arm-paw-finger-2-position-x);
--arm-paw-finger-3-right: var(--arm-paw-finger-3-position-x);
--arm-paw-finger-wrap-right: 0;
left: var(--arm-position-x);
}
&-right {
--arm-rotate-flip: -1;
--arm-paw-finger-1-left: var(--arm-paw-finger-1-position-x);
--arm-paw-finger-2-left: var(--arm-paw-finger-2-position-x);
--arm-paw-finger-3-left: var(--arm-paw-finger-3-position-x);
--arm-paw-finger-wrap-left: 0;
right: var(--arm-position-x);
}
}
&-arm-paw-rage {
visibility: var(--arm-paw-rage-visibility, hidden);
transition: var(--arm-paw-rage-transition, transform 0.25s ease-in-out, visibility 0s 0.27s);
&,
&-finger-wrap {
top: calc(100% - var(--arm-paw-rage-top-offset, 0.125rem));
transform: rotate(calc(var(--arm-paw-rage-rotate, 10deg) * var(--arm-rotate-flip))) translateX(calc(var(--arm-paw-rage-translate) * var(--arm-rotate-flip))) scale(var(--arm-paw-rage-scale, 1));
}
&-finger {
height: 1.5rem;
width: 0.75rem;
transform-origin: center top;
transform: scaleY(var(--arm-paw-finger-scale, 0)) rotate(calc(var(--arm-paw-finger-rotate) * var(--finger-rotate-flip)));
transition: var(--arm-paw-finger-transition, transform 0s ease-in-out);
&::before,
&::after {
content: '';
}
&::before {
@include absolute-fill();
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
background-color: var(--secondary-color);
}
&::after {
z-index: -1;
top: calc(100% - 0.125rem);
left: calc(50% - 0.125rem);
height: 0.5rem;
width: 0.1875rem;
border-bottom-left-radius: 50% 70%;
border-bottom-right-radius: 50% 70%;
background-color: var(--black);
}
&-1 {
--arm-paw-finger-rotate: 55deg;
top: 0.4375rem;
height: 1rem;
left: var(--arm-paw-finger-1-left, auto);
right: var(--arm-paw-finger-1-right, auto);
}
&-2 {
--arm-paw-finger-rotate: 5deg;
top: 0.75rem;
left: var(--arm-paw-finger-2-left, auto);
right: var(--arm-paw-finger-2-right, auto);
}
&-3 {
--arm-paw-finger-rotate: -10deg;
top: 0.75rem;
left: var(--arm-paw-finger-3-left, auto);
right: var(--arm-paw-finger-3-right, auto);
}
&-wrap {
--arm-paw-rage-scale: 1;
z-index: -1;
left: var(--arm-paw-finger-wrap-left, auto);
right: var(--arm-paw-finger-wrap-right, auto);
height: 1rem;
width: 1rem;
}
}
}
&-torso {
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 3rem;
perspective: 1000px;
}
&-tail {
top: 2rem;
left: calc(100% - 1rem);
height: 3rem;
width: 3rem;
transform-origin: left top;
transform: rotate(var(--tail-rotate, -30deg));
border-top-right-radius: 85%;
border-bottom-left-radius: 85%;
border-bottom-right-radius: 15%;
background-color: var(--primary-color);
// background: linear-gradient(135deg, var(--primary-color) 30%, var(--secondary-color) 30%, var(--secondary-color) 40%, var(--primary-color) 40%, var(--primary-color) 55%, var(--secondary-color) 55%, var(--secondary-color) 65%, var(--primary-color) 65%, var(--primary-color) 80%, var(--secondary-color) 80%);
background-image: radial-gradient(circle 4rem at 0 0.3125rem, var(--primary-color) 30%, var(--secondary-color) 30%, var(--secondary-color) 40%, var(--primary-color) 40%, var(--primary-color) 55%, var(--secondary-color) 55%, var(--secondary-color) 65%, var(--primary-color) 65%, var(--primary-color) 80%, var(--secondary-color) 80%);
background-repeat: no-repeat;
transition: var(--tail-transition, transform 0.25s ease-in-out);
animation: var(--tail-animation);
}
&-leg {
--leg-position-x: 0.75rem;
z-index: 1;
top: calc(100% - 0.25rem);
height: 1.5rem;
width: 1rem;
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
background-color: var(--secondary-color);
&-shoe {
height: 100%;
width: 100%;
transform: rotateY(var(--leg-rotate-y));
transition: var(--leg-transition, transform 0.1s ease-out);
&::before,
&::after {
content: '';
transform-origin: var(--leg-foot-transform-origin);
transform: rotate(var(--leg-foot-rotate));
border-radius: 100%;
}
&::before {
top: calc(100% - 0.5rem);
left: var(--leg-foot-left, auto);
right: var(--leg-foot-right, auto);
height: 0.625rem;
width: 1.325rem;
background-color: var(--black);
}
&::after {
bottom: 0.125rem;
left: 0;
width: 100%;
height: 0.4375rem;
background-color: var(--secondary-color);
}
}
&-left {
--leg-foot-left: -0.0625rem;
--leg-foot-rotate: 20deg;
--leg-foot-transform-origin: left center;
left: var(--leg-position-x);
animation: var(--leg-animation);
}
&-right {
--leg-rotate-flip: -1;
--leg-foot-right: -0.0625rem;
--leg-foot-rotate: -20deg;
--leg-foot-transform-origin: right center;
right: var(--leg-position-x);
}
}
&-skirt {
@include absolute-fill;
z-index: 2;
background-color: var(--accent-color);
// transform: perspective(1rem) rotateX(-2deg);
transform: perspective(2rem) rotateX(-4deg) scaleX(0.95) translateZ(2px); // safari💀
&::before,
&::after {
content: '';
}
&::before {
top: -0.5rem;
left: 50%;
width: 95%;
height: 2rem;
transform: translateX(-50%);
border-radius: 100%;
background-color: var(--shadow-color);
mix-blend-mode: multiply;
}
&::after {
bottom: -0.25rem;
border-style: solid;
border-width: 0.25rem 2rem 0 2rem;
border-color: var(--accent-color) transparent transparent transparent;
}
}
&-body-lower {
z-index: 1;
bottom: 0;
height: 3rem;
width: 100%;
perspective: 1000px;
}
&-body {
position: relative;
margin-top: -1rem;
left: 50%;
transform: translateX(-50%);
width: 4rem;
height: 5.5rem;
// perspective: 1000px;
}
&-arm-clone {
--finger-rotate-flip: 1;
--arm-paw-finger-1-position-x: -0.3125rem;
--arm-paw-finger-2-position-x: -0.375rem;
--arm-paw-finger-3-position-x: 1.0625rem;
z-index: 11;
position: absolute;
top: 10rem;
.retsuko-arm {
background-color: transparent;
}
}
}
.rage-control {
position: absolute;
opacity: 0;
&:checked {
+ .retsuko {
--rage-delay: 0.4s;
--rage-delay-2: 0.6s;
--rage-delay-3: 0.8s;
--rage-delay-4: 1.2s;
--rage-opacity: 1;
--rage-transition: opacity 0.4s var(--rage-delay-2);
--eye-scale: 0.3;
--eye-rotate: 25deg;
--eye-visibility: hidden;
--eye-transition: transform 0.2s 0.3s ease-in-out, visibility 0s 0.5s;
// start eye rotated to match original eye rotation
--eye-rage-top-offset: -1.25rem;
--eye-rage-scale: 1;
--eye-rage-transition: transform 0.2s var(--rage-delay) ease-in-out, top 0.2s var(--rage-delay-2) ease-in-out;
--eyebrow-transition: transform 0.9s 0.2s ease-out;
--eyebrow-rage-scale: 1;
--eyebrow-rage-transition: transform 0.2s 0.4s ease-in-out;
--blush-opacity: 0;
--blush-transition: opacity 1s;
--mouth-transform: scale(0.3);
--mouth-border-radius: 50% / 70% 70% 30% 30%;
--mouth-background-color: var(--black);
--mouth-transition: transform 0.05s ease-in-out;
--mouth-rage-scale: 1;
--mouth-rage-transition: transform 0.2s var(--rage-delay-2) ease-in-out;
--mouth-rage-animation: mouthShake 0.1s var(--rage-delay-4) infinite;
--tongue-scale: 1;
--tongue-transition: transform 0.4s var(--rage-delay-3) ease-in-out;
--nose-translate-y: -1.25rem;
--nose-transition: transform 0.2s var(--rage-delay-2) ease-in-out;
--face-fur-scale: 1.3;
--face-fur-transition: transform 0.2s var(--rage-delay-2) ease-in-out;
--snout-fur-transform: scaleY(1.1);
--snout-fur-transition: transform 0.2s var(--rage-delay-2) ease-in-out;
--tail-rotate: -60deg;
--tail-transition: transform 0.4s ease-in-out;
// --arm-rotate: 15deg;
--arm-animation: armRotateDown 0.3s ease-in-out forwards;
--arm-transition: transform 0.3s ease-in-out;
--arm-lower-rotate: 100deg;
--arm-lower-transition: transform 0.5s var(--rage-delay-3) ease-in-out;
--arm-paw-scale: 0;
--arm-paw-border-radius: 45%;
--arm-paw-transition: 0s var(--rage-delay-3);
--arm-paw-rage-top-offset: 0.375rem;
--arm-paw-rage-scale: 3, 1.9;
--arm-paw-rage-rotate: 60deg;
--arm-paw-rage-translate: 0.5rem;
--arm-paw-rage-visibility: visible;
--arm-paw-rage-transition: visibility 0s var(--rage-delay-3), transform 0.5s var(--rage-delay-3) ease-in-out, border-radius 0.6s var(--rage-delay-3) ease-in-out, top 0.2s var(--rage-delay-3);
--arm-paw-finger-scale: 1;
--arm-paw-finger-transition: transform 0.2s 1.1s ease-in-out;
--leg-rotate-y: -180deg;
--leg-transition: transform 0.1s var(--rage-delay-2) ease-out;
.retsuko-eyebrow {
--eyebrow-transform: translate(calc(0.875rem * var(--eyebrow-flip)), -0.375rem) rotate(calc(20deg * var(--eyebrow-flip)));
}
}
~ .rage-background {
--rage-opacity: 1;
--rage-size: 140%;
--rage-transition: opacity 0.3s 0.6s, background-size 0.7s 0.6s ease-in-out;
}
}
&:not(:checked) {
+ .retsuko {
--dance-animation: 0.8s 2s infinite;
--eye-animation: blinky 7s 2s infinite;
--head-animation: headRotate var(--dance-animation);
--arm-rotate: 50deg;
--arm-animation: armRotate var(--dance-animation);
--leg-animation: legRotate var(--dance-animation);
--tail-animation: tailRotate var(--dance-animation);
}
}
}
.rage-background {
position: fixed;
z-index: 1;
height: 100%;
width: 100%;
background-image: radial-gradient(circle, var(--rage-color) 0%, var(--black) 70%);
background-size: var(--rage-size, 100%);
background-position: center;
background-repeat: no-repeat;
; opacity: var(--rage-opacity, 0);
mix-blend-mode: multiply;
transition: var(--rage-transition, 0.25s);
}
@keyframes mouthShake {
0%, 100% {
--mouth-rage-scale: 1;
}
50% {
--mouth-rage-scale: 1, 1.1;
}
}
@keyframes armRotate {
50% {
transform: rotate(calc(90deg * var(--arm-rotate-flip)))
}
}
@keyframes headRotate {
50% {
transform: rotate(-5deg)
}
}
@keyframes tailRotate {
50% {
transform: rotate(-60deg)
}
}
@keyframes legRotate {
50% {
transform: rotate(calc(80deg * var(--leg-rotate-flip, 1))) translate(-0.25rem, 0.125rem)
}
}
@keyframes armRotateDown {
100% {
transform: rotate(calc(15deg * var(--arm-rotate-flip)))
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.