/* ================================================================
   MINDFUL TRIBE INDIA  —  CINEMATIC LUXURY LAYER
   ================================================================ */

/* ── PAGE ENTRANCE VEIL ─────────────────────────────────────────── */
#lux-veil {
  position: fixed;
  inset: 0;
  background: #0d0b08;
  z-index: 999900;
  pointer-events: none;
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
#lux-veil.lux-loaded { opacity: 0; }

/* ── FILM GRAIN ──────────────────────────────────────────────────── */
#lux-grain {
  position: fixed;
  inset: -60%;
  width: 220%;
  height: 220%;
  z-index: 99990;
  pointer-events: none;
  opacity: 0.036;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: lux-grain-move 0.22s steps(1) infinite;
  will-change: transform;
}
@keyframes lux-grain-move {
  0%   { transform: translate(0,    0);   }
  25%  { transform: translate(-2%, -3%);  }
  50%  { transform: translate( 3%,  1%);  }
  75%  { transform: translate(-1%,  3%);  }
  100% { transform: translate( 2%, -2%);  }
}

/* ── NAV: SCROLLED STATE ─────────────────────────────────────────── */
#main-nav {
  transition: background-color .4s ease, box-shadow .4s ease,
              border-color .4s ease !important;
}
#main-nav.lux-scrolled {
  background-color: rgba(250, 247, 242, 0.98) !important;
  box-shadow: 0 4px 36px rgba(45, 59, 45, 0.11),
              0 1px 0   rgba(184, 151, 126, 0.18) !important;
  border-color: rgba(184, 151, 126, 0.28) !important;
}

/* ── BUTTON HOVER ─────────────────────────────────────────────────── */
.btn-primary {
  transition: all .38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
}

/* ── CARD HOVER ───────────────────────────────────────────────────── */
.card-hover {
  position: relative;
  overflow: hidden;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.card-hover:hover {
  transform: translateY(-7px) !important;
}

/* ── SECTION REVEAL ──────────────────────────────────────────────── */
.lux-section {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .92s cubic-bezier(0.16, 1, 0.3, 1),
              transform .92s cubic-bezier(0.16, 1, 0.3, 1);
}
.lux-section.lux-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a revealed section */
.lux-section.lux-visible .card-hover:nth-child(1) { transition-delay: .05s; }
.lux-section.lux-visible .card-hover:nth-child(2) { transition-delay: .12s; }
.lux-section.lux-visible .card-hover:nth-child(3) { transition-delay: .19s; }
.lux-section.lux-visible .card-hover:nth-child(4) { transition-delay: .26s; }
.lux-section.lux-visible .card-hover:nth-child(5) { transition-delay: .33s; }
.lux-section.lux-visible .card-hover:nth-child(6) { transition-delay: .40s; }

/* ── HERO PARALLAX ───────────────────────────────────────────────── */
.lux-parallax { will-change: transform; }

/* ── STAT COUNTER ────────────────────────────────────────────────── */
.lux-counter { font-variant-numeric: tabular-nums; display: inline-block; }

/* ── IMAGE ZOOM: smoother Ken-Burns on pillar cards ─────────────── */
.card-hover .h-48 img,
.card-hover .h-64 img,
.card-hover .aspect-square img {
  transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.card-hover:hover .h-48 img,
.card-hover:hover .h-64 img,
.card-hover:hover .aspect-square img {
  transform: scale(1.07) !important;
}

/* ── SCROLLBAR: gold accent ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FAF7F2; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #B8977E, #8B9A7D); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B8977E; }

/* ── SELECTION COLOR ─────────────────────────────────────────────── */
::selection { background: rgba(184, 151, 126, 0.28); color: #2D3B2D; }


/* ── REDUCED MOTION RESET ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #lux-grain { display: none !important; }
  .lux-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lux-parallax { transform: none !important; }
}