/* -----------------------------------------------------------------
   Role: アーカイブページ専用 非同期遅延CSS 
   ----------------------------------------------------------------- */
:is(button, input[type="button"], input[type="submit"]) {
    cursor: pointer;
}

a:active,
a:hover {
    outline: 0
}

/* =========================================================
   25. Floating TOC Button / TOC Modal / TOC
========================================================= */

#page-top.is-visible {
    transform: translateY(0);
}

/* =========================================================
   26. Generic Modal Area
========================================================= */

body.js-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.modal-text,
.modal-box figure {
    overscroll-behavior: contain;
}

.modal-text {
    position: relative;
    overflow-y: auto;
    max-height: 16vh;
    margin-top: 1.3em;
    padding: 0 1.3em;
}

.modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000002;
    display: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #0c0e0f82;
    transition: opacity 0.15s;
    transition-behavior: allow-discrete;

    @starting-style {
        opacity: 1;
    }
}

.modal-wrap.is-open {
    display: flex !important;
    opacity: 1;
    transition: opacity 0.55s;

    @starting-style {
        opacity: 0;
    }
}

.modal-box {
    position: relative;
    width: 96%;
    max-width: 950px;
    margin: auto;
    padding: 0 0 1.3em;
    border-radius: 10px 0 10px 10px;
    background: #c9eaff;
}

.modal-wrap .modal-close {
    position: absolute;
    top: -2.3em;
    right: 0;
    padding: 0.45em 0.8em;
    border-radius: 10px 10px 0 0;
    color: #042234;
    background: #c9eaff;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: color 0.2s;
}

.modal-close i {
    padding-right: 0.15em;
}

.modal-wrap .modal-close:hover {
    color: #042234b3;
}

.js-modal-open {
    color: #0066ff;
    transition: color 0.18s;
}

.footer .js-modal-open {
    color: #042234;
}

/* =========================================================
   38. Header Character Animation Hooks
========================================================= */
.animation-3 .header-second-son-right-hand {
    animation: header-second-son-right-hand 20s 2.6s infinite;
}

.animation-3 .header-second-son-face,
.animation-3 .header-second-son-smile-face {
    animation: header-second-son-face 20s 2.6s infinite;
}

.animation-3 .header-second-son-smile-face {
    animation: header-second-son-smile-face 20s 2.6s infinite;
}

.animation-3 .header-second-son-left-hand {
    animation: header-second-son-left-hand 20s 2.6s infinite;
}

.animation-3 .header-third-son {
    animation: header-third-son 20s 2.6s ease-in-out infinite;
}

.animation-3 .header-third-son-right-hand {
    animation: header-third-son-right-hand 20s 2.6s infinite;
}

.animation-3 .header-third-son-left-hand {
    animation: header-third-son-left-hand 20s 2.6s infinite;
}

.site-title:hover {
    filter: opacity(60%);
}

/* =========================================================
   72. Footer Scene
========================================================= */
.footer {
    padding-bottom: 20px;
    background-image: linear-gradient(180deg, #60c2ff 0%, var(--c-white) 100%);
}

.footer:not(.page-id-979 .footer) {
    box-shadow: 0 -16px 16px -26.5px #000;
    position: relative;
}

.seaside-scenery div,
.footer-cloud,
.sea {
    position: absolute;
}

.footer-cloud.n1 {
    top: 48%;
    left: 8%;
}

.footer-cloud.n2 {
    top: 49.5%;
    left: 75%;
}

.animation .footer-cloud {
    transform: translate(0) !important;
    opacity: 1 !important;
}

.sandy-beach {
    top: 610px;
    width: 100vw;
}

.palm-tree {
    transform-origin: bottom;
}

.palm-tree.n1 {
    left: calc(49.5vw - 670px);
    z-index: 1;
    margin-top: -100px;
}

.palm-tree.n2 {
    right: calc(49.5vw - 670px);
    z-index: 1;
    margin-top: -100px;
}

.palm-tree.n3 {
    left: calc(44vw - 220px);
    margin-top: 175px;
}

.palm-tree.n4 {
    right: calc(44vw - 220px);
    margin-top: 175px;
}

.stone {
    z-index: 2;
}

.stone.n1 {
    left: calc(50vw + 235px);
    margin-top: 480px;
}

.stone.n2 {
    left: calc(26vw - 107px);
    margin-top: 470px;
}

.crab {
    z-index: 1;
    offset-distance: 100%;
}

.crab.n1 {
    left: calc(50vw + 242px);
    margin-top: 473px;
    offset-path: path("M0,.47C43.98-.15,91.81,7.83,134.67,18.73");
}

.crab.n2 {
    left: calc(50vw - 363px);
    margin-top: 475px;
    offset-path: path("M.04,4.78C40.85-.9,108.76.42,108.76.42");
}

.sea {
    width: 100%;
    height: 100%;
    transform: translateY(-8px);
}

.sea.n1 {
    background: #204d69;
    top: 84%;
}

.sea.n2 {
    background: #46baff;
    top: 85%;
}

/* =========================================================
   【修正後】 .home のアニメーション（.paged除外のスマート化）
========================================================= */
.home:not(.paged) .animation .carousel .item.a {
    animation: fade-in-a 5.5s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.home:not(.paged) .animation .carousel .item:is(.b, .h) {
    animation: fade-in-bh 5.1s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.home:not(.paged) .animation .carousel .item:is(.c, .g) {
    animation: fade-in-cg 4.7s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.home:not(.paged) .animation .carousel .item:is(.d, .f) {
    animation: fade-in-df 4.1s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.home:not(.paged) .animation .carousel .item.e {
    animation: fade-in-e 3.6s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.home:not(.paged) .footer-cloud {
    opacity: 0;
    transition: opacity 2.4s ease-in, transform 27s cubic-bezier(0.33, 0.19, 0.53, 0.93);
}

.home:not(.paged) .footer-cloud.n1 {
    transform: translate(160px, 33px);
    transition-delay: 2s;
}

.home:not(.paged) .footer-cloud.n2 {
    transform: translate(160px, -30px);
    transition-delay: 2.5s;
}

.home:not(.paged) .animation .palm-tree {
    transform: rotate(0) !important;
}

.home:not(.paged) .palm-tree.n1 {
    transform: rotate(7deg);
    transition: transform 1.65s 2.6s cubic-bezier(0.3, 0.05, 0.53, 1);
}

.home:not(.paged) .palm-tree.n2 {
    transform: rotate(-7deg);
    transition: transform 1.4s 2.4s cubic-bezier(0.3, 0.05, 0.53, 1);
}

.home:not(.paged) .palm-tree.n3 {
    transform: rotate(7deg);
    transition: transform 1.65s 1.8s cubic-bezier(0.3, 0.05, 0.53, 1);
}

.home:not(.paged) .palm-tree.n4 {
    transform: rotate(-7deg);
    transition: transform 1.4s 1.6s cubic-bezier(0.3, 0.05, 0.53, 1);
}

.home:not(.paged) .animation-2 .crab.n1 {
    animation: crab 10s 5s cubic-bezier(0.05, 0.06, 0.85, 0.98) alternate infinite;
}

.home:not(.paged) .animation-2 .crab.n2 {
    animation: crab 7s 5s cubic-bezier(0.05, 0.06, 0.85, 0.98) alternate infinite;
}

.home:not(.paged) .animation-2 .sea.n1 {
    animation: home-position 6s ease-in-out alternate infinite;
}

.home:not(.paged) .animation-2 .sea.n2 {
    animation: home-position 3.3s ease-in-out alternate infinite;
}


.home:not(.paged) .animation-2 .carousel .third-son {
    animation: overreaching 30.3s 5.6s cubic-bezier(0.56, 0.04, 1, 1);
}

.home:not(.paged) .animation-2 .carousel .third-son .front {
    animation: rotate-while-floating 30s 6s cubic-bezier(0.17, 0.03, 0.58, 1) infinite;
}

.home:not(.paged) .animation-2 .carousel .third-son .rear {
    animation: rotate-while-floating-2 30s 6s cubic-bezier(0.17, 0.03, 0.58, 1) infinite;
}

.home:not(.paged) .animation-2 .carousel .runny-nose {
    animation: drooping-swaying-falling 30s 36s infinite;
}

.home:not(.paged) .animation-2 .carousel .shake-the-tail {
    animation: shake-the-tail 30s 6s infinite;
}

.home:not(.paged) .animation-2 .carousel .shadow-of-feet {
    animation: big-small 30s 6s cubic-bezier(0.17, 0.03, 0.58, 1) infinite;
}

.home:not(.paged) .animation-2 .carousel .second-son {
    animation: happy-dance 30s 9s infinite;
}

.home:not(.paged) .animation-2 .carousel .hand.right {
    animation: wave-hands-r 30s 9s infinite;
}

.home:not(.paged) .animation-2 .hand.right.pen-light:after {
    animation: pen-light-r 30s 9s infinite;
}

.home:not(.paged) .animation-2 .hand.left.pen-light:after {
    animation: pen-light-l 30s 9s infinite;
}

.home:not(.paged) .animation-2 .carousel .hand.left {
    animation: wave-hands-l 30s 9s infinite;
}

.home:not(.paged) .animation-2 .carousel .face {
    animation: face-second-son 30s 9s infinite;
}

.home:not(.paged) .animation-2 .carousel .embarrassed {
    animation: face-shake-second-son 30s 9s infinite;
}

.home:not(.paged) .animation-2 .carousel .butterfly {
    animation: fly-around 19s ease-in-out infinite;
}

.home:not(.paged) .animation-2 .carousel .eldest-son {
    animation: boing-boing 8s 14s infinite;
}

.home:not(.paged) .animation-2 .mascot.eldest-daughter.n6 {
    animation: quick-change-of-clothes 15s 15s infinite;
}

.home:not(.paged) .animation-2 .mascot.eldest-daughter.n5 {
    animation: quick-change-of-clothes-2 15s 15s infinite;
}

.home:not(.paged) .animation-2 .mascot.eldest-daughter.n4 {
    animation: quick-change-of-clothes-3 15s 15s infinite;
}

.home:not(.paged) .animation-2 .mascot.eldest-daughter.n3 {
    animation: quick-change-of-clothes-4 15s 15s infinite;
}

.home:not(.paged) .animation-2 .mascot.eldest-daughter.n2 {
    animation: quick-change-of-clothes-5 15s 15s infinite;
}

.home:not(.paged) .animation-2 .mascot.eldest-daughter.n1 {
    animation: quick-change-of-clothes-6 15s 15s infinite;
}

/* =========================================================
   76. Fade Helpers / iframe / Widget Containers
========================================================= */
.fade-up-jump.animation,
.animation .fade-up-jump {
    animation: fade-up-jump 0.3s cubic-bezier(0.15, 0.16, 0.14, 1.73) forwards;
}

.fade-down.animation,
.animation .fade-down {
    animation: fade-down 0.35s cubic-bezier(0.25, 0.1, 0.1, 1) forwards;
}

.mascot {
    z-index: 1;
}

.footer-links ul li {
    display: inline-block;
}

.footer-links ul li::after {
    margin-right: 4.5px;
    margin-left: 8.5px;
    content: "|";
}

.footer-links ul li:last-child::after {
    content: none;
}

.copyright {
    margin: 67px 18px 0;
    font-size: 13px;
    letter-spacing: 0.55px;
    pointer-events: none;
}

.site-mascot-third-son-silhouette {
    position: absolute;
    top: 3.54em;
    left: 50%;
    width: 45px;
    height: 50px;
    transform: translateX(-50%);
    background: url("/wp-content/uploads/site-mascot-third-son-silhouette.svg") no-repeat;
}

/* =========================================================
   80. Footer Inner / Mascot / Radar Chart
========================================================= */
.copyright,
#inner-footer nav {
    text-align: center;
}

#inner-footer nav {
    overflow: auto;
    padding: 22px 0.5em 0.5em;
    letter-spacing: 0.5px;
}

.mascot.second-son span {
    position: absolute;
    background-repeat: no-repeat;
}

/* =========================================================
   81. External Buttons
========================================================= */
.btn a {
    position: relative;
    display: block;
    width: 90%;
    max-width: 338px;
    height: 57px;
    margin: 0 auto;
    border-radius: 5px;
    color: var(--c-white);
    background: center no-repeat;
    transition: 0.3s 0.02s box-shadow ease-in-out, 0.3s 0.02s transform ease-in-out;
}

/* =========================================================
   修正後：星評価アニメーション（GPU完全オフロード版）
========================================================= */
.carousel .third-son .front {
    background-image: url("/wp-content/uploads/third-son-of-the-site-mascot.svg");
}

.dot-3 {
    top: 18%;
    left: 0.4%;
    letter-spacing: 2px;
}

.pointer-events {
    animation: pointer-events 4s forwards;
}

.pointer-events-on {
    animation: pointer-events-on 0s 2.5s forwards;
}

.footer a:hover {
    color: var(--c-white);
}

/* =========================================================
   93. Footer Carousel / Mascot Introduction
========================================================= */
.introduction-of-site-mascot {
    width: 187px;
    height: 250px;
    margin: 165px auto 278px;
    perspective: 970px;
    /* ▼ 追加：外の世界（海や木）との計算を物理的に遮断する ▼ */
    isolation: isolate;
    contain: layout size;
    /* 親のサイズを固定し、計算をこの箱に閉じ込める */
}

/* 巨大SVG要素が3D空間の計算に混ざらないようにする */
.palm-tree img,
.footer-cloud img {
    pointer-events: none;
}

.carousel {
    transform-style: preserve-3d;
    transition: transform 0.88s cubic-bezier(0.9, 0, 0.43, 1);
    will-change: transform;
    /* ▼ 追加：ブラウザの余計なイベント監視を止めて、描画に専念させる ▼ */
    touch-action: manipulation;
    pointer-events: auto;
    /* ボタン以外の不要なイベント反応を絞るならJSと併用 */
}

.carousel .item .notepad,
.carousel .item .mascot {
    /* ▼ 3D回転による「文字の滲み」を防ぎ、GPUの負担を最小化する ▼ */
    backface-visibility: visible;
    /* 背面は見せる */
    transform: translateZ(1px);
    /* 1ピクセルだけ浮かせて、親パネルの表面に張り付かせる */
}

.carousel-title,
#footer-top .fi-tr-caret-down {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -30px);
    opacity: 0;
    transition: transform 2s cubic-bezier(.24, .29, .16, 1), opacity 2s cubic-bezier(.24, .29, .16, 1)
}

.animation .carousel-title,
.animation #footer-top .fi-tr-caret-down {
    opacity: 1;
    transform: translate(-50%, 0);
}

#footer-top .fi-tr-caret-down {
    top: 5.4%;
    font-size: 30px;
    transition-delay: 0.2s;
}

.carousel-title {
    top: 3.6%;
    width: 177px
}

.single .carousel .item {
    opacity: 0
}

.carousel .item {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 285px;
    border-radius: 10px;
    background: rgb(251 252 254);
    contain: layout paint;
}

.carousel .mascot *,
.carousel .anime-container * {
    /* 動く小石や尻尾、鼻水、すべてをGPUで合成処理させる */
    transform: translate3d(0, 0, 0);
}

/* --- カルーセル操作ボタン全体の設定 --- */
.operation-buttons {
    position: relative;
    top: 467.5px;
    display: flex;
    justify-content: center;
    gap: 10px;
    /* user-select: none;
  -webkit-user-select: none;*/
    will-change: transform;
}

/* --- ボタン本体の設定（divから修正） --- */
.operation-buttons button {
    padding: 0;
    border-radius: 6px;
    background: var(--c-accent);
    box-shadow: 0 3.5px 0 #3f687f;
    font-size: 13.4px;
    transition: color 0.2s 0.03s ease-in-out, transform 0.15s ease-out, box-shadow 0.15s ease-in-out;
}

.operation-buttons button:hover {
    color: var(--c-white);
}

.operation-buttons button:active {
    transform: translateY(1.5px);
    box-shadow: 0 2px 0 #3f687f;
}

.operation-buttons span {
    display: flex;
    place-content: center;
    place-items: center;
    width: 77px;
    height: 38px;
    padding-top: 1.5px;
    font-weight: 400;
    user-select: none;
}

.operation-buttons .prev span {
    padding-left: 9px;
}

.operation-buttons .next span {
    padding-right: 9px;
}

.operation-buttons .prev:after {
    margin-left: -30px;
    content: "\e375";
}

.operation-buttons .next:before {
    margin-left: 17px;
    content: "\e377";
}

.operation-buttons .next:before,
.operation-buttons .prev:after {
    position: absolute;
    top: 13.5px;
    font-family: "uicons-thin-rounded";
}

.item.a {
    transform: rotateY(0) translateZ(330px);
}

.item.b {
    transform: rotateY(45deg) translateZ(330px);
}

.item.c {
    transform: rotateY(90deg) translateZ(330px);
}

.item.d {
    overflow: hidden;
    transform: rotateY(135deg) translateZ(330px);
}

.item.e {
    transform: rotateY(180deg) translateZ(330px);
}

.item.f {
    transform: rotateY(225deg) translateZ(330px);
}

.item.g {
    transform: rotateY(270deg) translateZ(330px);
}

.item.h {
    transform: rotateY(315deg) translateZ(330px);
}

.switching {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.carousel .background {
    position: absolute;
    top: 5.5px;
    width: 92%;
    height: 179px;
    border-radius: 34% 70% 70% 30% / 35% 39% 64% 67%;
    background-position: 186px 7px;
    background-image: url(/wp-content/uploads/check-pattern.svg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel .repletion {
    position: absolute;
    bottom: -21px;
    font-size: 10px;
    opacity: 0.72;
}

.carousel .commentary {
    position: absolute;
    top: 2px;
    width: 96%;
    font-weight: 500;
    line-height: 1.63;
    text-align: center;
    text-shadow: 0 0 0 #042234;
}

.carousel .notepad span:not(.adj-margin) {
    padding-bottom: 1px;
    border-bottom: 1px dashed #ededed;
}

.fi-tr-galaxy-star.r {
    margin-left: 13.5px;
}

.fi-tr-galaxy-star.l {
    margin-right: 12px;
}

.d .fi-tr-galaxy-star.r {
    margin-left: 19.5px;
}

.d .fi-tr-galaxy-star.l {
    margin-right: 19.5px;
}

.e .fi-tr-galaxy-star.r {
    margin-left: 8px;
}

.e .fi-tr-galaxy-star.l {
    margin-right: 8px;
}

.carousel .notepad {
    position: absolute;
    bottom: 5px;
    width: 177px;
    height: 154px;
    padding: 23px 4.5px 0;
    border-radius: 5.5px;
    background: inherit;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12.3px;
    line-height: 1.73;
    letter-spacing: 0.65px;
    text-align: justify;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.carousel .mascot,
.carousel .background {
    /* ▼ 追加：ベクター画像をテクスチャ（平面画像）としてGPUに固定化 ▼ */
    transform: translateZ(0);
}

.item.a span.spacer {
    margin-left: 85px;
}

.item.b span.spacer {
    margin-left: 78px;
}

.item.c span.spacer {
    margin-left: 136px;
}

.item.d span.spacer {
    margin-left: 97px;
}

.item.e span.spacer {
    margin-left: 135px;
}

.item.f span.spacer {
    margin-left: 98px;
}

.item.g span.spacer,
.item.h span.spacer {
    margin-left: 74px;
}

.carousel .third-son,
.carousel .second-son {
    position: relative;
    display: flex;
    justify-content: center;
}

.carousel .third-son .front,
.carousel .third-son .rear {
    top: 34px;
    width: 80px;
    height: 83px;
    background-repeat: no-repeat;
}

.carousel .third-son .rear {
    transform: rotateY(180deg);
    background-image: url("/wp-content/uploads/mascot-third-son-back-view-2.svg");
}

.carousel .runny-nose {
    position: absolute;
    top: 43px;
    left: 27px;
    width: 12px;
    height: 24px;
    opacity: 0;
    background: url("/wp-content/uploads/snot.svg") no-repeat;
    transform-origin: center top;
}

.carousel .shake-the-tail {
    position: absolute;
    top: 67.8px;
    left: 33px;
    width: 8.5px;
    height: 6.5px;
    background: url("/wp-content/uploads/third-son-tail.svg") no-repeat;
}

.carousel .shadow-of-feet {
    position: absolute;
    bottom: 158px;
    width: 29%;
    height: 19px;
    background: radial-gradient(60% 22% at center center, rgb(110 110 110), rgb(0 0 0 / 0));
}

.carousel .second-son .hand.right,
.carousel .second-son .hand.left {
    top: 81px;
    width: 19.5px;
    height: 12px;
}

.second-son .hand.left.pen-light {
    background-image: url("/wp-content/uploads/pen-light-2.svg");
}

.second-son .hand.right.pen-light {
    background-image: url("/wp-content/uploads/pen-light.svg");
}

.second-son .hand.right {
    left: -31.6px;
    background-image: url("/wp-content/uploads/second-son-right-hand-3.svg");
    transform-origin: center right;
}

.second-son .hand.left {
    right: -31.6px;
    background-image: url("/wp-content/uploads/second-son-left-hand-2.svg");
    transform-origin: center left;
}

.hand.right.pen-light:after,
.hand.left.pen-light:after {
    position: absolute;
    top: -12.5px;
    width: 3px;
    height: 26px;
    content: "";
    border-radius: 10px;
    background: #97fff5;
    box-shadow: 0 -5px 7px 0.5px #d9fffb;
}

.hand.right.pen-light:after {
    left: -1px;
    transform: rotate(-20deg);
}

.hand.left.pen-light:after {
    right: 0;
    transform: rotate(20deg);
}

.second-son .torso {
    top: 75px;
    width: 36px;
    height: 50px;
    background-image: url("/wp-content/uploads/body-2.svg");
}

.carousel .second-son .face {
    top: 32.3px;
    width: 89px;
    height: 72px;
    background-image: url("/wp-content/uploads/face.svg");
}

.second-son .face.embarrassed {
    opacity: 0;
    background-image: url("/wp-content/uploads/embarrassed-face.svg");
}

.butterfly {
    position: absolute;
    width: 0;
    height: 20px;
    content: "";
    background: url("/wp-content/uploads/butterfly.svg") no-repeat;
    offset-path: path("m151.12,31.4c-16.63,0-19.34-13.08-36.09-14.9-15.06-1.64-22.97,4.62-42.79,1.4-15.15-2.46-18.51-13.46-30.37-16.43C26.1-2.47,17.35,7.14.11,3.32");
    transform: rotate(150deg) rotateY(0);
}

.butterfly.n1 {
    left: 19px;
    bottom: 250px;
    z-index: 8;
    width: 18px;
    animation-delay: 11.5s !important;
}

.butterfly.n2 {
    left: 19px;
    bottom: 226px;
    z-index: 8;
    width: 14px;
    animation-delay: 12.5s !important;
}

.carousel .eldest-son {
    width: 100px;
    height: 100px;
    margin-top: 24px;
    background-image: url("/wp-content/uploads/eldest-son-of-mascot-2.svg");
    transform-origin: bottom;
}

.carousel .pon-chan-the-raccoon-dog {
    width: 74px;
    height: 90px;
    background: url("/wp-content/uploads/pon-chan-the-raccoon-dog.svg") no-repeat;
}

.pon-chan-leaf-pants {
    position: absolute;
    right: -2%;
    bottom: 55.7%;
    z-index: 1;
    width: 22px;
    height: 22px;
    opacity: 0;
    background: url("/wp-content/uploads/leaf.svg") no-repeat;
}

.leaf-on-head {
    position: absolute;
    top: 0;
    left: 53.5%;
    z-index: -1;
    width: 26px;
    height: 18px;
    background: url("/wp-content/uploads/leaf-on-head.svg") no-repeat;
}

.pon-chan-container {
    display: flex;
    opacity: 0;
    transform: scale(0.3);
}

.animation-2 .item.d .anime-container {
    z-index: 1;
    animation: fall 21s ease-in-out forwards, fall 21s 38s ease-in-out forwards;
}

.animation-2 .pon-chan-container {
    animation: stalking 38s ease-in-out, stalking 38s 38s ease-in-out;
}

.animation-2 .leaf-on-head {
    animation: estrus-period 38s, estrus-period 38s 38s;
}

.animation-2 .pon-chan-leaf-pants {
    animation: leaves-that-have-fallen-off 11.3s 31.2s, leaves-that-have-fallen-off 11.3s 69.2s;
}

.carousel .third-daughter {
    width: 80px;
    height: 93px;
    margin-top: 31px;
    background-image: url("/wp-content/uploads/site-mascot-third-daughter.svg");
}

.carousel .second-daughter {
    width: 90px;
    height: 112px;
    margin-top: 14px;
    background-image: url("/wp-content/uploads/second-daughter-of-the-site-mascot.svg");
}

.carousel .eldest-daughter {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: 24.3px;
    opacity: 0;
    transform-origin: bottom;
}

.mascot.eldest-daughter.n6 {
    opacity: 1;
    background-image: url("/wp-content/uploads/eldest-daughter-of-mascot.svg");
}

.mascot.eldest-daughter.n5 {
    background-image: url("/wp-content/uploads/eldest-daughter-of-mascot-6.svg");
}

.mascot.eldest-daughter.n4 {
    background-image: url("/wp-content/uploads/eldest-daughter-of-mascot-5.svg");
}

.mascot.eldest-daughter.n3 {
    background-image: url("/wp-content/uploads/eldest-daughter-of-mascot-4.svg");
}

.mascot.eldest-daughter.n2 {
    background-image: url("/wp-content/uploads/eldest-daughter-of-mascot-3.svg");
}

.mascot.eldest-daughter.n1 {
    background-image: url("/wp-content/uploads/eldest-daughter-of-mascot-2.svg");
}

.carousel .ugly-pegasus {
    width: 60px;
    height: 66px;
    margin-top: 58px;
    background-image: url("/wp-content/uploads/ugly-pegasus.svg");
}

.byline .cat-name,
.footer a,
#footer-top a {
    color: var(--c-text)
}

.fi-tr-graduation-cap::before {
    position: relative;
    padding-right: .15em
}

.footer-background {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-top: #bbe6ff solid 16px;
    background: #93d8ff;
}

.contactbutton a:hover::after {
    opacity: 1
}

.article a:not(a.anchor) {
    font-weight: 400
}

.animation .ring {
    animation: ring-anim 2s 2.1s 6;
}

@media (min-width: 768px) {

    .subnav form input:hover,
    .subnav .contactbutton a:hover {
        background: var(--c-white);
        color: var(--c-text);
        transition: var(--tr-bg-fast)
    }

    .modal-box {
        width: 50%;
    }

    .stone.n2 {
        left: calc(50vw - 352px);
    }

    .nav li ul.sub-menu li {
        position: relative;
    }

    .nav li ul.sub-menu li li a {
        border-top: 0.5px #00000017 solid;
        border-bottom: 0;
        max-height: 4em;
    }

    .nav li ul.sub-menu li li:first-child a {
        border-top: 0;
    }

    .nav li ul.sub-menu li:last-child a {
        border-bottom: 0;
    }



    /* 孫カテの初期設定 */
    .nav li ul.sub-menu li ul.sub-menu {
        left: 99.5%;
        top: 0;
        /* 👇 修正：親と同じ閉じる時の設定 */
        transition: opacity 0.15s ease-in-out, visibility 0s linear 0.15s;
    }

    .nav li ul.sub-menu:hover>li ul.sub-menu {
        transition: none;
    }

    .nav li ul.sub-menu li a:hover,
    .nav li ul.sub-menu li:hover>a {
        color: var(--c-menu-text);
    }

    .nav>li>a:after {
        position: absolute;
        top: 100%;
        left: 7.5%;
        width: 70%;
        content: "";
        opacity: 0;
        pointer-events: none;
        filter: blur(7px);
        transform: scale(1) translate(0, 120px) rotate(110deg);
        transform-origin: right;
        transition: transform 1.6s 1s cubic-bezier(0.84, 0, 0.3, 1), filter 1.6s 1s cubic-bezier(0.84, 0, 0.3, 1), opacity 1.6s 1s cubic-bezier(0.84, 0, 0.3, 1);
        border: 0.2em solid #eef4ff;
        border-radius: 20px;
        box-shadow:
            0 0 1em 0.1em rgb(204 223 255),
            0 0 4em 0.4em rgb(123 169 255 / 78%),
            inset 0 0 0.75em 0.1em rgb(204 223 255);
    }

    .nav>li>a:hover::after {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        transition: transform 0.3s 0.2s, filter 0.3s 0.2s, opacity 0.3s 0.2s;
    }

    /* 子カテ（ホバー時） */
    .nav li:hover>ul.sub-menu {
        opacity: 1;
        /* 👇 修正：開く時は0.15s遅延させてからフェードイン */
        transition: opacity 0.15s ease-in-out 0.15s, visibility 0s linear 0.15s;
        visibility: visible;
    }

    .nav li ul.sub-menu li a .fi-tr-angle-double-small-down {
        position: absolute;
        right: 4.3%;
        font-size: 1.2em;
    }

    /* 🚀 新規追加：死の隙間を埋める見えない橋 */
    .nav>li::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background: transparent;
        z-index: 10;
    }

    .nav>li:hover::before {
        /* 司令官の隙間(最大24px)を完全にカバーする40pxの橋を下ろす！ */
        height: 40px;
    }

    .nav li ul.sub-menu li a .fi-tr-angle-double-small-down::before {
        content: "\f376";
    }
}

@media (min-width: 880px) {
    .read-more {
        font-size: 25.3px;
    }

    label {
        cursor: pointer;
    }
}

@media (min-width: 1270px) {
    .modal-box {
        width: 60%;
    }

    #scrollfix {
        position: -webkit-sticky;
        position: sticky;
        top: 11.5px;
        z-index: 10;
        width: 100%;
        max-height: calc(100vh - 100px);
    }
}

@media (max-width: 767px) {
    .mean-bar * {
        box-sizing: content-box
    }

    .mean-nav {
        position: relative;
        z-index: 4;
        margin-top: var(--mean-nav-mt);
        contain: layout;
        box-shadow: 0px -6px 16px -12.5px #707070;
    }

    .mean-nav ul:not(ul.sub-menu) {
        margin-bottom: 83px;
        background-color: var(--c-menu-bg);
    }

    .mean-nav ul li a:hover {
        color: var(--c-menu-text);
    }

    .mean-nav span.category-en {
        top: 8px;
        position: absolute;
        font-size: 10px;
        text-transform: uppercase;
        opacity: .8;
        font-weight: 300;
    }

    .modal-box img {
        aspect-ratio: 1600 / 990;
    }

    .modal-text {
        max-height: 35vw;
    }

    .entry-content p a {
        transition: color 0.05s;
    }

    .footer-cloud.n1 {
        left: 3%;
        width: 150px;
    }

    .footer-cloud.n2 {
        width: 190px;
    }

    .yasinoki.n1,
    .yasinoki.n2 {
        width: 350px;
        height: 578px;
        margin-top: -10px;
    }

    .yasinoki.n1 {
        left: calc(0.5vw - 140px);
    }

    .yasinoki.n2 {
        right: calc(0.5vw - 140px);
    }

    .yasinoki.n3,
    .yasinoki.n4 {
        width: 200px;
        height: 330px;
        margin-top: 230px;
    }

    .yasinoki.n3 {
        left: calc(8vw - 81px);
    }

    .yasinoki.n4 {
        right: calc(8vw - 81px);
    }

    .stone.n1 {
        left: 61%;
        margin-top: 495px;
    }

    .crab.n1 {
        left: calc(50vw + 135px);
        margin-top: 500px;
    }

    .crab.n2 {
        left: calc(26vw - 116px);
    }

    .nationality-gender-and-name {
        margin: 1.2em 0 3.23em 48%;
        font-size: 25px;
    }

    .mean-nav ul li,
    .mean-nav ul li a {
        position: relative;
        box-shadow: none !important;
    }

    .mean-nav ul li a {
        display: flex;
        align-items: end;
        padding: 0 30% 8px 1em;
        height: 62px;
        line-height: 1.4;
        color: var(--c-white);
        border-top: 0.5px solid #00000040;
        font-size: 0.9em;
        font-weight: 400;
    }

    .mean-nav>ul>li:first-child>a {
        border-top: none
    }

    nav.mean-nav i {
        position: absolute;
        left: 83px;
        bottom: 3px;
        font-size: 29px;
    }

    .mean-nav ul li li a {
        padding-left: 45px;
        padding-bottom: 0;
        height: 62px;
        align-items: center;
        color: rgb(216 219 225);
    }

    .mean-nav ul li li li a {
        padding-left: 68px;
    }

    .mean-nav .fi-tr-angle-double-small-down:before {
        position: absolute;
        left: calc(11vw + 90px);
        opacity: 0.1;
        font-size: 18px;
        transition: opacity 0.2s;
        bottom: 19px;
        content: "\f377";
    }

    .sub-menu .fi-tr-angle-double-small-down:before {
        bottom: 15.5px;
    }

    .mean-nav li:has(> a.mean-clicked)>a .fi-tr-angle-double-small-down:before {
        opacity: 1;
    }

    .meanmenu-reveal.animate.meanclose::after {
        content: "CLOSE";
    }

    .meanmenu-reveal.animate span:nth-of-type(1) {
        --ty: 10px;
        --rot: 45deg;
        --w-act: clamp(16%, calc(26% + (16 - 26) * ((100vw - 480px) / (767 - 480))), 26%);
        animation: menu-close 0.8s forwards;
    }

    .meanmenu-reveal.animate.meanclose span:nth-of-type(1) {
        animation: menu-open 0.8s forwards;
    }

    .meanmenu-reveal.animate span:nth-of-type(2) {
        animation: bar-show 0.8s forwards;
    }

    .meanmenu-reveal.animate.meanclose span:nth-of-type(2) {
        animation: bar-hide 0.8s forwards;
    }

    .meanmenu-reveal.animate span:nth-of-type(3) {
        --ty: -13.5px;
        --rot: -45deg;
        --w-act: clamp(16%, calc(26% + (16 - 26) * ((100vw - 480px) / (767 - 480))), 26%);
        animation: menu-close 0.8s forwards;
    }

    .meanmenu-reveal.animate.meanclose span:nth-of-type(3) {
        animation: menu-open 0.8s forwards;
    }

    .mean-nav i::before {
        color: var(--c-menu-text);
    }

    .subnav .contactbutton a:hover {
        opacity: 0.55;
    }

    /* 1. 開くボタン本体（最初から最大幅にし、左側をクリップして隠す） */
    ul li a.mean-expand {
        position: absolute;
        top: 0;
        right: 0;
        width: 19.5%;
        height: 70px;
        padding: 0 !important;
        transition: background-color 0.2s ease-out;
        background-color: var(--c-bg-main);
    }

    a.mean-expand::before,
    a.mean-expand::after {
        position: absolute;
        top: 50%;
        left: 51.5%;
        width: 14px;
        height: 2px;
        content: "";
        background-color: #1a3452;
        border-radius: 4px;
        translate: -50% -50%;
        transition: rotate 0.3s ease-in-out;
    }

    ul li a.mean-expand.mean-clicked::before,
    ul li a.mean-expand.mean-clicked::after {
        background-color: #042234;
    }

    ul li:has(> a.mean-expand.mean-clicked)>a:not(.mean-expand) {
        color: var(--c-menu-text);
        transition: color 0.2s;
    }

    ul li a.mean-expand::after {
        rotate: 90deg;
    }

    ul li a.mean-expand.mean-clicked::after {
        rotate: 180deg;
    }

    /* 3. クリック時（マスクを解除して全開にする） */
    ul li a.mean-expand.mean-clicked {
        background-color: var(--c-menu-text);
    }
}

@media (max-width: 480px) {
    .meanmenu-reveal.animate span:nth-of-type(3) {
        --ty: -10px;
    }

    .modal-box {
        padding: 0 0 0.8em;
    }

    .modal-text {
        max-height: 57vw;
        margin-top: 0.8em;
        padding: 0 0.8em;
    }

    .modal-box.text-only,
    .text-only .modal-text,
    .modal-box.gallery,
    .modal-box.gallery-s {
        padding: 0.8em;
    }

    .modal-box figure {
        margin: 0.8em 0.8em 0;
    }

    .modal-box.gallery-s .modal-text {
        margin: 0.8em -0.8em 0;
    }

    .modal-box.gallery .modal-text,
    .gallery-text {
        margin: 0.8em;
        padding: 0.7em;
    }
}







/* 真ん中の棒：表示・非表示の切り替え */
@keyframes bar-hide {

    0%,
    49.8% {
        opacity: 1;
    }

    49.9%,
    100% {
        opacity: 0;
    }
}

@keyframes bar-show {

    0%,
    77% {
        opacity: 0;
    }

    78%,
    100% {
        opacity: 1;
    }
}

@keyframes menu-open {
    0% {
        transform: translate(0) rotate(0);
        width: 55%;
    }

    50% {
        transform: translateY(var(--ty)) rotate(0);
        width: 55%;
    }

    80% {
        transform: translateY(var(--ty)) rotate(0);
        width: var(--w-act);
    }

    100% {
        transform: translateY(var(--ty)) rotate(var(--rot));
        width: var(--w-act);
    }
}

@keyframes menu-close {
    0% {
        transform: translateY(var(--ty)) rotate(var(--rot));
        width: var(--w-act);
    }

    30% {
        transform: translateY(var(--ty)) rotate(0);
        width: var(--w-act);
    }

    80% {
        transform: translateY(var(--ty)) rotate(0);
        width: 55%;
    }

    100% {
        transform: translate(0) rotate(0);
        width: 55%;
    }
}

/* --- 2. キーフレーム内で var() を使って呼び出す --- */
@keyframes pegasus-takeoff {
    0% {
        /* 開始位置 */
        transform: translateY(0) translateZ(0) scale(1);
        animation-timing-function: ease-in-out;
    }

    14.8%,
    18% {
        /* 溜め：最下点に到達し、少し潰れる */
        transform: translateY(0) translateZ(0) scale(1.12, 0.86);
        animation-timing-function: ease-in;
    }

    22.5% {
        transform: translateY(0) translateZ(0) scale(0.97, 1.03);
    }

    100% {
        /* 射出：画面外（上空）へ突き抜ける */
        transform: translateY(-125vh) translateZ(0) scale(1);
    }
}

@keyframes header-second-son-right-hand {

    0%,
    11.5%,
    30%,
    34.5%,
    40%,
    44.1%,
    48%,
    52%,
    61% {
        /* 🚀 2Dのrotateの前に translate3d(0,0,0) を置いてGPUレイヤーを強制！ */
        transform: translate3d(0, 0, 0) rotate(-20deg);
    }

    1.25%,
    10%,
    31.25%,
    33%,
    41%,
    43%,
    49%,
    51%,
    53%,
    60% {
        transform: translate3d(0, 0, 0) rotate(14deg);
    }
}

@keyframes header-second-son-face {

    43.3%,
    52.3% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    44.3%,
    46.3%,
    48.3%,
    50.3% {
        transform: translate3d(0, 0, 0) rotate(2deg);
    }

    45.3%,
    47.3%,
    49.3%,
    51.3% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }
}

@keyframes header-second-son-smile-face {
    43.3% {
        transform: translate3d(0, 0, 0) rotate(0);
        opacity: 0;
    }

    43.4%,
    60% {
        opacity: 1;
    }

    44.3%,
    46.3%,
    48.3%,
    50.3% {
        transform: translate3d(0, 0, 0) rotate(2deg);
    }

    45.3%,
    47.3%,
    49.3%,
    51.3% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    52.3% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    60.1% {
        opacity: 0;
    }
}

@keyframes header-second-son-left-hand {

    19.1%,
    31.6%,
    37.1%,
    41.5%,
    44.1%,
    48%,
    52%,
    61% {
        /* 🚀 translateを translate3d に進化させ、Z軸(0)を追加！ */
        transform: translate3d(-5%, -22%, 0) rotate(76deg);
    }

    20.35%,
    30.35%,
    38.35%,
    40.35%,
    45.1%,
    47%,
    53%,
    60% {
        transform: translate3d(-3.5%, -3%, 0) rotate(24deg);
    }
}

@keyframes header-third-son {

    3.7%,
    6.7%,
    20.1%,
    23.1%,
    31%,
    33.5%,
    38%,
    40.5%,
    45%,
    48%,
    51%,
    54% {
        /* X:0, Y:0, Z:0 / Scale X:1, Y:1, Z:1 */
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    4.7%,
    21.1%,
    31.53%,
    38.53%,
    46%,
    49%,
    52% {
        transform: translate3d(4.8%, 4.8%, 0) scale3d(1.1, 0.9, 1);
    }

    5.7%,
    22.1%,
    32.5%,
    39.5%,
    47%,
    50%,
    53% {
        transform: translate3d(0, -10.5%, 0) scale3d(1, 1, 1);
    }
}

@keyframes header-third-son-right-hand {

    4%,
    7.2%,
    20.4%,
    23.6%,
    31.3%,
    33.8%,
    38.3%,
    40.8%,
    45%,
    48%,
    51%,
    54%,
    66.3%,
    99% {
        /* rotate はそのまま（内部的には rotateZ として処理され、すでにGPU対象） */
        transform: translate3d(-23%, -18%, 0) rotate(-10deg);
    }

    4.3%,
    6.3%,
    20.7%,
    22.7%,
    31.6%,
    33.1%,
    38.6%,
    40.1% {
        transform: translate3d(-38%, -36%, 0) rotate(-25deg);
    }

    46.5%,
    49.5%,
    52.5% {
        transform: translate3d(0, 5%, 0) rotate(7deg);
    }

    67%,
    69.1%,
    71.2%,
    77%,
    79.1%,
    81.2%,
    87%,
    89.1%,
    91.2%,
    98.3% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    67.7%,
    69.8%,
    77.7%,
    79.8%,
    87.7%,
    89.8% {
        transform: translate3d(4.8%, 4.8%, 0) scale3d(1.1, 0.9, 1);
    }

    68.4%,
    70.5%,
    78.4%,
    80.5%,
    88.4%,
    90.5% {
        transform: translate3d(0, -10.5%, 0) scale3d(1, 1, 1);
    }
}

@keyframes header-third-son-left-hand {

    0%,
    4% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    4.5% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    5.5% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    7.5%,
    20.5% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    21% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    22% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    24%,
    30.7% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    31.2% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    32.2% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    34.2%,
    38% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    38.5% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    39.5% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    41.5%,
    45% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    45.5% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    46.5% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    48.5% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    49% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    49.8% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    51.6% {
        transform: translate3d(0, 0, 0) rotate(16deg);
    }

    52.1% {
        transform: translate3d(0, 0, 0) rotate(32deg);
        animation-timing-function: ease-in-out;
    }

    52.9% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    54.7%,
    63% {
        transform: translate3d(0, 0, 0) rotate(16deg) scale3d(1, 1, 1);
        animation-timing-function: ease-in-out;
    }

    64% {
        transform: translate3d(0, 20%, 0) rotate(-12deg) scale3d(0.9, 1.1, 1);
    }

    65%,
    98% {
        transform: translate3d(0, 20%, 0) rotate(-12deg) scale3d(1, 1, 1);
    }
}

@keyframes site-title-anime {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0);
    }
}

@keyframes fly-around-seagull {

    0%,
    50%,
    100% {
        offset-distance: 0%;
    }

    9.3%,
    10.8%,
    12.5% {
        /* Y軸の0を3D化、ScaleもZ軸(1)を追加して3D化！ */
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    9.8%,
    11.3% {
        /* Yを潰す羽ばたき */
        transform: translate3d(0, 0, 0) scale3d(1, 0.85, 1);
    }

    10.3%,
    11.8% {
        /* Xを細くしつつ下に3pxズレる動き */
        transform: translate3d(0, 3px, 0) scale3d(0.15, 1, 1);
    }

    25%,
    75% {
        offset-distance: 100%;
    }
}

@keyframes home-position {
    100% {
        transform: translate(0) scale(1);
    }
}

@keyframes bounce-sun {
    0% {
        transform: translate3d(0, -43%, 0) rotateZ(0deg);
        animation-timing-function: cubic-bezier(0.83, 0.1, 0.58, 1);
    }

    43% {
        transform: translate3d(0, 5%, 0) rotateZ(90deg);
    }

    66.75% {
        transform: translate3d(0, -2%, 0) rotateZ(90deg);
    }

    85.75% {
        transform: translate3d(0, 1%, 0) rotateZ(90deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotateZ(90deg);
    }
}

@keyframes jiggle {

    38%,
    52% {
        transform: scale(1, 1);
    }

    40% {
        transform: scale(1.1, 0.9);
    }

    46% {
        transform: scale(0.9, 1.1) translate(0, -11%);
    }

    49% {
        transform: scale(1, 1) translate(0, -6%);
    }
}

@keyframes ring-anim {

    0%,
    4%,
    8%,
    12% {
        transform: rotate(-18deg);
    }

    2%,
    6%,
    10%,
    14% {
        transform: rotate(18deg);
    }

    16%,
    100% {
        transform: rotate(0);
    }
}

@keyframes pointer-events-on {

    0%,
    100% {
        pointer-events: auto;
    }
}

@keyframes fade-up-jump {
    0% {
        transform: translateY(33px);
        opacity: 0;
    }

    90%,
    100% {
        opacity: 1;
    }
}

@keyframes crab {

    0%,
    30% {
        offset-distance: 100%;
    }

    40%,
    60% {
        offset-distance: 50%;
    }

    70%,
    100% {
        offset-distance: 0;
    }
}

@keyframes fade-in-carousel-a {

    0%,
    43% {
        opacity: 0;
        transform: perspective(680px) translate(0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-a {

    0%,
    43% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-carousel-bh {

    0%,
    39% {
        opacity: 0;
        transform: perspective(680px) translate(0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-bh {

    0%,
    39% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-carousel-cg {

    0%,
    34% {
        opacity: 0;
        transform: perspective(680px) translate(0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-cg {

    0%,
    34% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-carousel-df {

    0%,
    25% {
        opacity: 0;
        transform: perspective(680px) translate(0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-df {

    0%,
    25% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-carousel-e {

    0%,
    30% {
        opacity: 0;
        transform: perspective(680px) translate(0);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-e {

    0%,
    15% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes overreaching {

    0.6%,
    99.2% {
        transform: translateY(3.5px) scale(0.85, 1.15);
        animation-timing-function: cubic-bezier(0.59, 0.03, 1, 1);
    }
}

@keyframes rotate-while-floating {

    0%,
    100% {
        transform: rotateY(0);
    }

    50% {
        transform: translateY(-47px) rotateY(180deg);
    }
}

@keyframes rotate-while-floating-2 {

    0%,
    100% {
        transform: rotateY(180deg);
    }

    50% {
        transform: translateY(-47px) rotateY(0);
    }
}

@keyframes drooping-swaying-falling {
    0% {
        transform: translateY(-35px);
    }

    0.1% {
        opacity: 0;
    }

    0.7% {
        transform: translate(0);
    }

    1.7% {
        transform: rotateZ(0);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    2.3%,
    3.9%,
    5.5%,
    7.3% {
        transform: rotateZ(15deg);
    }

    3.1%,
    4.7%,
    6.3% {
        transform: rotateZ(-15deg);
    }

    8.5%,
    10% {
        transform: translate(0) scale(1) rotateZ(0);
        animation-timing-function: cubic-bezier(1, 0, 1, 1);
    }

    12.3% {
        opacity: 1;
    }

    14%,
    100% {
        transform: translateY(190px) scale(0.8, 1.7);
        opacity: 0;
    }
}

@keyframes shake-the-tail {

    25%,
    47.5%,
    48.5%,
    49.5%,
    50.5%,
    51.5%,
    52.5% {
        transform: translateX(0) rotateY(0);
    }

    47%,
    48%,
    49%,
    50%,
    51%,
    52%,
    53%,
    75% {
        transform: translateX(4.8px) rotateY(180deg);
    }
}

@keyframes big-small {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.3);
    }
}

@keyframes pen-light-r {

    0%,
    0.85% {
        transform: translate(0) rotate(-20deg);
    }

    1.8%,
    11.1% {
        transform: translate(-8px, 6px) rotate(265deg);
    }

    12%,
    12.3%,
    17.8% {
        transform: translate(0) rotate(-20deg);
    }

    19.1%,
    21.3% {
        transform: translate(-8px, 6px) rotate(265deg);
        animation-timing-function: ease-in-out;
    }

    21.8%,
    22% {
        transform: translate(0) rotate(-230deg);
    }

    22.5%,
    25.5%,
    52.1%,
    64% {
        transform: translate(0) rotate(-20deg);
        animation-timing-function: cubic-bezier(0.26, 0.54, 0.68, 1);
    }

    26.97%,
    65.6% {
        transform: translate(-13px, -32px) rotate(-1102deg);
        animation-timing-function: cubic-bezier(0.77, 0.1, 1, 1);
    }

    28.6%,
    51.4% {
        transform: translate(0) rotate(0);
    }

    67.1%,
    69% {
        transform: translate(0) rotate(-20deg);
    }

    70%,
    71.8% {
        transform: translate(-8px, 7px) rotate(-96deg);
    }

    72.3%,
    100% {
        transform: translate(0) rotate(-380deg);
    }
}

@keyframes pen-light-l {

    0%,
    0.85% {
        transform: translate(0) rotate(20deg);
    }

    1.8%,
    11.1% {
        transform: translate(-3px, -5px) rotate(-10deg);
    }

    12%,
    17.8%,
    72.8%,
    100% {
        transform: translate(0) rotate(20deg);
    }

    19.1%,
    19.4% {
        transform: translate(-3px, -3px) rotate(-17deg);
    }

    20.7%,
    22.6% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    23.1%,
    23.3% {
        transform: translate(0) rotate(230deg);
    }

    23.8%,
    25.5%,
    48.9%,
    67.1% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: cubic-bezier(0.26, 0.54, 0.68, 1);
    }

    26.97% {
        transform: translate(13px, -32px) rotate(1102deg);
        animation-timing-function: cubic-bezier(0.77, 0.1, 1, 1);
    }

    28.6%,
    46.6% {
        transform: translate(0) rotate(0);
    }

    47.8%,
    48.06%,
    48.32% {
        transform: translate(4px, -0.5px) rotate(45deg);
    }

    47.93%,
    48.19% {
        transform: translate(-0.5px, -2.5px) rotate(5deg);
    }

    67.9%,
    69% {
        transform: translate(0) rotate(-340deg);
    }

    70%,
    72.2% {
        transform: translate(8px, 7px) rotate(-263deg);
    }
}

@keyframes wave-hands-l {
    0% {
        transform: rotate(0);
        animation-timing-function: ease-in-out;
    }

    0.7%,
    0.85% {
        transform: rotate(2deg);
        animation-timing-function: ease-in-out;
    }

    1.8%,
    11.1% {
        transform: rotate(-29deg);
        animation-timing-function: cubic-bezier(0.52, 0.11, 0.58, 1);
    }

    12%,
    12.3%,
    13.9%,
    22%,
    23.6%,
    25.2%,
    32.6%,
    33.4%,
    35%,
    38.1%,
    40.4%,
    41.2%,
    43.5%,
    44.3%,
    46.6%,
    48.9%,
    51.4%,
    61.4% {
        transform: rotate(0);
    }

    12.7%,
    13.5%,
    22.4%,
    23.2% {
        transform: rotate(10deg);
    }

    13.1%,
    22.8% {
        transform: rotate(-5deg);
    }

    16% {
        transform: rotate(-13deg);
    }

    17.8% {
        transform: rotate(3deg);
    }

    19.1%,
    19.4% {
        transform: rotate(-22deg);
    }

    20.7%,
    21.3% {
        transform: rotate(6deg);
        animation-timing-function: ease-in-out;
    }

    25.8%,
    28.7% {
        transform: rotate(-24deg);
    }

    30.7%,
    31.8%,
    52.1%,
    53.5%,
    54.9%,
    56.3%,
    57.7%,
    59.1%,
    60.5% {
        transform: rotate(4deg);
    }

    32.2%,
    33% {
        transform: rotate(-12deg);
    }

    36%,
    39.1%,
    42.2%,
    45.3% {
        transform: rotate(-4deg);
    }

    36.5%,
    39.6%,
    42.7%,
    45.8% {
        transform: rotate(-25deg);
    }

    47.8%,
    48.3% {
        transform: rotate(-26deg);
        animation-timing-function: ease-in-out;
    }

    52.8%,
    54.2%,
    55.6%,
    57%,
    58.4%,
    59.8% {
        transform: rotate(-22deg);
    }
}

@keyframes wave-hands-r {
    0% {
        transform: rotate(0);
        animation-timing-function: ease-in-out;
    }

    0.7%,
    0.85% {
        transform: rotate(-2deg);
        animation-timing-function: ease-in-out;
    }

    1.8%,
    11.1% {
        transform: rotate(-7deg);
        animation-timing-function: cubic-bezier(0.52, 0.11, 0.58, 1);
    }

    12%,
    12.3%,
    13.9%,
    22%,
    23.6%,
    25.2%,
    34.2%,
    35%,
    38.1%,
    40.4%,
    41.2%,
    43.5%,
    44.3%,
    46.6%,
    51.4%,
    61.4%,
    63.7%,
    67.2%,
    100% {
        transform: rotate(0);
    }

    12.7%,
    13.5%,
    22.4%,
    23.2% {
        transform: rotate(-10deg);
    }

    13.1%,
    22.8% {
        transform: rotate(5deg);
    }

    16% {
        transform: rotate(-3deg);
    }

    17.8% {
        transform: rotate(13deg);
    }

    19.1%,
    19.4% {
        transform: rotate(-6deg);
    }

    20.7%,
    21.3% {
        transform: rotate(17deg);
        animation-timing-function: ease-in-out;
    }

    25.8%,
    28.7% {
        transform: rotate(24deg);
    }

    30.7%,
    33.4%,
    52.8%,
    54.2%,
    55.6%,
    57%,
    58.4%,
    59.8% {
        transform: rotate(-4deg);
    }

    33.8%,
    34.6% {
        transform: rotate(12deg);
    }

    36%,
    39.1%,
    42.2%,
    45.3% {
        transform: rotate(15deg);
    }

    36.5%,
    39.6%,
    42.7%,
    45.8% {
        transform: rotate(25deg);
    }

    52.1%,
    53.5%,
    54.9%,
    56.3%,
    57.7%,
    59.1%,
    60.5% {
        transform: rotate(22deg);
    }

    64.3%,
    66.6% {
        transform: rotate(25deg);
        animation-timing-function: ease-in-out;
    }
}

@keyframes face-second-son {

    7.1%,
    8.3%,
    39%,
    44%,
    47%,
    51.4%,
    61.4%,
    100% {
        opacity: 1;
    }

    7.11%,
    8.29%,
    39.01%,
    43.99%,
    51.41%,
    61.39% {
        opacity: 0;
    }

    36%,
    47%,
    51.4% {
        transform: rotate(0) skew(0);
    }

    37%,
    39%,
    45% {
        transform: rotate3d(1, 1, 1, 5deg) skew(1deg, 1deg);
    }

    38%,
    44%,
    46% {
        transform: rotate3d(1, 1, 1, -5deg) skew(-1deg, -1deg);
    }
}

@keyframes face-shake-second-son {

    0%,
    7.09%,
    8.31%,
    38.99%,
    44.01%,
    51.39%,
    61.41%,
    100% {
        opacity: 0;
    }

    7.1%,
    8.3%,
    39%,
    44%,
    51.4%,
    61.4% {
        opacity: 1;
    }

    7.1%,
    8.3%,
    51.2%,
    51.4%,
    61.4% {
        transform: rotate(0) skew(0);
    }

    7.5% {
        transform: rotate(-7deg);
    }

    7.9% {
        transform: rotate(7deg);
    }

    39%,
    41%,
    43% {
        transform: rotate3d(1, 1, 1, 5deg) skew(1deg, 1deg);
    }

    40%,
    42%,
    44% {
        transform: rotate3d(1, 1, 1, -5deg) skew(-1deg, -1deg);
    }

    52.1%,
    53.5%,
    54.9%,
    56.3%,
    57.7%,
    59.1%,
    60.5% {
        transform: rotate3d(1, 1, 1, -10deg) skew(-1.5deg, -1.5deg);
    }

    52.8%,
    54.2%,
    55.6%,
    57%,
    58.4%,
    59.8% {
        transform: rotate3d(1, 1, 1, 10deg) skew(1.5deg, 1.5deg);
    }
}

@keyframes happy-dance {
    0% {
        transform: translate(0) rotate(0) scale(1);
        animation-timing-function: ease-in-out;
    }

    0.7%,
    0.85% {
        transform: translate(0) rotate(0) scale(1.02, 0.93);
        animation-timing-function: ease-in-out;
    }

    1.8%,
    11.1% {
        transform: translate(-4.2px, -3px) rotate(18deg) scale(0.98, 1.05);
        animation-timing-function: cubic-bezier(0.52, 0.11, 0.58, 1);
    }

    12%,
    12.3%,
    72.8% {
        transform: translate(0) rotate(0) scale(1);
        animation-timing-function: linear;
    }

    12.7%,
    13.5%,
    47.8%,
    48.6%,
    73.2%,
    74% {
        transform: translateY(-1.5px);
        animation-timing-function: linear;
    }

    13.1%,
    48.2%,
    73.6% {
        transform: translate(0);
        animation-timing-function: linear;
    }

    13.9% {
        transform: translate(0) rotate(0) skew(0);
    }

    16% {
        transform: translate(0, 0.5px) rotate(3.5deg) skew(-1deg, -1deg);
    }

    17.8% {
        transform: translate(0, 0.5px) rotate(-3.5deg) skew(1deg, 1deg);
    }

    19.1%,
    19.4% {
        transform: translate(28px, 0.5px) rotate(4deg) skew(-1deg, -1deg);
    }

    20.6%,
    21.15% {
        transform: translate(-50.5px, 0.5px) rotate(-4deg) skew(1deg, 1deg);
        animation-timing-function: ease-in-out;
    }

    22% {
        transform: translate(-50.5px, 0.5px) rotate(0) skew(0);
        animation-timing-function: linear;
    }

    22.4%,
    23.2% {
        transform: translate(-50.5px, -1.5px);
        animation-timing-function: linear;
    }

    22.8% {
        transform: translate(-50.5px, 0);
        animation-timing-function: linear;
    }

    23.6%,
    29% {
        transform: translate(-50.5px, 0) rotate(0);
    }

    31%,
    31.8% {
        transform: translate(0) rotateY(360deg);
        animation-timing-function: linear;
    }

    31.4%,
    32.2% {
        transform: translateY(-1.5px) rotateY(360deg);
        animation-timing-function: linear;
    }

    32.6% {
        transform: translate(0) rotateY(360deg);
    }

    35% {
        transform: translate(0) rotateY(360deg);
        animation-timing-function: ease-in-out;
    }

    36%,
    42.2% {
        transform: translate(-2px, -2px) rotate(12deg);
    }

    36.5%,
    42.7% {
        transform: translate(-2px, -7px) rotate(12deg);
        animation-timing-function: ease-in;
    }

    37.3%,
    43.5% {
        transform: translate(-2px, -2px) rotate(12deg);
        animation-timing-function: ease-out;
    }

    38.1%,
    44.3% {
        transform: translate(0) rotate(0);
        animation-timing-function: ease-in-out;
    }

    39.1%,
    45.3% {
        transform: translate(2px, -2px) rotate(-12deg);
    }

    39.6%,
    45.8% {
        transform: translate(2px, -7px) rotate(-12deg);
        animation-timing-function: ease-in;
    }

    40.4%,
    46.6% {
        transform: translate(2px, -2px) rotate(-12deg);
        animation-timing-function: ease-out;
    }

    41.2% {
        transform: translate(0) rotate(0);
        animation-timing-function: ease-out;
    }

    47.4% {
        transform: translate(0) rotate(0);
        animation-timing-function: linear;
    }

    49% {
        transform: translate(0) rotate(0) scale(1);
    }

    51.2%,
    61.5% {
        transform: translateY(17px) rotateY(360deg) scale(1.1);
        animation-timing-function: ease-in;
    }

    62% {
        transform: translateY(7px) rotateY(360deg) scale(1.1);
        animation-timing-function: ease-in-out;
    }

    62.61%,
    70.6% {
        transform: translateY(17px) rotateY(360deg) scale(1.1);
        animation-timing-function: cubic-bezier(0.11, 0.4, 0.2, 1);
    }

    74.4% {
        transform: translate(0);
    }
}

@keyframes fly-around {
    0% {
        offset-distance: 0%;
        transform: rotate(150deg);
    }

    10%,
    11.1%,
    12.2% {
        transform: scale(1) rotate(150deg);
    }

    10.2%,
    11.3%,
    12.4% {
        transform: scale(1, 0.85) rotate(150deg);
    }

    10.8%,
    11.9%,
    13% {
        transform: scale(0.15, 1) translateY(1px) rotate(150deg);
    }

    11%,
    12.1%,
    13.2% {
        transform: scale(1) translateY(0) rotate(150deg);
    }

    49% {
        transform: rotate(150deg) rotateY(0);
    }

    50% {
        offset-distance: 100%;
    }

    51% {
        transform: rotate(187deg) rotateY(180deg);
    }

    60%,
    61.1%,
    62.2% {
        transform: scale(1) rotate(187deg) rotateY(180deg);
    }

    60.2%,
    61.3%,
    62.4% {
        transform: scale(1, 0.85) rotate(187deg) rotateY(180deg);
    }

    60.8%,
    61.9%,
    63% {
        transform: scale(0.15, 1) translateY(1px) rotate(187deg) rotateY(180deg);
    }

    61%,
    62.1%,
    63.2% {
        transform: scale(1) translateY(0) rotate(187deg) rotateY(180deg);
    }

    98% {
        offset-distance: 0%;
        transform: rotate(187deg) rotateY(180deg);
    }
}

@keyframes boing-boing {
    0% {
        transform: translate(0);
        animation-timing-function: ease-in;
    }

    11.25% {
        transform: translate(0) scale(1.15, 0.85);
    }

    16.25% {
        transform: translateY(-23%) scale(0.85, 1.15);
        animation-timing-function: ease-in;
    }

    20% {
        transform: translateY(-6%) scale(0.85, 1.15);
        animation-timing-function: cubic-bezier(0, 0.27, 0.58, 1);
    }

    22.5% {
        transform: translate(0) scale(1.15, 0.85);
        animation-timing-function: ease-in-out;
    }

    24.4%,
    28.4% {
        transform: translate(0) rotateY(0);
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.21, 1.7);
    }

    35.9%,
    67.1% {
        transform: translate(0) rotateY(180deg);
        animation-timing-function: cubic-bezier(0.67, 0.16, 0.58, 1);
    }

    75.1%,
    100% {
        transform: translate(0) rotateY(0);
    }
}

@keyframes leaves-that-have-fallen-off {
    0% {
        transform: translate(105%, 45%) rotate3d(0.2, 0.6, 0.2, 0) scale(1);
    }

    20% {
        transform: translate(-300%, -160%) rotate3d(0.2, 0.6, 0.2, 1080deg) scale(1);
        animation-timing-function: ease-in-out;
    }

    25%,
    58% {
        opacity: 1;
    }

    37.5% {
        transform: translate(-370%, -58%) rotate3d(0, 0, 1, 1145deg) scale(1);
        animation-timing-function: ease-in-out;
    }

    49%,
    53% {
        transform: translate(-300%, -10%) rotate3d(0, 0, 1, 1110deg) scale(1);
        height: 22px;
    }

    56% {
        height: 60px;
    }

    65% {
        opacity: 0;
        height: 30px;
    }

    80% {
        transform: translate(230%, -70%) rotate3d(0.2, 0.6, 0.2, 0deg) scale(0.6);
    }
}

@keyframes fall {

    0%,
    63% {
        transform: translateY(-60px);
        opacity: 0;
    }

    64% {
        opacity: 1;
    }

    100% {
        transform: translateY(65px);
        opacity: 1;
    }
}

@keyframes stalking {

    0%,
    36% {
        transform: translateZ(0) translateX(30%) rotate(-60deg) scale(0.3);
        opacity: 1;
    }

    42% {
        transform: translateZ(0) translateX(-30%) rotate(20deg) scale(0.3);
    }

    48% {
        transform: translateZ(0) translateX(30%) rotate(-57deg) scale(0.3);
    }

    54.8%,
    56% {
        transform: translateZ(0) translate(0) rotate(0) scale(0.3);
        animation-timing-function: cubic-bezier(0.12, 0.58, 0.31, 1);
    }

    60.2%,
    61% {
        transform: translateZ(0) translate(0, -70%) rotate(1080deg) scale(1);
        animation-timing-function: cubic-bezier(0.82, 0, 0.93, 0.7);
    }

    63.2% {
        transform: translateZ(0) translate(0, -36%) rotate(1080deg);
        animation-timing-function: cubic-bezier(0.38, 0.23, 0.7, 1);
    }

    72.5% {
        transform: translateZ(0) translate(-23%, -36%) rotate(1080deg) scale(1);
    }

    73%,
    79% {
        transform: translateZ(0) translate(-23%, -31%) rotate(1080deg) scale(1, 0.9);
    }

    79.5%,
    80% {
        transform: translateZ(0) translate(-11%, -31%) rotate(1091deg) scale(1, 0.9);
    }

    80.5%,
    81% {
        transform: translateZ(0) translate(200%, -31%) rotate(1095deg) scale(1, 0.9);
    }

    81.5%,
    82% {
        transform: translateZ(0) translate(100%, -35%) rotate(1030deg) scale(1, 0.9);
    }

    82.5%,
    100% {
        transform: translateZ(0) translate(200%, -31%) rotate(1100deg) scale(1, 0.9);
        opacity: 1;
    }
}

@keyframes estrus-period {

    0%,
    74.6%,
    75.8% {
        transform: scale(1);
    }

    75.2% {
        transform: scale(1.2);
    }

    76.4% {
        transform: scale(1.3);
    }

    77% {
        transform: scale(1);
        filter: hue-rotate(0);
        animation-timing-function: ease-in-out;
    }

    77.6%,
    100% {
        transform: scale(1.5);
        filter: hue-rotate(200deg);
    }
}

@keyframes quick-change-of-clothes {
    0% {
        transform: translate(0) scale(1) rotateY(0);
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    4% {
        transform: translate(0) scale(1.1, 0.88) rotateY(0);
    }

    5%,
    45%,
    69.5%,
    100% {
        opacity: 1;
    }

    5.01%,
    44.99% {
        opacity: 0;
    }

    8%,
    43.99% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(360deg);
        animation-timing-function: ease-in;
    }

    44% {
        transform: translate(0) scale(1.1, 0.88) rotateY(1800deg);
    }

    48% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(2160deg);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translate(0) scale(1) rotateY(2160deg);
        animation-timing-function: ease-out;
    }

    51.8% {
        transform: translate(0) scale(1.1, 0.88) rotateY(2160deg);
        animation-timing-function: ease-in-out;
    }

    54%,
    56% {
        transform: translate(0) scale(1) rotateY(2160deg);
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.21, 1.7);
    }

    61%,
    66% {
        transform: translate(0) scale(1) rotateY(1980deg);
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.27, 0.99);
    }

    90%,
    100% {
        transform: translate(0) scale(1) rotateY(0);
    }
}

@keyframes quick-change-of-clothes-2 {

    0%,
    4% {
        transform: translate(0) scale(1.1, 0.88) rotateY(0);
    }

    4.99%,
    13.01% {
        opacity: 0;
    }

    5%,
    13% {
        opacity: 1;
    }

    8% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(360deg);
        animation-timing-function: ease-in;
    }

    10% {
        transform: translate(0) scale(1) rotateY(360deg);
        animation-timing-function: ease-out;
    }

    11.8% {
        transform: translate(0) scale(1.1, 0.88) rotateY(360deg);
    }

    16% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(720deg);
    }
}

@keyframes quick-change-of-clothes-3 {

    0%,
    12% {
        transform: translate(0) scale(1.1, 0.88) rotateY(360deg);
    }

    12.99%,
    21.01% {
        opacity: 0;
    }

    13%,
    21% {
        opacity: 1;
    }

    16% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(720deg);
        animation-timing-function: ease-in;
    }

    18% {
        transform: translate(0) scale(1) rotateY(720deg);
        animation-timing-function: ease-out;
    }

    19.8% {
        transform: translate(0) scale(1.1, 0.88) rotateY(720deg);
    }

    24% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(1080deg);
    }
}

@keyframes quick-change-of-clothes-4 {

    0%,
    20% {
        transform: translate(0) scale(1.1, 0.88) rotateY(720deg);
    }

    20.99%,
    29.01% {
        opacity: 0;
    }

    21%,
    29% {
        opacity: 1;
    }

    24% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(1080deg);
        animation-timing-function: ease-in;
    }

    26% {
        transform: translate(0) scale(1) rotateY(1080deg);
        animation-timing-function: ease-out;
    }

    27.8% {
        transform: translate(0) scale(1.1, 0.88) rotateY(1080deg);
    }

    32% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(1440deg);
    }
}

@keyframes quick-change-of-clothes-5 {

    0%,
    28% {
        transform: translate(0) scale(1.1, 0.88) rotateY(1080deg);
    }

    28.99%,
    37.01% {
        opacity: 0;
    }

    29%,
    37% {
        opacity: 1;
    }

    32% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(1440deg);
        animation-timing-function: ease-in;
    }

    34% {
        transform: translate(0) scale(1) rotateY(1440deg);
        animation-timing-function: ease-out;
    }

    35.8% {
        transform: translate(0) scale(1.1, 0.88) rotateY(1440deg);
    }

    40% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(1800deg);
    }
}

@keyframes quick-change-of-clothes-6 {

    0%,
    36% {
        transform: translate(0) scale(1.1, 0.88) rotateY(1440deg);
    }

    36.99%,
    45.01% {
        opacity: 0;
    }

    37%,
    45% {
        opacity: 1;
    }

    40% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(1800deg);
        animation-timing-function: ease-in;
    }

    42% {
        transform: translate(0) scale(1) rotateY(1800deg);
        animation-timing-function: ease-out;
    }

    43.8% {
        transform: translate(0) scale(1.1, 0.88) rotateY(1800deg);
    }

    48% {
        transform: translateY(-14px) scale(0.95, 1.05) rotateY(2160deg);
    }
}

:is(.single, .page) #content.is-loaded,
#fortress-footer-gate.is-loaded {
    opacity: 1;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.18, 1);
}