/* sakura-jepang visual identity. */


/* 8. Sakura Jepang */
.theme-sakura-jepang {
    --bs-light: #fff5f8;
    --bs-white: #ffffff;
    --bs-dark: #4a2f38;
    --bs-gray-100: #ffe8f0;
    color: var(--bs-dark);
}


.theme-sakura-jepang .bg-light-dark,
.theme-sakura-jepang .bg-white-black {
    background-image:
        radial-gradient(circle at 84% 12%, rgba(255, 155, 176, .28), transparent 7.5rem),
        radial-gradient(circle at 16% 84%, rgba(255, 204, 214, .22), transparent 9rem),
        linear-gradient(135deg, rgba(255, 184, 200, .08) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 184, 200, .08) 25%, transparent 25%);
    background-size: auto, auto, 42px 42px, 42px 42px;
}


.theme-sakura-jepang .bg-theme-auto,
.theme-sakura-jepang .border.rounded-5.shadow,
.theme-sakura-jepang .border.rounded-pill.shadow {
    background: rgba(255, 255, 255, .86) !important;
    border-color: rgba(221, 103, 139, .24) !important;
    box-shadow: 0 18px 42px rgba(149, 55, 84, .12) !important;
}


.theme-sakura-jepang .font-esthetic,
.theme-sakura-jepang .text-theme-auto {
    color: #c64f77 !important;
}


.sakura-sun {
    position: absolute;
    top: 8%;
    right: max(1rem, calc(50vw - 290px));
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 147, 163, .28), rgba(255, 147, 163, .06) 62%, transparent 64%);
    animation: pulseHalo 8s ease-in-out infinite;
}


.sakura-branch {
    position: absolute;
    top: 9%;
    width: 210px;
    height: 2px;
    background: rgba(112, 60, 70, .28);
}


.sakura-branch::before,
.sakura-branch::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 80% 0 80% 0;
    background: rgba(255, 137, 161, .46);
}


.sakura-branch::before { left: 36%; top: -19px; transform: rotate(18deg); }

.sakura-branch::after { left: 62%; top: 3px; transform: rotate(54deg); }

.sakura-branch.branch-left { left: -36px; transform: rotate(24deg); }

.sakura-branch.branch-right { right: -36px; transform: scaleX(-1) rotate(24deg); }


/* 8. Sakura Jepang */
.theme-sakura-jepang { font-family: "Noto Sans JP", sans-serif; }

.theme-sakura-jepang h1, .theme-sakura-jepang h2, .theme-sakura-jepang h3, .theme-sakura-jepang h4, .theme-sakura-jepang h5, .theme-sakura-jepang h6 { font-family: "M PLUS Rounded 1c", sans-serif; }

.theme-sakura-jepang .font-esthetic { font-family: "Yesteryear", cursive; }


.signature-sakura-jepang {
    --signature-opacity: .34;
    width: clamp(122px, 21vw, 190px);
    height: clamp(76px, 12vw, 112px);
    color: #c64f77;
}


.signature-sakura-jepang::before {
    left: 7%;
    right: 7%;
    top: 52%;
    height: 2px;
    background: rgba(112, 60, 70, .45);
    border-radius: 999px;
    transform: rotate(-8deg);
}


.signature-sakura-jepang::after {
    top: 8%;
    right: 13%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 151, 167, .58), rgba(255, 151, 167, .08) 66%, transparent 68%);
}


.signature-sakura-jepang span {
    background:
        radial-gradient(ellipse at 24% 42%, rgba(255, 137, 161, .78) 0 8%, transparent 9%),
        radial-gradient(ellipse at 38% 28%, rgba(255, 188, 202, .8) 0 7%, transparent 8%),
        radial-gradient(ellipse at 55% 56%, rgba(255, 137, 161, .72) 0 7%, transparent 8%),
        radial-gradient(ellipse at 72% 40%, rgba(255, 188, 202, .72) 0 6%, transparent 7%);
}


body.theme-sakura-jepang #theme-ornaments::before {
    opacity: .28;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255, 183, 197, .28) 0 10%, transparent 11%),
        radial-gradient(ellipse at 76% 65%, rgba(255, 105, 135, .18) 0 8%, transparent 9%),
        linear-gradient(120deg, transparent 0 46%, rgba(255, 183, 197, .14) 48%, transparent 50% 100%);
    background-size: 280px 220px, 360px 260px, 260px 260px;
    animation: sakuraWindField 26s ease-in-out infinite alternate;
}


body.theme-sakura-jepang #theme-ornaments::after {
    opacity: .18;
    background:
        repeating-linear-gradient(115deg, rgba(255, 145, 164, .12) 0 2px, transparent 2px 40px);
    background-size: 180px 180px;
    animation: sakuraMistDrift 22s linear infinite;
}