/**
 * 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);
    /* Flat page canvas — no pastel radial wash (admin hero style owns the hero fill) */
    background: var(--page-bg, #ffffff);
    background-attachment: scroll;
}

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,
html.dark {
    --woofsy-ink: #e2e8f0;
    --woofsy-card: color-mix(in srgb, #0f172a 84%, var(--brand));
    --woofsy-stroke: color-mix(in srgb, var(--brand) 38%, transparent);
    --woofsy-soft-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}

.dark body,
html.dark body {
    background: var(--page-bg, #0f172a);
    color: var(--woofsy-ink);
}

.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;
    border-color: color-mix(in srgb, var(--brand) 55%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand) 48%, transparent),
        0 0 22px color-mix(in srgb, var(--brand) 38%, transparent),
        0 0 48px color-mix(in srgb, var(--brand-2, var(--brand)) 22%, transparent),
        0 18px 40px rgba(0, 0, 0, 0.5),
        var(--shadow-glow, 0 0 60px color-mix(in srgb, var(--brand) 22%, transparent)) !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);
}

.dark .card-hover,
html.dark .card-hover {
    background: var(--woofsy-card) !important;
    border-color: var(--woofsy-stroke) !important;
    color: #e2e8f0;
    box-shadow: var(--woofsy-soft-shadow);
}

.dark .card-hover:hover,
html.dark .card-hover:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--brand) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand) 42%, 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;
}

/* Admin hero style white/brand_soft: no pastel wash over the flat fill */
.landing-hero-wrap--style-white::after,
.landing-hero-wrap--style-brand_soft::after {
    display: none !important;
    content: none !important;
}

.landing-hero-wrap--style-white {
    background: #fff !important;
}

.dark .landing-hero-wrap--style-white {
    background: rgb(15 23 42) !important;
}


.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;
}

/* Login / register modals — dark theme (anime light chrome must not win) */
.dark .mpa-card,
html.dark .mpa-card {
    background: color-mix(in srgb, #0f172a 92%, var(--brand)) !important;
    color: #f8fafc !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.65),
        0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent),
        0 0 28px color-mix(in srgb, var(--brand) 14%, transparent) !important;
}

.dark .mpa-head h2,
html.dark .mpa-head h2 {
    color: #f8fafc !important;
}

.dark .mpa-head p,
html.dark .mpa-head p {
    color: #94a3b8 !important;
}

.dark .mpa-tabs,
html.dark .mpa-tabs {
    background: color-mix(in srgb, #1e293b 88%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
}

.dark .mpa-tabs button,
html.dark .mpa-tabs button {
    color: #94a3b8 !important;
}

.dark .mpa-tabs button.is-active,
html.dark .mpa-tabs button.is-active {
    background: color-mix(in srgb, #0f172a 70%, var(--brand)) !important;
    color: color-mix(in srgb, var(--brand) 55%, white) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

.dark .mpa-field label,
html.dark .mpa-field label {
    color: #cbd5e1 !important;
}

.dark .mpa-input,
.dark .mpa-pin,
html.dark .mpa-input,
html.dark .mpa-pin {
    background: #0b1220 !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
    color: #f1f5f9 !important;
}

.dark .mpa-input::placeholder,
html.dark .mpa-input::placeholder {
    color: #64748b !important;
}

.dark .mpa-input:focus,
.dark .mpa-pin:focus,
html.dark .mpa-input:focus,
html.dark .mpa-pin:focus {
    background: #020617 !important;
    border-color: color-mix(in srgb, var(--brand) 55%, #64748b) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

.dark .mpa-close,
html.dark .mpa-close {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

.dark .mpa-btn-primary,
.dark button.mpa-btn-primary,
html.dark .mpa-btn-primary,
html.dark button.mpa-btn-primary {
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}

.dark .mpa-btn-primary:disabled,
html.dark .mpa-btn-primary:disabled {
    opacity: 0.55 !important;
}

.dark .mpa-switch,
html.dark .mpa-switch {
    color: #94a3b8 !important;
}

.dark .mpa-switch button,
.dark .mpa-link,
html.dark .mpa-switch button,
html.dark .mpa-link {
    color: color-mix(in srgb, var(--brand) 70%, white) !important;
}

.dark .mpa-link-muted,
html.dark .mpa-link-muted {
    color: #94a3b8 !important;
}

.dark .mpa-note,
html.dark .mpa-note {
    color: #cbd5e1 !important;
}

.dark .mpa-alert-error,
html.dark .mpa-alert-error {
    background: color-mix(in srgb, #7f1d1d 55%, #0f172a) !important;
    border-color: color-mix(in srgb, #f87171 40%, transparent) !important;
    color: #fecaca !important;
}

/* Signup modal shell + form body */
.dark .moppsy-modal-scroll,
html.dark .moppsy-modal-scroll {
    color: #e2e8f0;
}

.dark .moppsy-modal-scroll .bg-white,
html.dark .moppsy-modal-scroll .bg-white {
    background: color-mix(in srgb, #0f172a 88%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
    color: #e2e8f0 !important;
}

.dark .moppsy-modal-scroll .border-slate-200,
html.dark .moppsy-modal-scroll .border-slate-200 {
    border-color: #334155 !important;
}

.dark .moppsy-modal-scroll .hover\:bg-slate-50:hover,
html.dark .moppsy-modal-scroll .hover\:bg-slate-50:hover {
    background: #1e293b !important;
}

.dark .moppsy-modal-scroll input,
.dark .moppsy-modal-scroll select,
.dark .moppsy-modal-scroll textarea,
html.dark .moppsy-modal-scroll input,
html.dark .moppsy-modal-scroll select,
html.dark .moppsy-modal-scroll textarea {
    background: #0b1220 !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
    color: #f1f5f9 !important;
}

.dark .moppsy-modal-scroll input::placeholder,
html.dark .moppsy-modal-scroll input::placeholder {
    color: #64748b !important;
}

.dark .moppsy-modal-scroll label,
html.dark .moppsy-modal-scroll label {
    color: #e2e8f0 !important;
}

.dark .moppsy-modal-scroll .text-slate-500,
.dark .moppsy-modal-scroll .text-slate-400,
.dark .moppsy-modal-scroll .text-\[11px\],
html.dark .moppsy-modal-scroll .text-slate-500,
html.dark .moppsy-modal-scroll .text-slate-400,
html.dark .moppsy-modal-scroll .text-\[11px\] {
    color: #cbd5e1 !important;
}

.dark .moppsy-modal-scroll .text-violet-600,
html.dark .moppsy-modal-scroll .text-violet-600 {
    color: color-mix(in srgb, var(--brand) 55%, white) !important;
}

.dark .moppsy-modal-scroll .bg-slate-50,
html.dark .moppsy-modal-scroll .bg-slate-50 {
    background: color-mix(in srgb, #0f172a 82%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
    color: #e2e8f0 !important;
}

.dark .moppsy-modal-scroll a.font-semibold,
.dark .moppsy-modal-scroll button.font-semibold,
html.dark .moppsy-modal-scroll a.font-semibold,
html.dark .moppsy-modal-scroll button.font-semibold {
    color: color-mix(in srgb, var(--brand) 60%, white) !important;
}

.dark .moppsy-modal-scroll .bg-red-50,
html.dark .moppsy-modal-scroll .bg-red-50 {
    background: color-mix(in srgb, #7f1d1d 55%, #0f172a) !important;
    border-color: color-mix(in srgb, #f87171 40%, transparent) !important;
    color: #fecaca !important;
}

/* Register modal shell edge */
.dark [role="dialog"] .moppsy-modal-scroll,
html.dark .moppsy-modal-scroll {
    background: transparent;
}

/* Families (/hosts) — soft bands must not mix with white in dark mode */
.hosts-soft-band {
    background: color-mix(in srgb, var(--brand-soft) 70%, white);
}

.hosts-cta-band {
    background: color-mix(in srgb, var(--brand-soft) 85%, white);
    border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

.hosts-panel {
    background: #fff;
}

.hosts-cta-secondary {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    background: #fff;
}

.dark .hosts-soft-band,
html.dark .hosts-soft-band {
    background: color-mix(in srgb, var(--brand) 14%, #0f172a);
    border-color: color-mix(in srgb, var(--brand) 28%, #1e293b);
}

.dark .hosts-cta-band,
html.dark .hosts-cta-band {
    background: color-mix(in srgb, var(--brand) 18%, #0f172a);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

.dark .hosts-panel,
html.dark .hosts-panel {
    background: color-mix(in srgb, #0f172a 86%, var(--brand));
    border-color: color-mix(in srgb, var(--brand) 28%, #334155);
    color: #e2e8f0;
}

.dark .hosts-cta-secondary,
html.dark .hosts-cta-secondary {
    color: color-mix(in srgb, var(--brand) 70%, white);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    background: color-mix(in srgb, #0f172a 80%, var(--brand));
}

/* About + marketing photo frames — drop white sticker border in dark */
.dark .page-photo-split img,
.dark img.page-photo,
.dark .partials-page-photo img,
.dark .page-hero-photo-img,
html.dark .page-photo-split img,
html.dark img.page-photo,
html.dark .partials-page-photo img,
html.dark .page-hero-photo-img {
    border-color: color-mix(in srgb, var(--brand) 35%, #334155) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

/* About story / values / ecosystem shells */
.dark .about-panel,
html.dark .about-panel {
    background: color-mix(in srgb, #0f172a 86%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
    color: #e2e8f0;
}

.dark .about-panel-muted,
html.dark .about-panel-muted {
    background: color-mix(in srgb, #0f172a 78%, var(--brand)) !important;
    color: #e2e8f0;
}

.dark .faq-accordion details,
html.dark .faq-accordion details {
    background: color-mix(in srgb, #0f172a 86%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand) 28%, #334155) !important;
}

/* Hero bands + large gradient cards — darken brand wash in dark mode */
.page-hero-band {
    position: relative;
}

.dark .page-hero-band,
html.dark .page-hero-band {
    /* Soft brand glow only — base stays near-slate so pastel palettes don't wash light */
    background:
        radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 48%),
        radial-gradient(ellipse at 92% 8%, color-mix(in srgb, var(--brand-2, var(--brand)) 16%, transparent), transparent 42%),
        linear-gradient(155deg,
            color-mix(in srgb, var(--brand) 14%, #020617) 0%,
            color-mix(in srgb, var(--brand) 10%, #0b1220) 42%,
            #020617 100%) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand) 22%, transparent);
}

.dark .page-hero-band-glow,
html.dark .page-hero-band-glow {
    opacity: 0.12 !important;
}

.dark .page-hero-band .page-hero-photo,
html.dark .page-hero-band .page-hero-photo {
    background: color-mix(in srgb, #0f172a 70%, var(--brand)) !important;
    border-color: color-mix(in srgb, var(--brand) 45%, transparent) !important;
    box-shadow:
        0 28px 60px -20px rgba(0, 0, 0, 0.65),
        0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent),
        0 0 28px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

.dark .page-hero-band a[style*="background:#fff"],
.dark .page-hero-band a[style*="background: #fff"],
html.dark .page-hero-band a[style*="background:#fff"],
html.dark .page-hero-band a[style*="background: #fff"] {
    background: color-mix(in srgb, #0f172a 55%, var(--brand)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--brand) 28%, transparent);
}