/* Silverwoods - Warm Luxury Glass Theme */
/* Inspired by Sol Haus: cream, warm brown, earthy tones */

:root {
    /* Light mode (cream/warm) */
    --bg-primary: #f5f0e8;
    --bg-secondary: #ece5d9;
    --bg-card: rgba(255, 255, 255, 0.5);
    --text-dark: #2a1f14;
    --text-body: #5c4a3a;
    --text-muted: #9a8a78;
    --accent: #8b6b4a;
    --accent-light: #c9a84c;
    --border-light: rgba(42, 31, 20, 0.08);
    --border-glass: rgba(42, 31, 20, 0.06);

    /* Shared */
    --gold: #c9a84c;
    --gold-light: #e8d48b;
    --gold-dark: #8b6b4a;
    --brown-deep: #3d2b1f;
    --brown-warm: #5c4a3a;
    --cream: #f5f0e8;
    --cream-dark: #ece5d9;
    --linen: #faf7f2;
}

/* Dark mode overrides */
.dark {
    --bg-primary: #0d0d0d;
    --bg-secondary: #161616;
    --bg-card: rgba(255, 255, 255, 0.03);
    --text-dark: #f5f0e8;
    --text-body: rgba(245, 240, 232, 0.6);
    --text-muted: rgba(245, 240, 232, 0.3);
    --accent: #c9a84c;
    --accent-light: #e8d48b;
    --border-light: rgba(255, 255, 255, 0.06);
    --border-glass: rgba(255, 255, 255, 0.04);
}

* { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
*::-webkit-scrollbar { width: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* ── Glass Cards ── */
.glass {
    background: var(--bg-card);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-glass);
}
.dark .glass {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
.glass-warm {
    background: rgba(245, 240, 232, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(42, 31, 20, 0.06);
}
.dark .glass-warm {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.06);
}

.glass-hover { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.glass-hover:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 40px rgba(139, 107, 74, 0.08);
}
.dark .glass-hover:hover {
    border-color: rgba(201, 168, 76, 0.3);
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.05);
}

/* ── Text Gradients ── */
.text-gradient-gold {
    background: linear-gradient(135deg, #c9a84c, #8b6b4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Gold underline link (Sol Haus style) ── */
.link-underline {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--text-dark);
    padding-bottom: 0.25rem;
    transition: all 0.4s;
}
.link-underline:hover { border-color: var(--accent); color: var(--accent); }

/* ── Nav Links ── */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
    margin: 0 1rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-body);
    text-decoration: none;
    transition: color 0.3s;
}
.nav-link:hover,
.nav-link.active { color: var(--accent); }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { width: 100%; }

/* ── Section Reveal ── */
.section-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero Animations ── */
.hero-badge { opacity: 0; transform: translateY(30px); }
.hero-title { opacity: 0; transform: translateY(50px); }
.hero-subtitle { opacity: 0; transform: translateY(30px); }
.hero-desc { opacity: 0; transform: translateY(20px); }
.hero-buttons { opacity: 0; transform: translateY(20px); }

.hero-badge.animated { animation: fadeSlideUp 1.2s 0.3s forwards cubic-bezier(0.16,1,0.3,1); }
.hero-title.animated { animation: fadeSlideUp 1.2s 0.6s forwards cubic-bezier(0.16,1,0.3,1); }
.hero-subtitle.animated { animation: fadeSlideUp 1.2s 0.9s forwards cubic-bezier(0.16,1,0.3,1); }
.hero-desc.animated { animation: fadeSlideUp 1.2s 1.1s forwards cubic-bezier(0.16,1,0.3,1); }
.hero-buttons.animated { animation: fadeSlideUp 1.2s 1.3s forwards cubic-bezier(0.16,1,0.3,1); }

@keyframes fadeSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Stat Counter ── */
.stat-item { opacity: 0; transform: translateY(20px); }
.stat-item.animated { animation: fadeSlideUp 0.8s forwards cubic-bezier(0.16,1,0.3,1); }

/* ── Amenity/Pricing Cards ── */
.amenity-card, .pricing-card {
    opacity: 0;
    transform: translateY(40px);
}
.amenity-card.revealed, .pricing-card.revealed {
    animation: fadeSlideUp 0.8s forwards cubic-bezier(0.16,1,0.3,1);
}

/* ── Amenity Flip Cards ── */
.amenity-flip-card {
    perspective: 1000px;
    height: 220px;
    cursor: pointer;
}
.amenity-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.amenity-flip-card:hover .amenity-flip-inner {
    transform: rotateY(180deg);
}
.amenity-flip-front,
.amenity-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.amenity-flip-front {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.amenity-flip-back {
    transform: rotateY(180deg);
    background: #1a0e04;
}
.amenity-flip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.amenity-flip-card:hover .amenity-flip-img {
    transform: scale(1.04);
}
.amenity-flip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,8,2,0.88) 0%, rgba(15,8,2,0.35) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
}

/* ── Water drop menu icon ── */
#drop-body       { fill: url(#dropGradLight); }
.dark #drop-body { fill: url(#dropGradDark); }

#menu-lines line { stroke: #ffffff; opacity: 0.85; }


/* ── Lamp colors (light / dark theme) ── */
#lamp-shade     { fill: url(#shadeGradLight); }
#lamp-base-body { fill: url(#baseGradLight); }
#shade-top-rim  { fill: #a06810; }
#shade-bot-rim  { fill: #6b3c02; }
#lamp-stem      { fill: #6b3c02; }
#lamp-base-top  { fill: #a06810; }
#lamp-base-bot  { fill: #4a2c04; }

.dark #lamp-shade     { fill: url(#shadeGradDark); }
.dark #lamp-base-body { fill: url(#baseGradDark); }
.dark #shade-top-rim  { fill: #d49018; }
.dark #shade-bot-rim  { fill: #8a5508; }
.dark #lamp-stem      { fill: #8a5508; }
.dark #lamp-base-top  { fill: #d49018; }
.dark #lamp-base-bot  { fill: #2e1600; }

/* ── Lamp Rope & Knob theme colors ── */
#cord-rope {
    stroke: #7a5520;
    opacity: 0.65;
}
.dark #cord-rope {
    stroke: #c98010;
    opacity: 0.90;
}
#knob-body {
    fill: #5c3a18;
}
.dark #knob-body {
    fill: #b07010;
}

/* ── Lamp Tooltips (Menu / Pull Down) ── */
#menu-tooltip-box,
#pull-tooltip-box {
    background: rgba(245,240,232,0.96);
    color: #5c4a3a;
    border: 1px solid rgba(42,31,20,0.12);
    box-shadow: 0 4px 14px rgba(42,31,20,0.18);
}
#menu-tooltip-arrow,
#pull-tooltip-arrow {
    border-left: 10px solid rgba(245,240,232,0.96);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.dark #menu-tooltip-box,
.dark #pull-tooltip-box {
    background: rgba(13,13,13,0.92);
    color: #c9a84c;
    border: 1px solid rgba(201,168,76,0.22);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.dark #menu-tooltip-arrow,
.dark #pull-tooltip-arrow {
    border-left-color: rgba(13,13,13,0.92);
}

/* ── Divider ── */
.divider {
    height: 1px;
    background: var(--border-light);
}
.dark .divider { background: rgba(255,255,255,0.06); }

/* ── Marquee text (Sol Haus style) ── */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

/* ── Button styles ── */
@media (max-width: 639px) {
    .btn-primary, .btn-outline {
        padding: 0.75rem 1.25rem;
        letter-spacing: 0.1em;
    }
}
.btn-primary {
    background: var(--brown-deep);
    color: var(--cream);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border: none;
    transition: all 0.4s;
}
.dark .btn-primary { background: var(--gold); color: #0d0d0d; }
.btn-primary:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(139, 107, 74, 0.2);
}
.dark .btn-primary:hover { box-shadow: 0 8px 30px rgba(201, 168, 76, 0.25); }

.btn-outline {
    background: transparent;
    color: var(--text-dark);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border: 1px solid var(--border-light);
    transition: all 0.4s;
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Swash capitals (Sol Haus style decorative first letter) ── */
.swash { font-style: italic; }

/* ── Ambient grain ── */
.grain::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.015;
    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.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Smooth focus ── */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(139, 107, 74, 0.08);
}
.dark input:focus, .dark textarea:focus, .dark select:focus {
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08);
}

/* ── Pull Cord (SVG lamp) ── */
#pull-cord-container { pointer-events: none; }
#cord-knob-group {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#cord-knob-group:active { cursor: grabbing; }
/* Glow filter for the knob */
#lamp-svg { filter: drop-shadow(0 4px 12px rgba(139,107,74,0.15)); }
.dark #lamp-svg { filter: drop-shadow(0 4px 20px rgba(201,168,76,0.18)); }

/* ── Print ── */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { background: white !important; }
}

/* ── Smooth transitions ── */
a, button { transition: all 0.3s ease; }
/* ── Liquid Mercury Menu Button ── */
@keyframes liquidWobble {
  0%,100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  25%      { border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%; }
  50%      { border-radius: 45% 55% 60% 40% / 45% 55% 45% 55%; }
  75%      { border-radius: 55% 45% 40% 60% / 55% 45% 55% 45%; }
}
@keyframes liquidGlow {
  0%,100% { box-shadow: 0 0 18px 4px rgba(201,168,76,0.45), 0 0 40px 8px rgba(201,168,76,0.2); }
  50%      { box-shadow: 0 0 28px 8px rgba(201,168,76,0.65), 0 0 60px 16px rgba(201,168,76,0.3); }
}

.liquid-drop-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55) 0%, rgba(200,180,150,0.25) 40%, rgba(139,107,74,0.35) 100%);
    border: 1.5px solid rgba(139,107,74,0.25);
    color: #3d2b1f;
    cursor: pointer;
    animation: liquidWobble 4s ease-in-out infinite;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(139,107,74,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    outline: none;
}
.dark .liquid-drop-btn {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.12) 0%, rgba(201,168,76,0.08) 40%, rgba(30,20,10,0.6) 100%);
    border-color: rgba(201,168,76,0.3);
    color: #e8d48b;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(201,168,76,0.2);
}
.liquid-drop-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(139,107,74,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.dark .liquid-drop-btn:hover {
    box-shadow: 0 6px 28px rgba(201,168,76,0.3), inset 0 1px 0 rgba(201,168,76,0.25);
}
.liquid-drop-btn.menu-open {
    animation: liquidWobble 1.5s ease-in-out infinite;
    transform: scale(1.06);
}

/* Liquid shine highlight */
.liquid-shine {
    position: absolute;
    top: 20%;
    left: 22%;
    width: 38%;
    height: 22%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(-20deg);
}

/* Liquid dropdown */
.liquid-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: -8px;
    min-width: 140px;
    background: rgba(245,240,232,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(139,107,74,0.12);
    border-radius: 16px;
    padding: 8px 0;
    box-shadow: 0 16px 48px rgba(42,31,20,0.15), 0 4px 12px rgba(42,31,20,0.08);
    z-index: 100;
}
.dark .liquid-dropdown {
    background: rgba(22,18,12,0.92);
    border-color: rgba(201,168,76,0.12);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
}
.liquid-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #5c4a3a;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}
.dark .liquid-menu-item { color: #c9b99e; }
.liquid-menu-item:hover {
    color: #3d2b1f;
    background: rgba(139,107,74,0.08);
}
.dark .liquid-menu-item:hover {
    color: #e8d48b;
    background: rgba(201,168,76,0.08);
}
.liquid-divider {
    height: 1px;
    margin: 2px 14px;
    background: rgba(139,107,74,0.1);
}
.dark .liquid-divider { background: rgba(201,168,76,0.1); }

/* Glow in dark mode when rope is pulled */
.dark .liquid-drop-btn.glowing {
    animation: liquidWobble 4s ease-in-out infinite, liquidGlow 1.2s ease-in-out infinite;
}


/* ── Liquid Lamp Menu Items ── */
.ldi-item {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #5c4a3a;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}
.ldi-item:hover { color: #3d2b1f; background: rgba(139,107,74,0.08); border-radius: 8px; }
.ldi-icon { font-size: 9px; margin-right: 8px; opacity: 0.6; }
.ldi-sep  { height: 1px; margin: 2px 14px; background: rgba(139,107,74,0.1); }

/* ── Speech Bubble (fixed, left of sphere) ── */
.ldi-bubble {
    position: absolute;
    top: 8px;
    right: 68px;        /* left of the sphere */
    z-index: 200;
    pointer-events: auto;
}
.ldi-bubble-inner {
    background: #f5f0e8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(139,107,74,0.15);
    border-radius: 18px;
    padding: 8px 4px;
    min-width: 155px;
    box-shadow: 0 8px 32px rgba(42,31,20,0.2), 0 2px 8px rgba(42,31,20,0.1);
}
/* Right-pointing tail toward sphere */
.ldi-tail {
    position: absolute;
    right: -11px;
    top: 16px;
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 12px solid rgba(245,240,232,0.97);
}
/* Dark mode */
.dark .ldi-bubble-inner {
    background: rgba(12,8,2,0.96);
    border-color: rgba(201,168,76,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.dark .ldi-tail          { border-left-color: rgba(12,8,2,0.96); }
.dark .ldi-item          { color: #c9b090; }
.dark .ldi-item:hover    { color: #e8d48b; background: rgba(201,168,76,0.08); }
.dark .ldi-sep           { background: rgba(201,168,76,0.12); }

@keyframes bubblePop {
    from { opacity:0; transform: scale(0.8); }
    to   { opacity:1; transform: scale(1); }
}
.ldi-bubble[style*="block"] {
    animation: bubblePop 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
    transform-origin: right center;
}

/* Water drop border ring */
#drop-border-ring               { stroke: none; stroke-width: 0; }
.dark #drop-border-ring         { stroke: #c9a84c; stroke-width: 2; opacity: 0.5; }
/* drop-outer-glow opacity controlled exclusively by JS setVisuals() to avoid flash on load */

/* ── Thought cloud menu ── */
#liquid-drop-menu {
    background: #faf7f2;
    filter: drop-shadow(0 0 1.5px rgba(139,107,74,0.30)) drop-shadow(0 8px 22px rgba(61,43,31,0.20));
}
.dark #liquid-drop-menu {
    background: #1e1710;
    filter: drop-shadow(0 0 1.5px rgba(201,168,76,0.30)) drop-shadow(0 8px 22px rgba(0,0,0,0.50));
}

#cloud-shimmer {
    background: rgba(255,255,255,0.45);
}
.dark #cloud-shimmer {
    background: rgba(255,255,255,0.06);
}

.cloud-link {
    color: #5c4a3a;
}
.dark .cloud-link {
    color: #c9b090;
}
.cloud-icon {
    color: #8b6b4a;
}
.dark .cloud-icon {
    color: #c9a84c;
}
.cloud-sep {
    background: rgba(139,107,74,0.15);
}
.dark .cloud-sep {
    background: rgba(201,168,76,0.15);
}

#cloud-dot1, #cloud-dot2, #cloud-dot3, #cloud-dot4 {
    background: #faf7f2;
    border: 1px solid rgba(139,107,74,0.25);
    box-shadow: 0 2px 6px rgba(61,43,31,0.18);
}
.dark #cloud-dot1, .dark #cloud-dot2, .dark #cloud-dot3, .dark #cloud-dot4 {
    background: #1e1710;
    border: 1px solid rgba(201,168,76,0.30);
    box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}