:root {
  --color-on-error-container: #ffdad6;
  --color-on-error: #690005;
  --color-secondary-fixed-dim: #c8c8b0;
  --color-on-tertiary-fixed-variant: #474646;
  --color-inverse-primary: #735c00;
  --color-inverse-surface: #e5e2e1;
  --color-surface: #ffffff;
  --color-on-primary: #ffffff;
  --color-secondary: #c8c8b0;
  --color-on-tertiary: #313030;
  --color-on-secondary: #303221;
  --color-on-primary-fixed-variant: #574500;
  --color-surface-tint: #e9c349;
  --color-outline: #99907c;
  --color-surface-bright: #393939;
  --color-on-secondary-container: #b9baa3;
  --color-primary-fixed: #ffe088;
  --color-background: #f8f8f8;
  --color-on-surface-variant: #4a4a4a;
  --color-surface-container-lowest: #ffffff;
  --color-on-tertiary-fixed: #1c1b1b;
  --color-error: #ffb4ab;
  --color-tertiary-container: #b5b2b2;
  --color-secondary-fixed: #e4e4cc;
  --color-surface-variant: #353534;
  --color-primary-container: #e6c86a;
  --color-tertiary-fixed-dim: #c9c6c5;
  --color-inverse-on-surface: #313030;
  --color-error-container: #93000a;
  --color-on-tertiary-container: #464545;
  --color-on-primary-container: #554300;
  --color-tertiary-fixed: #e5e2e1;
  --color-secondary-container: #494a38;
  --color-surface-container-highest: #e0e0e0;
  --color-surface-container-high: #e8e8e8;
  --color-on-primary-fixed: #241a00;
  --color-on-surface: #131313;
  --color-on-secondary-fixed-variant: #474836;
  --color-surface-dim: #131313;
  --color-surface-container-low: #f3f3f3;
  --color-primary-fixed-dim: #e9c349;
  --color-on-secondary-fixed: #1b1d0e;
  --color-tertiary: #d0cecd;
  --color-surface-container: #eeeeee;
  --color-primary: #c9a227;
  --color-outline-variant: #d0c5af;
  --color-on-background: #131313;
}

.dark {
  --color-on-error-container: #ffdad6;
  --color-on-error: #690005;
  --color-secondary-fixed-dim: #c8c8b0;
  --color-on-tertiary-fixed-variant: #474646;
  --color-inverse-primary: #735c00;
  --color-inverse-surface: #e5e2e1;
  --color-surface: #131313;
  --color-on-primary: #3c2f00;
  --color-secondary: #c8c8b0;
  --color-on-tertiary: #313030;
  --color-on-secondary: #303221;
  --color-on-primary-fixed-variant: #574500;
  --color-surface-tint: #e9c349;
  --color-outline: #99907c;
  --color-surface-bright: #393939;
  --color-on-secondary-container: #b9baa3;
  --color-primary-fixed: #ffe088;
  --color-background: #131313;
  --color-on-surface-variant: #d0c5af;
  --color-surface-container-lowest: #0e0e0e;
  --color-on-tertiary-fixed: #1c1b1b;
  --color-error: #ffb4ab;
  --color-tertiary-container: #b5b2b2;
  --color-secondary-fixed: #e4e4cc;
  --color-surface-variant: #353534;
  --color-primary-container: #d4af37;
  --color-tertiary-fixed-dim: #c9c6c5;
  --color-inverse-on-surface: #313030;
  --color-error-container: #93000a;
  --color-on-tertiary-container: #464545;
  --color-on-primary-container: #554300;
  --color-tertiary-fixed: #e5e2e1;
  --color-secondary-container: #494a38;
  --color-surface-container-highest: #353534;
  --color-surface-container-high: #2a2a2a;
  --color-on-primary-fixed: #241a00;
  --color-on-surface: #e5e2e1;
  --color-on-secondary-fixed-variant: #474836;
  --color-surface-dim: #131313;
  --color-surface-container-low: #1c1b1b;
  --color-primary-fixed-dim: #e9c349;
  --color-on-secondary-fixed: #1b1d0e;
  --color-tertiary: #d0cecd;
  --color-surface-container: #201f1f;
  --color-primary: #f2ca50;
  --color-outline-variant: #4d4635;
  --color-on-background: #e5e2e1;
}

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Space+Grotesk:wght@300..700&family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
body {
    background-color: var(--color-background);
    color: var(--color-on-background);
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0e0e0e; 
}
::-webkit-scrollbar-thumb {
    background: #353534; 
}
::-webkit-scrollbar-thumb:hover {
    background: #f2ca50; 
}

/* Hide scrollbar for neat sections but allow scroll */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Signature Animation */
@keyframes signature-reveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}

.animate-signature {
  animation: signature-reveal 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Slideshow Crossfade Animation (4 Images, 20s total) */
@keyframes crossfade {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}

.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: crossfade 20s infinite linear;
}

.slideshow-image:nth-child(1) { animation-delay: 0s; }
.slideshow-image:nth-child(2) { animation-delay: 5s; }
.slideshow-image:nth-child(3) { animation-delay: 10s; }
.slideshow-image:nth-child(4) { animation-delay: 15s; }

/* Slideshow Crossfade Animation (6 Images, 30s total) */
@keyframes crossfade-6 {
  0%   { opacity: 0; transform: scale(1); }
  3.33% { opacity: 1; }
  16.66% { opacity: 1; }
  20%   { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}

.slideshow-6-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: crossfade-6 30s infinite linear;
}

.slideshow-6-image:nth-child(1) { animation-delay: 0s; }
.slideshow-6-image:nth-child(2) { animation-delay: 5s; }
.slideshow-6-image:nth-child(3) { animation-delay: 10s; }
.slideshow-6-image:nth-child(4) { animation-delay: 15s; }
.slideshow-6-image:nth-child(5) { animation-delay: 20s; }
.slideshow-6-image:nth-child(6) { animation-delay: 25s; }

/* Slideshow Dots Styling */
.slideshow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  transition: all 0.5s ease;
  cursor: pointer;
}

.slideshow-dot.active {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.5);
  box-shadow: 0 0 10px var(--primary);
}

/* Menu Slideshow specific styles (6 images overlapping) */
.menu-slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: crossfadeMenu 30s infinite linear;
}

@keyframes crossfadeMenu {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  16%  { opacity: 1; }
  21%  { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}

.menu-slideshow-image:nth-child(2) { animation-delay: 0s; } /* skipping child 1 since it's the mobile overlay div */
.menu-slideshow-image:nth-child(3) { animation-delay: 5s; }
.menu-slideshow-image:nth-child(4) { animation-delay: 10s; }
.menu-slideshow-image:nth-child(5) { animation-delay: 15s; }
.menu-slideshow-image:nth-child(6) { animation-delay: 20s; }
.menu-slideshow-image:nth-child(7) { animation-delay: 25s; }

/* Hamburger cross states */
#hamburgerBtn.is-open span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}
#hamburgerBtn.is-open span:nth-child(2) {
  opacity: 0;
}
#hamburgerBtn.is-open span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
  width: 2rem;
  margin-right: 0;
}

/* Marquee / Ticker Animation for Testimonials */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1rem)); }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Scroll Revealing Utility Classes */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* Hide vertical text strictly if needed */
.writing-vertical-rl {
  writing-mode: vertical-rl;
}

/* Wiggle Peek Animation for Side Tab */
@keyframes peek-and-wiggle {
  0%, 90% { transform: translate(5px, -50%); }
  92% { transform: translate(-2px, -50%); }
  94% { transform: translate(2px, -50%); }
  96% { transform: translate(-2px, -50%); }
  98% { transform: translate(0px, -50%); }
  100% { transform: translate(5px, -50%); }
}

.animate-wiggle-peek {
  animation: peek-and-wiggle 10s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
/* Cinematic Pre-loader Curtain */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s;
}

#preloader-logo.animate-preloader-signature {
    width: 220px;
    height: auto;
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.05));
    animation: signature-reveal 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes signature-reveal {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        opacity: 0;
        transform: scale(0.98);
    }
    10% {
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes loading-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}