/*
 * Nails Era — 3D UI skin (body.ui-scene-3d). Loaded by index.php only when $neUi3d is on.
 * Immersive WebGL hero (assets/js/hero-scene-3d.js) + poster palette for every homepage section.
 * All original markup, ids and JS behaviour are kept — this file only restyles.
 */
body.ui-scene-3d {
    --s3-emerald: #0b3d2a;
    --s3-emerald-2: #134e36;
    --s3-night: #062619;
    --s3-gold: #b8913f;
    --s3-gold-light: #e2c27a;
    --s3-magenta: #a8326e;
    --s3-cream: #fbf5ec;
    --s3-ivory: #f3e9da;
    --s3-blush: #f7e3e7;
    --s3-ink: #1f2a24;
    --s3-muted: #55655b;
    --s3-edge: #eadcc2;
    --s3-serif: "Cormorant Garamond", Georgia, serif;
    --s3-caps: Cinzel, Georgia, serif;
    --s3-script: "Great Vibes", cursive;
    background: var(--s3-cream) !important;
    color: var(--s3-ink);
}

/* ---------- Hero: WebGL scene replaces photo / overlays ---------- */
body.ui-scene-3d #home.hero-section {
    position: relative;
    min-height: 100svh;
    background: linear-gradient(180deg, #fbf3ea 0%, #f7dfe2 40%, #efc6d0 66%, #e8b9c6 100%) !important;
    background-image: linear-gradient(180deg, #fbf3ea 0%, #f7dfe2 40%, #efc6d0 66%, #e8b9c6 100%) !important;
    overflow: hidden;
}
body.ui-scene-3d #home .hero-atmosphere,
body.ui-scene-3d #home .hero-bg-blur,
body.ui-scene-3d #home .hero-overlay,
body.ui-scene-3d #home .hero-visual,
body.ui-scene-3d #home .site-bg-surface,
body.ui-scene-3d #home canvas:not(#heroScene3d) {
    display: none !important;
}
body.ui-scene-3d #heroScene3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}
html.scene3d-ready body.ui-scene-3d #heroScene3d { opacity: 1; }
body.ui-scene-3d .hero-scene3d-fallback {
    position: absolute;
    right: 8%;
    top: 18%;
    width: min(380px, 40vw);
    z-index: 0;
    display: none;
    filter: drop-shadow(0 30px 40px rgba(11, 61, 42, 0.3));
}
html.scene3d-off body.ui-scene-3d .hero-scene3d-fallback { display: block; }
html.scene3d-off body.ui-scene-3d #heroScene3d { display: none; }

body.ui-scene-3d #home .hero-layout {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex !important;
    align-items: flex-end;
    max-width: none;
    width: 100%;
    padding: 0 max(28px, 6vw) 12vh !important;
    pointer-events: none;
}
body.ui-scene-3d #home .hero-col--copy {
    width: min(580px, 100%) !important;
    max-width: 580px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: flex-end !important;
    display: flex !important;
    flex-direction: column;
    text-align: left !important;
    align-items: flex-start !important;
    pointer-events: auto;
}
body.ui-scene-3d #home .hero-col--copy > * { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
body.ui-scene-3d #home .hero-layout { justify-content: flex-start !important; height: auto !important; max-height: none !important; overflow: visible !important; }
body.ui-scene-3d #home .hero-welcome {
    font-family: var(--s3-caps);
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8a6420 !important;
}
body.ui-scene-3d #home .hero-brand,
body.ui-scene-3d #home .hero-brand * {
    font-family: var(--s3-serif) !important;
    font-weight: 700;
    color: var(--s3-emerald) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}
body.ui-scene-3d #home .hero-brand {
    font-size: clamp(54px, 7.6vw, 108px) !important;
    line-height: 0.92 !important;
    letter-spacing: -1px;
    margin: 6px 0 8px;
}
body.ui-scene-3d #home .hero-tagline,
body.ui-scene-3d #home .hero-tagline * {
    font-family: var(--s3-script) !important;
    font-size: clamp(30px, 3.6vw, 46px) !important;
    color: var(--s3-magenta) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
body.ui-scene-3d #home .hero-services-loop,
body.ui-scene-3d #home .hero-about,
body.ui-scene-3d #home .hero-about * {
    color: #2c3a32 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    max-width: 480px;
}
body.ui-scene-3d #home .hero-about { font-size: 16px; line-height: 1.65; }
body.ui-scene-3d #home .hero-btns { justify-content: flex-start !important; gap: 12px; }
body.ui-scene-3d #home .hero-cta-primary {
    background: var(--s3-emerald) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 28px -12px rgba(11, 61, 42, 0.65) !important;
}
body.ui-scene-3d #home .hero-cta-ghost {
    background: rgba(255, 255, 255, 0.4) !important;
    color: var(--s3-emerald) !important;
    border: 1.5px solid rgba(11, 61, 42, 0.45) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
}
body.ui-scene-3d #home::after {
    background: linear-gradient(180deg, rgba(251, 245, 236, 0) 0%, var(--s3-cream) 100%) !important;
    height: 90px !important;
    pointer-events: none;
}
body.ui-scene-3d .hero-dive {
    position: absolute;
    right: max(24px, 4vw);
    bottom: 10vh;
    z-index: 6;
    width: 230px;
    padding: 22px;
    border-radius: 20px;
    background: rgba(168, 50, 110, 0.84);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(108, 22, 64, 0.3);
    transition: transform 0.25s ease;
}
body.ui-scene-3d .hero-dive:hover { color: #fff; transform: translateY(-4px); }
body.ui-scene-3d .hero-dive b { display: block; font-size: 25px; line-height: 1.1; font-weight: 600; }
body.ui-scene-3d .hero-dive svg { display: block; margin: 26px 0 0 auto; animation: s3-bob 1.6s ease-in-out infinite; }
@keyframes s3-bob { 50% { transform: translateY(6px); } }

/* ---------- Navigation: glass pill ---------- */
body.ui-scene-3d .site-navbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.ui-scene-3d .site-navbar .navbar-nav {
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 30px rgba(11, 61, 42, 0.08);
}
body.ui-scene-3d .site-navbar .nav-link { color: var(--s3-ink) !important; font-weight: 600; border-radius: 10px; }
body.ui-scene-3d .site-navbar .nav-link:hover { background: rgba(255, 255, 255, 0.85); }
body.ui-scene-3d .site-navbar #navSiteName,
body.ui-scene-3d .app-header .app-title,
body.ui-scene-3d #navSiteName { font-family: var(--s3-serif); font-size: 26px; color: var(--s3-emerald) !important; }
body.ui-scene-3d #appHeaderTitle,
body.ui-scene-3d .app-header-title {
    font-family: var(--s3-serif) !important;
    font-size: 24px !important;
    color: var(--s3-emerald) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
body.ui-scene-3d .app-header-sub { color: var(--s3-gold) !important; text-shadow: none !important; }
body.ui-scene-3d .app-header {
    background: rgba(251, 245, 236, 0.82) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(234, 220, 194, 0.8);
}

/* ---------- Sections ---------- */
body.ui-scene-3d .app-section:not(#home) { background: var(--s3-cream); }
body.ui-scene-3d .app-section.section-alt:not(#home) { background: var(--s3-ivory); }
body.ui-scene-3d .section-head .section-label {
    font-family: var(--s3-caps);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--s3-gold) !important;
    background: none !important;
}
body.ui-scene-3d .section-head h2 {
    font-family: var(--s3-serif) !important;
    font-weight: 700;
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.02;
    color: var(--s3-emerald) !important;
}
body.ui-scene-3d .section-head .section-sub { color: var(--s3-muted); }

/* Studio numbers: dark emerald band with gold figures */
/* ---------- Seamless sections ----------
 * One continuous page background (no per-section colour blocks), emerald bands
 * feather in/out over --s3-feather so there is never a hard horizontal cut. */
body.ui-scene-3d {
    --s3-feather: 110px;
    background:
        radial-gradient(ellipse 70% 40% at 85% 18%, rgba(242, 207, 214, 0.45), transparent 70%),
        radial-gradient(ellipse 60% 35% at 10% 52%, rgba(226, 194, 122, 0.16), transparent 70%),
        radial-gradient(ellipse 70% 40% at 90% 78%, rgba(242, 207, 214, 0.35), transparent 70%),
        linear-gradient(180deg, #fbf5ec 0%, #f9efe4 30%, #f7ece6 55%, #f6ecdf 80%, #fbf5ec 100%) !important;
    background-attachment: scroll !important;
}
body.ui-scene-3d .app-section:not(#home),
body.ui-scene-3d .app-section.section-alt:not(#home),
body.ui-scene-3d .app-shell,
body.ui-scene-3d .site-content {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.ui-scene-3d #numbers.app-section.app-section.app-section {
    background: linear-gradient(180deg,
        rgba(11, 61, 42, 0) 0,
        var(--s3-emerald) var(--s3-feather),
        var(--s3-emerald) calc(100% - var(--s3-feather)),
        rgba(11, 61, 42, 0) 100%) !important;
    padding-top: calc(var(--s3-feather) + 8px) !important;
    padding-bottom: calc(var(--s3-feather) + 8px) !important;
}
body.ui-scene-3d #numbers .section-head h2,
body.ui-scene-3d #numbers .section-sub { color: #fbf5ec !important; }
body.ui-scene-3d #numbers .site-number-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #eef3ef;
}
body.ui-scene-3d #numbers .site-number-item * { color: inherit; }
body.ui-scene-3d #numbers .site-number-value,
body.ui-scene-3d #numbers .site-number-item strong { font-family: var(--s3-serif); color: var(--s3-gold-light) !important; }

/* Cards: white glass with layered, pressable depth */
body.ui-scene-3d .ne-tilt-card,
body.ui-scene-3d .h-card-service,
body.ui-scene-3d .service-card,
body.ui-scene-3d .h-scroll-wrap > *:not(.h-scroll-empty),
body.ui-scene-3d .h-card-why,
body.ui-scene-3d .h-card-review,
body.ui-scene-3d .homepage-shop-card,
body.ui-scene-3d .gallery-item,
body.ui-scene-3d .profile-card,
body.ui-scene-3d .faq-item,
body.ui-scene-3d .accordion-item {
    background: linear-gradient(180deg, #ffffff 0%, #fffcf7 100%) !important;
    border: 1px solid rgba(184, 145, 63, 0.16) !important;
    border-radius: 22px !important;
    /* Soft, layered ambient shadow — stays inside the carousels' padding so it never clips */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(11, 61, 42, 0.05),
        0 8px 18px -8px rgba(11, 61, 42, 0.16),
        0 20px 34px -18px rgba(11, 61, 42, 0.18) !important;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@media (hover: hover) {
    body.ui-scene-3d .h-card-service:hover,
    body.ui-scene-3d .h-scroll-wrap > *:not(.h-scroll-empty):hover,
    body.ui-scene-3d .h-card-why:hover,
    body.ui-scene-3d .h-card-review:hover,
    body.ui-scene-3d .homepage-shop-card:hover,
    body.ui-scene-3d .gallery-item:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 2px 4px rgba(11, 61, 42, 0.05),
            0 14px 24px -10px rgba(11, 61, 42, 0.2),
            0 26px 40px -20px rgba(11, 61, 42, 0.22) !important;
    }
}
/* Horizontal card rails: room for the shadow + feathered left/right edges instead of hard cuts */
body.ui-scene-3d .h-scroll-wrap {
    --h-shadow-pad-y: 22px;
    --h-shadow-pad-bottom: 46px;
    --h-shadow-pad-x: 18px;
    background: transparent !important;
}
body.ui-scene-3d .h-scroll-wrap.is-overflow {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
body.ui-scene-3d .h-card-why-icon {
    color: var(--s3-gold) !important;
    background: transparent !important;
    border: 1.5px solid var(--s3-gold);
    border-radius: 50%;
}
body.ui-scene-3d .h-card-why-title,
body.ui-scene-3d .h-card-review h3 { font-family: var(--s3-serif); font-size: 22px; color: var(--s3-emerald); }
body.ui-scene-3d .service-filter-btn {
    border-radius: 999px !important;
    border: 1.5px solid var(--s3-edge) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--s3-ink) !important;
    box-shadow: 0 6px 14px -8px rgba(11, 61, 42, 0.25) !important;
}
body.ui-scene-3d .service-filter-btn.active,
body.ui-scene-3d .service-filter-btn[aria-pressed="true"] {
    background: var(--s3-emerald) !important;
    border-color: var(--s3-emerald) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px -10px rgba(11, 61, 42, 0.6) !important;
}

/* Primary buttons site-wide inside sections */
body.ui-scene-3d .app-section:not(#home) .btn-primary,
body.ui-scene-3d .app-section:not(#home) .contact-form-jump {
    background: var(--s3-emerald) !important;
    border-color: var(--s3-emerald) !important;
    color: #fff !important;
    border-radius: 14px;
    box-shadow: 0 12px 24px -12px rgba(11, 61, 42, 0.6) !important;
}

/* Contact + social: emerald with gold — feathers in from the cream above, flows into the footer */
body.ui-scene-3d #contact.app-section {
    background: linear-gradient(180deg, rgba(11, 61, 42, 0) 0, var(--s3-emerald) var(--s3-feather), var(--s3-emerald) 100%) !important;
    padding-top: calc(var(--s3-feather) + 8px) !important;
    color: #eef3ef;
}
body.ui-scene-3d #contact .section-head h2,
body.ui-scene-3d #contact .section-sub,
body.ui-scene-3d #contact p,
body.ui-scene-3d #contact li { color: #eef3ef !important; }
body.ui-scene-3d #contact a:not(.btn) { color: var(--s3-gold-light) !important; }
body.ui-scene-3d #contact .contact-visit-grid :is(span, div, strong, small, dd, time):not(.btn):not([class*="icon"]) { color: #eef3ef; }
body.ui-scene-3d #contact.app-section .btn.btn-dark.contact-form-jump {
    background: var(--s3-gold-light) !important;
    border: 1.5px solid var(--s3-gold-light) !important;
    color: var(--s3-night) !important;
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.55) !important;
}
body.ui-scene-3d #contact.app-section .btn.btn-outline-dark.contact-form-jump {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(226, 194, 122, 0.6) !important;
    box-shadow: none !important;
}
body.ui-scene-3d #contact .contact-map-open-btn,
body.ui-scene-3d #contact .contact-map-open-btn * {
    color: var(--s3-emerald) !important;
    font-weight: 600;
}
body.ui-scene-3d #contact .contact-map-open-btn {
    border-radius: 14px !important;
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5) !important;
}
/* Buttons inside cards: soft lift instead of a hard dark edge */
body.ui-scene-3d .app-section:not(#home) .h-scroll-wrap .btn,
body.ui-scene-3d .app-section:not(#home) .service-card .btn {
    box-shadow: 0 8px 16px -10px rgba(11, 61, 42, 0.45) !important;
    border-radius: 12px !important;
}
body.ui-scene-3d #contact .section-label { color: var(--s3-gold-light) !important; }

/* Footer */
body.ui-scene-3d .site-footer {
    background: linear-gradient(180deg, var(--s3-emerald) 0%, #08301f 55%, #06261a 100%) !important;
    border-top: 0 !important;
    box-shadow: none !important;
    color: #dfe9e3;
}
body.ui-scene-3d .site-footer .footer-bottom,
body.ui-scene-3d .site-footer hr { border-color: rgba(226, 194, 122, 0.14) !important; }
body.ui-scene-3d .site-footer .footer-brand-name { font-family: var(--s3-serif); font-size: 26px; color: var(--s3-gold-light) !important; }
body.ui-scene-3d .site-footer a { color: #e9e0cf; }
body.ui-scene-3d .footer-brand-mark { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; }
body.ui-scene-3d .footer-brand-mark img { width: 48px; height: 48px; object-fit: contain; display: block; }
body.ui-scene-3d .nav-logo,
body.ui-scene-3d .app-logo-img { width: auto; filter: drop-shadow(0 4px 6px rgba(11, 61, 42, 0.25)); }

/* ---------- Small screens: props up top, copy below ---------- */
@media (max-width: 760px) {
    body.ui-scene-3d #home .hero-layout { padding: 0 18px 15vh !important; }
    body.ui-scene-3d #home .hero-about { display: none; }
    body.ui-scene-3d .hero-dive {
        left: 18px;
        right: auto;
        bottom: 3.5vh;
        width: auto;
        padding: 12px 16px;
        background: var(--s3-magenta);
        display: flex;
        gap: 12px;
        align-items: center;
    }
    body.ui-scene-3d .hero-dive b { font-size: 16px; }
    body.ui-scene-3d .hero-dive svg { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.ui-scene-3d .hero-dive svg { animation: none; }
    body.ui-scene-3d #heroScene3d { transition: none; }
}