@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root{
  --color-bg:        #0B0907;
  --color-bg-soft:   #15110D;
  --color-surface:   #1C1714;
  --color-border:    #2E2722;
  --color-ivory:     #F3EEE4;
  --color-muted:     #A89F90;
  --color-gold:      #C9A227;
  --color-gold-light:#E4C566;
  --color-wine:      #3B0F0F;
  --ease-luxe: cubic-bezier(.22,.61,.36,1);
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior: smooth; }

body{
  background-color: var(--color-bg);
  color: var(--color-ivory);
  font-family: 'Karla', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--color-gold); color: #0B0907; }

::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--color-bg); }
::-webkit-scrollbar-thumb{ background: var(--color-border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover{ background: var(--color-gold); }

.font-display{ font-family: 'Playfair Display', serif; }

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* ---------- Gold underline grow-on-hover ---------- */
.link-underline{ position: relative; display: inline-block; }
.link-underline::after{
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--color-gold);
  transition: width .35s var(--ease-luxe);
}
.link-underline:hover::after,
.link-underline:focus-visible::after{ width: 100%; }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-luxe), transform .9s var(--ease-luxe);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.reveal-fade{ opacity: 0; transition: opacity 1.1s var(--ease-luxe); }
.reveal-fade.is-visible{ opacity: 1; }

.reveal-scale{
  opacity: 0;
  transform: scale(.94);
  transition: opacity .9s var(--ease-luxe), transform .9s var(--ease-luxe);
}
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }

.reveal-line{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-luxe);
}
.reveal-line.is-visible{ transform: scaleX(1); }

/* staggered children */
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-luxe), transform .8s var(--ease-luxe);
}
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .55s; }

/* ---------- Hero Ken Burns ---------- */
.kenburns{
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* ---------- Hero text entrance ---------- */
.hero-in{
  opacity: 0;
  transform: translateY(36px);
  animation: heroIn 1.2s var(--ease-luxe) forwards;
}
@keyframes heroIn{ to{ opacity: 1; transform: translateY(0); } }

/* ---------- Navbar ---------- */
#navbar{
  transition: background-color .5s var(--ease-luxe), backdrop-filter .5s var(--ease-luxe), padding .4s var(--ease-luxe), border-color .5s var(--ease-luxe);
}
#navbar.scrolled{
  background-color: rgba(11,9,7,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Mobile menu ---------- */
#mobile-menu{
  transform: translateX(100%);
  transition: transform .5s var(--ease-luxe);
}
#mobile-menu.open{ transform: translateX(0); }

/* ---------- Buttons ---------- */
.btn-gold{
  background: var(--color-gold);
  color: #0B0907;
  transition: background-color .3s var(--ease-luxe), transform .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe);
}
.btn-gold:hover{
  background: var(--color-gold-light);
  box-shadow: 0 8px 30px -8px rgba(201,162,39,.55);
}
.btn-gold:active{ transform: scale(.97); }

.btn-outline{
  border: 1px solid rgba(243,238,228,.35);
  transition: border-color .3s var(--ease-luxe), background-color .3s var(--ease-luxe);
}
.btn-outline:hover{
  border-color: var(--color-gold);
  background-color: rgba(201,162,39,.08);
}

/* ---------- Cards ---------- */
.card-lift{
  transition: transform .5s var(--ease-luxe), box-shadow .5s var(--ease-luxe), border-color .5s var(--ease-luxe);
}
.card-lift:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 45px -20px rgba(0,0,0,.65);
  border-color: var(--color-gold);
}

.img-zoom{ overflow: hidden; }
.img-zoom img{ transition: transform .8s var(--ease-luxe), filter .8s var(--ease-luxe); }
.img-zoom:hover img{ transform: scale(1.08); }

/* ---------- Divider ornament ---------- */
.ornament{ display: flex; align-items: center; gap: .75rem; }
.ornament::before, .ornament::after{
  content: '';
  height: 1px; width: 2.5rem;
  background: var(--color-gold);
  opacity: .6;
}

/* ---------- Marquee press strip ---------- */
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Accordion ---------- */
.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-luxe);
}
.accordion-icon{ transition: transform .4s var(--ease-luxe); }
.accordion-item.open .accordion-icon{ transform: rotate(45deg); }

/* ---------- Lightbox ---------- */
#lightbox{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-luxe);
}
#lightbox.open{ opacity: 1; pointer-events: auto; }
#lightbox img{
  transform: scale(.92);
  transition: transform .4s var(--ease-luxe);
}
#lightbox.open img{ transform: scale(1); }

/* ---------- Skeleton / image fade-in on load ---------- */
img.lazy-img{ opacity: 0; transition: opacity .6s var(--ease-luxe); background: var(--color-surface); }
img.lazy-img.loaded{ opacity: 1; }

/* ---------- Form success check ---------- */
.success-pop{ animation: successPop .5s var(--ease-luxe); }
@keyframes successPop{
  0%{ opacity: 0; transform: scale(.9); }
  100%{ opacity: 1; transform: scale(1); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .kenburns{ animation: none; }
  .reveal, .reveal-fade, .reveal-scale, .reveal-line, .reveal-stagger > *{
    opacity: 1 !important; transform: none !important;
  }
}