/**
 * Woofsy — soft anime / Japan–Korea web aesthetic
 * Honey cream canvas, rounded soft UI, gentle motion.
 */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Nunito:wght@500;600;700;800;900&display=swap');

:root {
    --woofsy-ink: #3d2c1e;
    --woofsy-cream: #fff8ef;
    --woofsy-cream-2: #f7ecd9;
    --woofsy-blush: #ffd6e7;
    --woofsy-sky: #d9f0ff;
    --woofsy-mint: #d9f5ea;
    --woofsy-card: rgba(255, 255, 255, 0.82);
    --woofsy-stroke: rgba(212, 160, 23, 0.18);
    --woofsy-soft-shadow: 0 10px 30px rgba(61, 44, 30, 0.07), 0 2px 8px rgba(212, 160, 23, 0.08);
}

html {
    font-family: 'Nunito', 'M PLUS Rounded 1c', ui-rounded, system-ui, sans-serif;
}

body {
    color: var(--woofsy-ink);
    background:
        radial-gradient(1200px 600px at 8% -10%, rgba(255, 214, 231, 0.55), transparent 55%),
        radial-gradient(900px 500px at 92% 0%, rgba(217, 240, 255, 0.5), transparent 50%),
        radial-gradient(700px 420px at 70% 100%, rgba(217, 245, 234, 0.45), transparent 55%),
        linear-gradient(180deg, #fffaf3 0%, #fff6ea 40%, #fff9f2 100%);
    background-attachment: fixed;
}

body::before {
    content: '';
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.08;
    background-image: url('/img/woofsy-paw-fall-sm.png');
    background-size: 72px 78px;
    background-repeat: space;
}

.dark body,
html.dark body {
    background:
        radial-gradient(1000px 500px at 10% -10%, rgba(212, 160, 23, 0.12), transparent 50%),
        radial-gradient(800px 400px at 90% 0%, rgba(236, 72, 153, 0.08), transparent 45%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.dark body::before {
    opacity: 0.05;
    filter: brightness(1.2);
}

/* Soft anime header chip */
.moppsy-site-header {
    backdrop-filter: blur(14px) saturate(1.2);
    background: color-mix(in srgb, white 86%, var(--brand-soft)) !important;
    border-color: var(--woofsy-stroke) !important;
    box-shadow: var(--woofsy-soft-shadow) !important;
}

.dark .moppsy-site-header {
    background: color-mix(in srgb, #0f172a 88%, var(--brand)) !important;
}

.moppsy-header-wordmark,
.landing-hero-wrap h1,
.mpa-head h2 {
    font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif !important;
    letter-spacing: -0.03em;
}

/* Soft bubble cards */
.card-hover,
.reveal.bg-white,
.landing-hero-wrap .rounded-2xl,
.page-photo-split img,
.moppsy-nav-item {
    border-radius: 1.35rem !important;
}

.card-hover {
    box-shadow: var(--woofsy-soft-shadow);
    border-color: var(--woofsy-stroke) !important;
    background: var(--woofsy-card) !important;
    backdrop-filter: blur(8px);
}

.card-hover:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(61, 44, 30, 0.1), 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* Hero anime wash */
.landing-hero-wrap {
    isolation: isolate;
}

.landing-hero-wrap::after {
    content: '';
    position: absolute;
    inset: auto -10% -20% -10%;
    height: 55%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(255, 214, 231, 0.45), transparent 55%),
        radial-gradient(ellipse at 75% 30%, rgba(255, 230, 170, 0.35), transparent 50%);
    z-index: 0;
}

.landing-hero-inner {
    position: relative;
    z-index: 1;
}

.landing-hero-badge,
.inline-block.px-3.py-1.rounded-full {
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.12);
}

/* Soft primary buttons */
a.bg-amber-500,
.mpa-btn-primary,
button.mpa-btn-primary {
    border-radius: 999px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Photo frames — sticker-like */
.page-photo-split img,
img.page-photo,
.partials-page-photo img {
    border-radius: 1.75rem !important;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--woofsy-soft-shadow), 0 0 0 1px var(--woofsy-stroke);
}

/* Falling atmosphere particles (Admin → Design → Atmosphere)
   Per-particle --woofsy-bgfx-drift / rot-* come from randomness control. */
@keyframes woofsy-paw-fall {
    0% {
        transform: translate3d(0, -12vh, 0) rotate(var(--woofsy-bgfx-rot-start, -12deg)) scale(0.85);
        opacity: 0;
    }
    8% { opacity: var(--woofsy-bgfx-opacity, 0.85); }
    42% {
        transform: translate3d(
            calc(var(--woofsy-bgfx-drift, 28px) * 0.55),
            42vh,
            0
        ) rotate(var(--woofsy-bgfx-rot-start, -12deg)) scale(1);
        opacity: var(--woofsy-bgfx-opacity, 0.85);
    }
    100% {
        transform: translate3d(var(--woofsy-bgfx-drift, 28px), 110vh, 0) rotate(var(--woofsy-bgfx-rot-end, 28deg)) scale(1);
        opacity: 0;
    }
}

.woofsy-petals,
.woofsy-paws,
.woofsy-bgfx {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
}

.woofsy-petals span,
.woofsy-paws span,
.woofsy-bgfx__particle {
    position: absolute;
    top: -10%;
    width: var(--woofsy-bgfx-size, 18px);
    height: var(--woofsy-bgfx-size, 18px);
    border-radius: 0;
    background: transparent var(--woofsy-bgfx-image, url('/img/woofsy-paw-fall-sm.png')) center / contain no-repeat;
    opacity: 0;
    filter: drop-shadow(0 1px 1px rgba(61, 44, 30, 0.12));
    animation: woofsy-paw-fall linear infinite;
}

.woofsy-bgfx__particle.is-tinted {
    filter: drop-shadow(0 1px 1px rgba(61, 44, 30, 0.1));
}

.woofsy-bgfx__particle.is-css.is-drop {
    background-image: none !important;
    border-radius: 70% 10% 70% 10%;
    transform-origin: center;
}

.woofsy-bgfx__particle.is-css.is-dot {
    background-image: none !important;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .woofsy-petals,
    .woofsy-paws,
    .woofsy-bgfx { display: none; }
    .card-hover:hover { transform: none; }
}

/* Login modal softer anime chrome */
.mpa-card {
    border-radius: 28px !important;
    border-color: var(--woofsy-stroke) !important;
    box-shadow: var(--woofsy-soft-shadow) !important;
    background: color-mix(in srgb, white 92%, var(--brand-soft)) !important;
}

.mpa-tabs {
    background: color-mix(in srgb, var(--brand-soft) 70%, white) !important;
    border-color: var(--woofsy-stroke) !important;
}

.mpa-tabs button.is-active {
    color: #92400e !important;
}