/* ===========================
   REMOVE EMPTY SPACE
   (sticky-footer fix: footer absorbs the leftover space itself,
   since these pages don't wrap content in a <main> tag — the old
   `main { flex: 1 }` rule had nothing to attach to, so the extra
   `min-height: 100vh` space was stranding itself after the footer
   instead of being absorbed before it.)
=========================== */

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 35px;
}

main {
    flex: 1;
}

/* =====================================================
   SINGLE SCROLLBAR FIX
   (html is the sole scroll owner; body stays overflow-y:visible,
   which by spec can NEVER draw a scrollbar, so wheel scrolling
   keeps working correctly.
   NOTE: overflow-y:scroll was tried here first to "reserve space
   permanently," but that forces the OS's full classic scrollbar
   gutter width (~17px on Windows) to be reserved BEFORE the
   ::-webkit-scrollbar {width:6px} rule below repaints it — the
   leftover ~11px of unstyled gutter showed up as a second dark
   strip next to the thin gold bar. overflow-y:auto lets the
   custom 6px style size the scrollbar directly, with no leftover
   native gutter space.)
===================================================== */

html {
    height: auto;
    overflow-y: auto;
}

body {
    height: auto;
    overflow-y: visible;
    /* body no longer scrolls at all — this does NOT hide content,
       it just stops body from being a second scroll owner;
       html shows everything via its own single scrollbar */
}

/* =====================================================
   LUXURY SCROLLBAR (Apple / Nike style — slim + unobtrusive)
   Applied once, globally, so every page shares the same bar
   instead of gallery.css's separate 12px version.
===================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 168, 76, .55) transparent;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, .55);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 168, 76, .85);
}

/* =====================================================
   LOTUS SPA
   Luxury Premium Theme
   Version 1.0
===================================================== */

:root {

    --black: #050505;
    --black-soft: #0b0b0b;
    --black-light: #141414;

    --gold: #C9A84C;
    --gold-light: #E2C26C;

    --white: #ffffff;
    --text: #d8d8d8;

    --transition: .45s cubic-bezier(.4, 0, .2, 1);

    --container: 1400px;

}

/* =====================================================
RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background: #050505;
    color: #fff;

    font-family: "Inter", sans-serif;

    overflow-x: hidden;

    position: relative;

}

/* =====================================================
CERAMIC BACKGROUND (PURE CSS)
===================================================== */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -20;

    background:

        radial-gradient(circle at 20% 0%,
            rgba(255, 255, 255, .05),
            transparent 35%),

        radial-gradient(circle at 80% 15%,
            rgba(255, 255, 255, .03),
            transparent 30%),

        radial-gradient(circle at 50% 100%,
            rgba(201, 168, 76, .04),
            transparent 45%),

        linear-gradient(180deg,
            #101010 0%,
            #080808 40%,
            #040404 100%);

}

/* glossy ceramic reflections */

body::after {

    content: "";

    position: fixed;

    inset: -20%;

    pointer-events: none;

    z-index: -19;

    opacity: .35;

    background:

        radial-gradient(ellipse at top,
            rgba(255, 255, 255, .09),
            transparent 42%),

        radial-gradient(ellipse at bottom left,
            rgba(255, 255, 255, .03),
            transparent 45%);

    filter: blur(45px);

}

/* ===================================================== */

img {

    display: block;

    max-width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

ul {

    list-style: none;

}

.container {

    width: min(92%, var(--container));

    margin: auto;

}

/* =====================================================
NAVBAR
===================================================== */

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border: none;
    box-shadow: none;

    transition: .35s ease;
}

#navbar.scrolled {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none;
}

#navbar.nav-hidden {

    transform: translateY(-100%);

}

.nav-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo img {

    width: 160px;

}

.nav-links {

    display: flex;

    gap: 42px;

}

.nav-links a {

    font-size: .92rem;

    text-transform: uppercase;

    letter-spacing: .08em;

    position: relative;

    transition: var(--transition);

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: .35s;

}

.nav-links a:hover {

    color: var(--gold);

}

.nav-links a:hover::after {

    width: 100%;

}

.nav-btn {

    padding: 15px 30px;

    border-radius: 999px;

    border: 1px solid rgba(201, 168, 76, .55);

    color: var(--gold);

    transition: var(--transition);

}

.nav-btn:hover {

    background: var(--gold);

    color: #000;

    transform: translateY(-2px);

}

#menu-btn {

    display: none;

}

/* =====================================================
HERO
===================================================== */

.hero {

    position: relative;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}

.hero video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -5;

}

/* ceramic dark overlay */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at top,
            rgba(255, 255, 255, .06),
            transparent 35%),

        radial-gradient(circle at bottom,
            rgba(201, 168, 76, .04),
            transparent 45%),

        linear-gradient(rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .72),
            rgba(0, 0, 0, .90));

}

/* moving glossy reflections */

.hero::before {

    content: "";

    position: absolute;

    inset: -25%;

    background:

        radial-gradient(circle,
            rgba(255, 255, 255, .10),
            transparent 35%);

    filter: blur(120px);

    animation: floatLight 12s ease-in-out infinite;

    opacity: .4;

}

.hero-content {

    position: relative;

    z-index: 5;

    width: min(900px, 90%);

    text-align: center;

}

.hero-small {

    display: block;

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: .35em;

    font-size: .82rem;

}

.hero h1 {

    margin: 18px 0;

    font-size: clamp(4rem, 9vw, 7.5rem);

    font-family: "Cormorant Garamond", serif;

    line-height: .88;

}

.hero-highlight {

    font-size: 1.2rem;

    color: #fff;

    margin-bottom: 18px;

}

.hero-description {

    color: var(--text);

    font-size: 1.1rem;

    line-height: 1.8;

}

.hero-buttons {

    margin-top: 55px;

    display: flex;

    justify-content: center;

    gap: 20px;

}

.gold-btn,
.outline-btn {

    padding: 18px 38px;

    border-radius: 999px;

    transition: var(--transition);

    font-weight: 600;

}

.gold-btn {

    background: var(--gold);

    color: #000;

}

.gold-btn:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(201, 168, 76, .30);

}

.outline-btn {

    border: 1px solid rgba(255, 255, 255, .25);

}

.outline-btn:hover {

    border-color: var(--gold);

    color: var(--gold);

}

.scroll-indicator {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    width: 28px;

    height: 46px;

    border-radius: 25px;

    border: 1px solid rgba(255, 255, 255, .25);

}

/* ==========================
   PAGE TRANSITION
========================== */

body {

    opacity: 0;

    animation: pageEnter .7s ease forwards;

}

@keyframes pageEnter {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

body.fade-out {

    opacity: 0;

    transition: .45s ease;

}