:root{
  --primary:#f7f3eb;
  --secondary:#d23f36;
  --tertiary:#503422;
  --quaternary:#b9a590;
}

*{ scroll-behavior:smooth; }

[x-cloak]{ display:none !important; }

html,body{
  font-family:'Playfair Display', serif;
  background-color:var(--primary);
  color:var(--tertiary);
  overflow-x: hidden;
}

/* ---------- Navbar ---------- */
#navbar{ transition:background 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease; }

.nav-gradient{
  background:linear-gradient(to bottom, rgba(185,165,144,0.95) 0%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(3px);
}

.nav-solid{
  background:var(--quaternary) !important;
  box-shadow:0 6px 24px rgba(80,52,34,0.15);
  backdrop-filter:blur(0px);
}

.nav-link{
  position:relative;
  padding-bottom:4px;
  color:var(--primary);
}

.nav-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1.5px;
  background:var(--primary);
  transition:width .35s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
  width:100%;
}

.dropdown-link{
  display:block;
  padding:0.65rem 1.4rem;
  font-size:0.92rem;
  color:var(--tertiary);
  letter-spacing:0.02em;
  transition:background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}
.dropdown-link:hover{
  background:rgba(185,165,144,0.22);
  color:var(--secondary);
  padding-left:1.8rem;
}

/* ---------- Buttons ---------- */
.btn-fill{
  background:var(--secondary);
  color:var(--primary);
  transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.btn-fill:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(210,63,54,0.35); }

.btn-outline{
  border:1.5px solid var(--primary);
  color:var(--primary);
  transition:all 0.3s ease;
}
.btn-outline:hover{ background:var(--primary); color:var(--tertiary); transform:translateY(-2px); }

.btn-outline-dark{
  border:1.5px solid var(--tertiary);
  color:var(--tertiary);
  transition:all 0.3s ease;
}
.btn-outline-dark:hover{ background:var(--tertiary); color:var(--primary); transform:translateY(-2px); }

/* ---------- Signature: viewfinder frame corners ---------- */
.frame-corners{ position:relative; }
.frame-corners::before,
.frame-corners::after,
.frame-corners .fc-tr,
.frame-corners .fc-bl{
  content:'';
  position:absolute;
  width:22px; height:22px;
  border:2px solid var(--primary);
  opacity:0;
  transition:opacity 0.4s ease, transform 0.4s ease;
  z-index:20;
  pointer-events:none;
}
.frame-corners::before{ top:10px; left:10px; border-right:none; border-bottom:none; transform:translate(-6px,-6px); }
.frame-corners::after{ bottom:10px; right:10px; border-left:none; border-top:none; transform:translate(6px,6px); }
.frame-corners .fc-tr{ top:10px; right:10px; border-left:none; border-bottom:none; transform:translate(6px,-6px); }
.frame-corners .fc-bl{ bottom:10px; left:10px; border-right:none; border-top:none; transform:translate(-6px,6px); }
.frame-corners:hover::before,
.frame-corners:hover::after,
.frame-corners:hover .fc-tr,
.frame-corners:hover .fc-bl{ opacity:1; transform:translate(0,0); }

.frame-corners-dark::before,
.frame-corners-dark::after,
.frame-corners-dark .fc-tr,
.frame-corners-dark .fc-bl{ border-color:var(--secondary); }

/* ---------- Scroll reveal ---------- */
[data-animate]{ opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease; }
[data-animate].in-view{ opacity:1; transform:translateY(0); }
[data-animate="fade"]{ transform:none; }
[data-animate="left"]{ transform:translateX(-40px); }
[data-animate="left"].in-view{ transform:translateX(0); }
[data-animate="right"]{ transform:translateX(40px); }
[data-animate="right"].in-view{ transform:translateX(0); }

/* stagger helper */
[data-delay="1"]{ transition-delay:0.12s; }
[data-delay="2"]{ transition-delay:0.24s; }
[data-delay="3"]{ transition-delay:0.36s; }
[data-delay="4"]{ transition-delay:0.48s; }
[data-delay="5"]{ transition-delay:0.60s; }

/* ---------- 3D ring/wheel gallery carousel ---------- */
/* Cells are planted at equal angles around a circle (JS sets each one's
   width + rotateY/translateZ), and the whole ring is spun with a single
   rotateY() via the Previous/Next buttons to bring different photos to
   the front — the scene clips with overflow:hidden so only the current
   window of cells (7 desktop / 5 tablet / 3 mobile) is ever visible. */
.carousel-scene{
  position:relative;
  width:100%;
  perspective:1400px;
  overflow:hidden;
}

.carousel-ring{
  position:absolute;
  pointer-events: none;
  top:0; left:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

.carousel-cell{
  position:absolute;
  top:50%;
  left:50%;
  aspect-ratio:9/16;
  pointer-events: auto;
  backface-visibility:hidden;
  cursor:pointer;
}

/* ---------- FAQ underline ---------- */
.faq-question{
  text-decoration-color:var(--quaternary);
  text-decoration-thickness:1px;
  text-underline-offset:8px;
}

/* ---------- Misc ---------- */
.text-shadow-soft{ text-shadow:0 4px 24px rgba(0,0,0,0.35); }

@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.float-anim{ animation:floatY 3.4s ease-in-out infinite; }

@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(210,63,54,0.45); }
  70%{ box-shadow:0 0 0 14px rgba(210,63,54,0); }
  100%{ box-shadow:0 0 0 0 rgba(210,63,54,0); }
}
.pulse-ring{ animation:pulseRing 2.4s infinite; }

/* Loader for count-up section divider line growth */
.grow-line{ width:0; transition:width 1.2s ease 0.2s; }
.grow-line.in-view{ width:100%; }

/* Marquee-esque underline accent under section eyebrows */
.eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  letter-spacing:0.28em; text-transform:uppercase; font-size:0.75rem;
  color:var(--secondary); font-family:'Playfair Display', serif; font-style:italic;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--secondary); display:inline-block; }