/* home.css — Home page specific styles */

/* ── Base typography ── */
body { font-family: 'Manrope', sans-serif; background: #fef8f5; color: #1d1b1a; }
h1, h2, h3 { font-family: 'Noto Serif', serif; }
.font-serif { font-family: 'Noto Serif', serif; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── FAQ accordion ── */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease; }
.faq-item.open .faq-answer { max-height: 240px; }
.faq-icon { display: inline-block; transition: transform .3s ease; }
.faq-item.open .faq-icon { transform: rotate(180deg); }

/* ── Testimonial slider ── */
.t-track { display: flex; gap: 1.5rem; transition: transform .4s cubic-bezier(.4,0,.2,1); will-change: transform; }
/* Neutralise Tailwind min-w so JS can set explicit card widths */
.t-track > div { flex-shrink: 0; min-width: 0 !important; box-sizing: border-box; }

/* Dots — always visible (complement to buttons on mobile, decorative on desktop) */
#t-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.t-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: #cec5ba;
  border: none; padding: 0;
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.t-dot.t-dot-active { background: #7a5642; width: 18px; }

/* ── Smooth section scrolling offset for fixed nav ── */
section[id], div[id] { scroll-margin-top: 72px; }

/* ─────────────────────────────────────────────────
   SCROLL REVEAL
   Add .reveal (default: fade+up), .reveal-left, or
   .reveal-right to any element. JS adds .in.
   Control stagger with style="--d:120ms"
───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translate3d(0, 0, 0); }
.reveal-left {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal-right {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal-left.in, .reveal-right.in { opacity: 1; transform: translate3d(0, 0, 0); }

/* ── Parallax (--py set via JS) ── */
.parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ── Badge float ── */
@keyframes ns-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
.ns-float { animation: ns-float 5s ease-in-out infinite; }

/* ── Header: compact on scroll ── */
#site-header {
  transition: box-shadow .3s ease, background-color .3s ease;
}
#site-header.scrolled {
  background-color: rgba(255,255,255,.97) !important;
  box-shadow: 0 4px 20px -8px rgba(29,27,26,.16);
}
#site-header.scrolled nav {
  padding-top: .6rem;
  padding-bottom: .6rem;
  transition: padding .3s ease;
}

/* ── Card hover lift ── */
.lift {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease;
}
.lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px -22px rgba(29,27,26,.26);
}

/* ── Testimonial avatar — enforce circle on skeleton wrapper and img ── */
.t-avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  flex-shrink: 0;
  overflow: hidden; /* clips skeleton shimmer to circle */
}
.t-avatar img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
}

/* ── Skeleton loading ─────────────────────────────────────────────────────
   Usage: add .ns-skeleton to the direct parent of the <img>.
   JS adds .ns-loaded once the image finishes loading.
─────────────────────────────────────────────────────────────────────────── */
@keyframes ns-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ns-skeleton {
  position: relative;
  z-index: 0; /* creates stacking context → img z:1 stays inside, badge z:10 wins */
  overflow: hidden;
  background-color: #ede8e3;
}
.ns-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .42) 50%,
    transparent 100%
  );
  animation: ns-shimmer 1.6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.ns-skeleton > img {
  opacity: 0;
  transition: opacity .4s ease;
  position: relative;
  z-index: 1;
}
.ns-skeleton.ns-loaded > img {
  opacity: 1;
}
.ns-skeleton.ns-loaded::after {
  animation: none;
  display: none;
}

/* ── Reduced-motion: disable all animations ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .parallax { transform: none !important; }
  .ns-float  { animation: none !important; }
  .t-track   { transition: none !important; }
  .ns-skeleton::after    { animation: none !important; }
  .ns-skeleton > img     { opacity: 1 !important; transition: none !important; }
}