/* MONA Nail Studio — shared styles.
   Things Tailwind can't express: the self-hosted script face, the
   moon-phase signature animation, and the duotone photo treatment.
   Shared by index.html, services.html, and membership.html. */

@font-face {
    font-family: 'Chandiluna';
    src: url('../assets/fonts/Chandiluna.ttf') format('truetype');
    font-display: swap;
}
.editorial-line { height: 1px; background-color: #BAAA93; width: 100%; }

/* Visible keyboard focus, on-brand, consistent across cream/ink/safari sections. */
a:focus-visible, button:focus-visible {
    outline: 2px solid #91775a;
    outline-offset: 2px;
}

/* Signature device: a moon phase, cycling new -> full -> new.
   Ties the brand's crescent mark to the "4+ weeks of wear" claim. */
.moon-phase { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.moon-phase .moon-lit {
    position: absolute; inset: 0; border-radius: 9999px; background: #0c0c0c;
}
.moon-phase .moon-shadow {
    position: absolute; inset: 0; border-radius: 9999px; background: #fffcf0;
    animation: moon-cycle 13s ease-in-out infinite;
}
@keyframes moon-cycle {
    0%, 100% { transform: translateX(0%); }
    50% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .moon-phase .moon-shadow { animation: none; transform: translateX(-50%); }
}

/* Modifiers reusing the same device as a static, enlarged mark — the 404 page's
   signature element, frozen mid-cycle instead of a generic "404" numeral. */
.moon-phase.moon-lg { width: 112px; height: 112px; }
.moon-phase.moon-static .moon-shadow { animation: none; transform: translateX(-40%); }

/* Warm duotone grade for real photography: unifies photos pulled from different
   sources (ad-creative crop, Wix export) while staying inside the brand's warm
   palette, instead of neutral grayscale which would fight it. */
.duotone-photo { filter: grayscale(1) contrast(1.05); }
.duotone-overlay {
    background: linear-gradient(160deg, #4c3d32, #baaa93);
    mix-blend-mode: color;
    pointer-events: none;
}