/* ================================================================
   custom-beauty.css — Taste-Skill v1 + Impeccable Calibration
   Applies design principles from Leon Lin (taste-skill) and
   Paul Bakaus (impeccable) to Love Hmy 1.0.0 index page.

   DESIGN_VARIANCE: 6    MOTION_INTENSITY: 5    VISUAL_DENSITY: 4
   ================================================================ */

/* ── 1. COLOR PALETTE REFINEMENT ── */

:root {
    /* Brand accent: rose-mauve, desaturated */
    --beauty-accent: oklch(0.62 0.08 10);
    --beauty-accent-soft: oklch(0.72 0.06 10);

    /* Neutral ramp: true off-white base (NOT cream/sand band) */
    --beauty-bg: oklch(0.985 0.001 100);
    --beauty-surface: oklch(0.99 0.001 100);
    --beauty-ink: oklch(0.22 0.008 310);
    --beauty-ink-soft: oklch(0.52 0.01 300);
    --beauty-muted: oklch(0.78 0.006 300);

    /* Motion easing */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── 2. TYPOGRAPHY UPGRADE ── */

body,
.cn-section-sub,
.cn-event-note,
.cn-journal-excerpt,
.cn-message-text,
.cn-todo-meta,
.lgnewui-header-weather-text,
.lgnewui-header-map-text,
input, textarea, select, button {
    font-family: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Display / Serif uses remain for editorial sections */
.cn-section-title,
.cn-epilogue-title-new,
.cn-epilogue-verse-new,
.lgnewui-day-poetic-title,
.cn-hero-moment-title,
.lgnewui-hero-title {
    font-family: 'Noto Serif SC', 'Crimson Pro', serif;
}

/* Line length cap for readability */
.cn-journal-excerpt,
.cn-event-note,
.cn-message-text {
    max-width: 65ch;
}

/* Display heading letter-spacing floor */
.cn-epilogue-title-new,
.lgnewui-hero-title {
    letter-spacing: -0.03em;
}

/* Hero avatar names need strong contrast over photos. */
.bg-wrap.central.limg .shadow-blur {
    max-width: min(180px, 36vw);
    padding: 0.18rem 0.55rem 0.24rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(20, 24, 31, 0.32), rgba(20, 24, 31, 0.18));
    color: rgba(255, 255, 255, 0.98);
    font-family: 'Outfit', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: clamp(0.92rem, 1.7vw, 1.18rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.02em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.72),
        0 4px 14px rgba(0, 0, 0, 0.42),
        0 0 1px rgba(0, 0, 0, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 22px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 769px) {
    .bg-wrap.central.limg .shadow-blur {
        max-width: 220px;
        padding: 0.22rem 0.72rem 0.28rem;
    }
}

@media (max-width: 420px) {
    .bg-wrap.central.limg .shadow-blur {
        max-width: 38vw;
        font-size: 0.86rem;
        letter-spacing: 0.01em;
    }
}

/* Balanced text wrapping on headings */
h1, h2, h3,
.cn-section-title,
.cn-epilogue-title-new {
    text-wrap: balance;
}

/* ── 3. BODY BACKGROUND FIX ── */

body.bg-pdot-vignette {
    background-color: var(--beauty-bg);
    background-image: radial-gradient(
        ellipse at 50% 0%,
        oklch(0.93 0.015 5) 0%,
        transparent 70%
    );
}

/* Mobile background layer: shift from cream-pink to neutral */
@media (max-width: 768px) {
    .lg-mobile-bg-layer {
        background-color: var(--beauty-bg);
    }
}

/* ── 4. CARDS: REMOVE GHOST-CARD PATTERN ── */

/* Replace 1px border + wide shadow with controlled shadow only */
.cn-event-card,
.cn-journal-card,
.cn-message-card,
.cn-album-polaroid,
.cn-wish-card,
.cn-mem-card,
.cn-pic-card,
.cn-note-card,
.cn-todo-card,
.lgnewui-widget--loveday-vibrant,
.lgnewui-widget--vibrant {
    border: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Card border-radius cap at 16px */
.cn-event-card,
.cn-journal-card,
.cn-message-card,
.cn-wish-card,
.cn-mem-card,
.cn-pic-card,
.cn-note-card,
.cn-todo-card,
.lgnewui-widget--loveday-vibrant {
    border-radius: 14px;
}

/* ── 5. SHADOW REFINEMENT ── */

/* Use background-tinted shadows instead of pure black */
.cn-journal-card:hover,
.cn-message-card:hover,
.cn-event-card:hover,
.cn-album-polaroid:hover,
.cn-wish-card:hover,
.cn-mem-card:hover,
.cn-pic-card:hover,
.cn-note-card:hover,
.cn-todo-card:hover {
    box-shadow:
        0 2px 6px rgba(180, 136, 157, 0.08),
        0 8px 24px rgba(180, 136, 157, 0.06);
    transform: translateY(-2px);
}

/* ── 6. REMOVE IMAGE HOVER ANIMATIONS ── */

.lgnewui-couple-avatars-right:hover .lgnewui-avatar-group {
    transform: none;
}

.lgnewui-couple-avatars-right:hover .lgnewui-right-heart {
    transform: translate(-50%, -50%);
}

/* Instead: card-level hover feedback */
.cn-event-card {
    transition:
        background 0.3s var(--ease-spring),
        box-shadow 0.3s var(--ease-spring);
}

/* ── 7. GLASS EFFECT REDUCTION ── */

/* Reduce default glassmorphism on header */
.header-wrap {
    --lg-header-glass-bg: oklch(0.99 0.001 100 / 0.92);
    border-bottom: 1px solid oklch(0 0 0 / 0.04);
}

.header-wrap.is-scrolled {
    background: oklch(1 0 0 / 0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Container inner overlay: softer */
@media (max-width: 768px) {
    body.bg-pdot-vignette .lgnewui-container::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 248, 252, 0.25) 18%,
            rgba(255, 248, 252, 0.45) 42%,
            rgba(255, 250, 252, 0.65) 100%
        );
    }
}

/* ── 8. MOTION: STAGGERED REVEALS ── */

.lg-fade-up {
    animation: beautyFadeUp 0.7s var(--ease-spring) both;
}

@keyframes beautyFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered children reveal */
.cn-events-grid .cn-event-card:nth-child(1) { animation-delay: 0.05s; }
.cn-events-grid .cn-event-card:nth-child(2) { animation-delay: 0.12s; }
.cn-events-grid .cn-event-card:nth-child(3) { animation-delay: 0.19s; }
.cn-events-grid .cn-event-card:nth-child(4) { animation-delay: 0.26s; }

.cn-journal-grid .cn-journal-card:nth-child(1) { animation-delay: 0.05s; }
.cn-journal-grid .cn-journal-card:nth-child(2) { animation-delay: 0.12s; }
.cn-journal-grid .cn-journal-card:nth-child(3) { animation-delay: 0.19s; }
.cn-journal-grid .cn-journal-card:nth-child(4) { animation-delay: 0.26s; }

.cn-message-track .cn-message-card:nth-child(1) { animation-delay: 0.05s; }
.cn-message-track .cn-message-card:nth-child(2) { animation-delay: 0.10s; }
.cn-message-track .cn-message-card:nth-child(3) { animation-delay: 0.15s; }
.cn-message-track .cn-message-card:nth-child(4) { animation-delay: 0.20s; }
.cn-message-track .cn-message-card:nth-child(5) { animation-delay: 0.25s; }
.cn-message-track .cn-message-card:nth-child(6) { animation-delay: 0.30s; }
.cn-message-track .cn-message-card:nth-child(7) { animation-delay: 0.35s; }
.cn-message-track .cn-message-card:nth-child(8) { animation-delay: 0.40s; }

/* ── 9. TACTILE FEEDBACK ── */

.cn-section-more:active,
.cn-btn-new--primary:active,
.cn-btn-new--ghost:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.cn-event-card:active,
.cn-journal-card:active,
.cn-message-card:active {
    transform: scale(0.985);
}

/* ── 10. PREFERS-REDUCED-MOTION ── */

@media (prefers-reduced-motion: reduce) {
    .lg-fade-up {
        animation: none;
        opacity: 1;
    }

    .cn-events-grid .cn-event-card,
    .cn-journal-grid .cn-journal-card,
    .cn-message-track .cn-message-card {
        animation-delay: 0s;
    }

    .cn-event-card,
    .cn-journal-card,
    .cn-message-card,
    .cn-album-polaroid,
    .cn-wish-card,
    .cn-mem-card,
    .cn-pic-card,
    .cn-note-card,
    .cn-todo-card {
        transition: none;
    }

    .stuck-logo--en-v7 .stuck-logo__heart {
        animation: none;
    }

    @keyframes dotsFloat {
        0%, 100% { transform: translateY(0); }
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 11. DAY FUSION CARD REFINEMENT ── */

.lgnewui-day-fusion-card {
    border-radius: 18px;
    box-shadow:
        0 2px 8px rgba(180, 136, 157, 0.06),
        0 12px 32px rgba(180, 136, 157, 0.04);
}

.lgnewui-day-ambient-light {
    background: radial-gradient(
        ellipse at 50% 0%,
        oklch(0.72 0.06 10 / 0.12),
        transparent 70%
    );
}

/* ── 12. SECTION SEAL REFINEMENT ── */

/* Make seals more distinctive: slightly lifted, soft shadow */
.cn-section-seal {
    box-shadow:
        0 2px 8px rgba(180, 136, 157, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.3s var(--ease-spring);
}

.cn-section-head:hover .cn-section-seal {
    transform: rotate(-3deg) scale(1.04);
}

/* ── 13. EPILOGUE REFINEMENT ── */

.cn-epilogue-new {
    border-radius: 18px;
}

.cn-epilogue-glow {
    background: radial-gradient(
        ellipse at 50% 30%,
        oklch(0.62 0.08 10 / 0.12),
        transparent 60%
    );
}

/* Final day-counter layer: keep this aligned with https://love-really.kikiw.cn/index.php. */
:root {
    --lgnewui-day-bg-card: rgba(255, 255, 255, 0.85) !important;
    --lgnewui-day-text-main: #2D3748 !important;
    --lgnewui-day-text-sub: #718096 !important;
    --lgnewui-day-text-light: #A0AEC0 !important;
    --lgnewui-day-accent-color: #E53E3E !important;
    --lgnewui-day-font-en: 'Inter', sans-serif !important;
    --lgnewui-day-font-cn-serif: 'Noto Serif SC', serif !important;
    --lgnewui-day-font-ui: 'Inter', sans-serif !important;
    --lgnewui-day-font-nums: 'Inter', sans-serif !important;
    --lgnewui-day-shadow-card: 0 20px 40px -10px rgba(0, 0, 0, 0.05), 0 10px 20px -10px rgba(0, 0, 0, 0.02) !important;
}

@keyframes lgnewui-day-silky-reveal {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lgnewui-day-fusion-card {
    background: var(--lgnewui-day-bg-card) !important;
    border: 1px solid rgb(227 227 227 / 60%) !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--lgnewui-day-shadow-card) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.lgnewui-day-poetic-title {
    color: #1a202c !important;
    font-family: var(--lgnewui-day-font-cn-serif) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
}

.lgnewui-day-main-days-number,
.lgnewui-day-timer-val,
.lgnewui-day-date-value-clean {
    font-family: var(--lgnewui-day-font-nums) !important;
    font-variant-numeric: tabular-nums !important;
}

.lgnewui-day-main-days-number {
    background: linear-gradient(135deg, #1A202C 0%, #4A5568 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #1A202C !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    filter: none !important;
    text-shadow: none !important;
}

.lgnewui-day-timer-val {
    color: var(--lgnewui-day-text-main) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    transform-origin: center !important;
    backface-visibility: visible !important;
}

.lgnewui-day-timer-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    perspective: none !important;
}

.lgnewui-day-anim-active {
    animation: lgnewui-day-silky-reveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

.lgnewui-day-date-label-small,
.lgnewui-day-timer-label,
.lgnewui-day-days-label {
    color: var(--lgnewui-day-text-light) !important;
    font-family: var(--lgnewui-day-font-ui) !important;
}

.lgnewui-day-date-value-clean {
    color: var(--lgnewui-day-text-sub) !important;
    font-weight: 600 !important;
}

.lgnewui-day-days-divider {
    background-color: var(--lgnewui-day-accent-color) !important;
}

.cn-btn-new--primary {
    box-shadow:
        0 2px 8px rgba(180, 136, 157, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        transform 0.2s var(--ease-spring),
        box-shadow 0.2s var(--ease-spring);
}

.cn-btn-new--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 16px rgba(180, 136, 157, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ── 14. LINK UNDERLINE REFINEMENT ── */

.cn-section-more {
    text-decoration: none;
    transition:
        color 0.2s ease,
        gap 0.3s var(--ease-spring);
}

.cn-section-more:hover i {
    transform: translateX(3px);
    transition: transform 0.3s var(--ease-spring);
}

/* ── 15. ACCESSIBILITY: FOCUS RING ── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--beauty-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── 16. SCROLLBAR REFINEMENT ── */

.cn-album-scroll::-webkit-scrollbar,
.cn-message-track::-webkit-scrollbar {
    height: 4px;
}

.cn-album-scroll::-webkit-scrollbar-thumb,
.cn-message-track::-webkit-scrollbar-thumb {
    background: oklch(0.85 0.01 300);
    border-radius: 4px;
}

.cn-album-scroll::-webkit-scrollbar-track,
.cn-message-track::-webkit-scrollbar-track {
    background: transparent;
}