:root {
  --ink: #0b0906;
  --coal: #14100a;
  --ember: #d9a441;
  --flame: #e8b54d;
  --cream: #f3e9d2;
  --ash: #a4937a;
}

html {
  background: var(--ink);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.font-serif-display {
  font-family: 'Cormorant Garamond', serif;
}

::selection {
  background: rgba(217, 164, 65, 0.35);
  color: #fff8e7;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0b0906;
}
::-webkit-scrollbar-thumb {
  background: #2c2314;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4a3a1e;
}

/* ---------- grain overlay ---------- */
.grain::after {
  content: '';
  position: fixed;
  inset: -100%;
  z-index: 90;
  pointer-events: none;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain-shift 0.9s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ---------- text reveal ---------- */
.reveal-line {
  display: block;
  overflow: hidden;
}
.reveal-line > span {
  display: block;
  transform: translateY(110%);
}

/* ---------- marquee ---------- */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee-x 36s linear infinite;
}

/* ---------- flame glow ---------- */
@keyframes flicker {
  0%, 100% { opacity: 1; transform: scale(1) translateY(0); }
  20% { opacity: 0.86; transform: scale(0.97, 1.03) translateY(-1px); }
  40% { opacity: 0.95; transform: scale(1.02, 0.98) translateY(0.5px); }
  60% { opacity: 0.82; transform: scale(0.98, 1.04) translateY(-1.5px); }
  80% { opacity: 0.93; transform: scale(1.01, 0.99) translateY(0); }
}
.animate-flicker {
  animation: flicker 2.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}
.animate-glow {
  animation: glow-pulse 3.2s ease-in-out infinite;
}

/* ---------- link underline ---------- */
.link-flame {
  position: relative;
}
.link-flame::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.link-flame:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- outlined text ---------- */
.text-stroke {
  -webkit-text-stroke: 1px rgba(243, 233, 210, 0.28);
  color: transparent;
}

/* ---------- scroll line ---------- */
@keyframes dropline {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.animate-dropline {
  animation: dropline 2s ease-in-out infinite;
}

/* ---------- gallery ---------- */
.gallery-item img {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}
.gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.08);
}

/* ---------- preloader ---------- */
#preloader {
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
#preloader.hide {
  transform: translateY(-100%);
}
.preloader-flame,
.preloader-halo,
.preloader-body {
  opacity: 0;
}
.preloader-halo { transform: scale(0); }
.preloader-body { transform: scaleY(0); transform-origin: bottom; }
.preloader-label { opacity: 0; letter-spacing: 0.2em; }
#preloader.ready .preloader-halo,
#preloader.ready .preloader-flame { opacity: 1; transform: scale(1); }
#preloader.ready .preloader-body { opacity: 1; transform: scaleY(1); }
#preloader.ready .preloader-label { opacity: 1; letter-spacing: 0.5em; }
.preloader-halo { transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; }
.preloader-flame { transition: opacity 0.6s ease 0.4s; }
.preloader-body { transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s; }
.preloader-label { transition: opacity 1.4s ease 0.9s, letter-spacing 1.4s ease 0.9s; }

/* ---------- navbar ---------- */
#navbar {
  transform: translateY(-80px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 2.6s, opacity 1s ease 2.6s, background-color 0.5s ease, padding 0.5s ease, border-color 0.5s ease;
}
#navbar.ready {
  transform: translateY(0);
  opacity: 1;
}
#navbar.scrolled {
  background-color: rgba(11, 9, 6, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#navbar:not(.scrolled) {
  background-color: transparent;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.burger-line { transition: transform 0.3s ease; }
#burger.open .burger-line-1 { transform: translateY(3.5px) rotate(45deg); }
#burger.open .burger-line-2 { transform: translateY(-3.5px) rotate(-45deg); }

#mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
#mobile-menu .mm-link {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#mobile-menu.open .mm-link {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- cta / navbar button hover fill ---------- */
.fill-hover span.fill-bg {
  transform: translateY(100%);
  transition: transform 0.5s ease-out;
}
.fill-hover:hover span.fill-bg {
  transform: translateY(0);
}

/* ---------- lightbox ---------- */
#lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
#lightbox img {
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
#lightbox.open img {
  transform: scale(1);
  opacity: 1;
}