/* ==========================================
   LunarStar Card Premium System
   Moon Glow / Corner Dot / Hover Hierarchy
========================================== */

/* Card base upgrade */
.ls-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 0.45s var(--transition-slow),
        box-shadow 0.45s var(--transition-slow),
        border-color 0.45s var(--transition-slow);
}

/* === Top brand highlight line === */
.ls-card::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 196, 118, 0.65), transparent);
    opacity: 0.75;
    z-index: 2;
    pointer-events: none;
}

/* === Moon Glow (top-right ambient light) === */
.card-moon-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 176, 82, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.45s var(--transition-slow);
    pointer-events: none;
    z-index: 1;
}

.ls-card:hover .card-moon-glow {
    opacity: 1;
}

/* === Corner Dots === */
.corner-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D4B052;
    opacity: 0.35;
    z-index: 3;
    pointer-events: none;
}
.corner-dot-tl { left: 12px; top: 12px; }
.corner-dot-tr { right: 12px; top: 12px; }
.corner-dot-bl { left: 12px; bottom: 12px; }
.corner-dot-br { right: 12px; bottom: 12px; }

/* === Hover: card lifts === */
.ls-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 176, 82, 0.42);
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.22);
}

/* === Hover: children animate independently === */
.ls-card h3,
.ls-card .card-title {
    transition: letter-spacing 0.35s var(--transition-slow);
}
.ls-card:hover h3,
.ls-card:hover .card-title {
    letter-spacing: 0.03em;
}

.ls-card p,
.ls-card .card-desc {
    transition: opacity 0.35s var(--transition-slow);
    opacity: 0.78;
}
.ls-card:hover p,
.ls-card:hover .card-desc {
    opacity: 1;
}

.ls-card .arrow,
.ls-card .card-arrow {
    transition: transform 0.35s var(--transition-slow);
    display: inline-block;
}
.ls-card:hover .arrow,
.ls-card:hover .card-arrow {
    transform: translateX(5px);
}

/* === Card image hover === */
.ls-card img,
.ls-card .card-image {
    transition: transform 0.45s var(--transition-slow);
}
.ls-card:hover img,
.ls-card:hover .card-image {
    transform: scale(1.04);
}

/* === Noise texture layer === */
.card-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}