/* ==========================================================================
   KEDARNATH TIMBER DEPOT — PREMIUM LAYER
   Additive refinements on top of style.css. Load after style.css.
   ========================================================================== */

:root {
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

::selection { background: rgba(198, 162, 76, 0.30); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Film grain — a whisper of paper texture over the whole page
   -------------------------------------------------------------------------- */
body::after {
  content: '';
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ktd-grain 9s steps(10) infinite;
}
@keyframes ktd-grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); }
}

/* --------------------------------------------------------------------------
   Reading progress — a gold hairline along the top
   -------------------------------------------------------------------------- */
.ktd-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #C6A24C, #E4C87E);
  z-index: 9999;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Page veil — a soft curtain lift on first paint
   -------------------------------------------------------------------------- */
.ktd-veil {
  position: fixed;
  inset: 0;
  background: var(--ivory, #FBF7EC);
  z-index: 9998;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.9s var(--ease-lux);
}
.ktd-veil.is-lifted { opacity: 0; }

/* --------------------------------------------------------------------------
   Navigation — hand-drawn underline on hover
   -------------------------------------------------------------------------- */
.nav-links > a,
.nav-drop > a {
  position: relative;
}
.nav-links > a::after,
.nav-drop > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1.5px;
  background: linear-gradient(90deg, #C6A24C, #E4C87E);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-lux);
}
.nav-links > a:hover::after,
.nav-drop > a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   Cards — quiet lift, deeper shadow, gold sheen sweep
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.55s var(--ease-lux),
    box-shadow 0.55s var(--ease-lux),
    border-color 0.55s var(--ease-lux);
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -18px rgba(38, 30, 18, 0.18);
  border-color: rgba(198, 162, 76, 0.45);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(228, 200, 126, 0.14), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s var(--ease-lux);
  pointer-events: none;
}
.card:hover::before { left: 130%; }

.card .icon-badge {
  transition: transform 0.55s var(--ease-lux);
}
.card:hover .icon-badge {
  transform: rotate(-6deg) scale(1.08);
}

.wood-swatch {
  transition: transform 0.6s var(--ease-lux), filter 0.6s var(--ease-lux);
  transform-origin: 0 50%;
}
.card:hover .wood-swatch {
  transform: scaleX(1.04);
  filter: saturate(1.15) brightness(1.05);
}

/* --------------------------------------------------------------------------
   Buttons — sheen sweep and arrow glide
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-lux),
    box-shadow 0.4s var(--ease-lux);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.15s; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-lux);
  pointer-events: none;
}
.btn:hover::after { left: 135%; }

.btn .btn-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-lux);
}
.btn:hover .btn-arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Media & gallery — slow, cinematic zoom
   -------------------------------------------------------------------------- */
.placeholder-media {
  overflow: hidden;
  transition: box-shadow 0.6s var(--ease-lux);
}
.placeholder-media:hover {
  box-shadow: 0 26px 52px -20px rgba(38, 30, 18, 0.22);
}
.placeholder-media .pm-inner,
.placeholder-media img {
  transition: transform 1.4s var(--ease-lux);
}
.placeholder-media:hover .pm-inner,
.placeholder-media:hover img {
  transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   Stats — burnished gold numerals
   -------------------------------------------------------------------------- */
.stat .num {
  background: linear-gradient(120deg, #8A6524, #C6A24C 55%, #8A6524);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-forest .stat .num {
  background: linear-gradient(120deg, #E4C87E, #F3E3B4 55%, #E4C87E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Marquee & tags — pause to read, tags breathe on hover
   -------------------------------------------------------------------------- */
.marquee-outer:hover .marquee-track { animation-play-state: paused; }
.tag { transition: transform 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux); }
.tag:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(38, 30, 18, 0.25); }

/* --------------------------------------------------------------------------
   Timeline & steps — gold pulse on hover
   -------------------------------------------------------------------------- */
.t-item:hover .t-dot,
.step:hover .step-num {
  box-shadow: 0 0 0 6px rgba(198, 162, 76, 0.18);
  transition: box-shadow 0.45s var(--ease-lux);
}
.step {
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(38, 30, 18, 0.16);
}

/* --------------------------------------------------------------------------
   Footer — links step forward when touched
   -------------------------------------------------------------------------- */
.footer-links a {
  transition: transform 0.35s var(--ease-lux), color 0.35s var(--ease-lux);
  display: block;
}
.footer-links a:hover { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Ambient motes — drifting flecks of gold and sage in hero skies
   -------------------------------------------------------------------------- */
.ktd-mote {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: ktd-drift var(--mote-dur, 14s) ease-in-out var(--mote-delay, 0s) infinite;
}
@keyframes ktd-drift {
  0%   { transform: translate3d(0, 12px, 0) scale(0.8); opacity: 0; }
  20%  { opacity: var(--mote-op, 0.5); }
  50%  { transform: translate3d(var(--mote-x, 18px), -26px, 0) scale(1); }
  80%  { opacity: var(--mote-op, 0.5); }
  100% { transform: translate3d(0, -52px, 0) scale(0.85); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Back to top — gentle lift
   -------------------------------------------------------------------------- */
.back-to-top {
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux);
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(38, 30, 18, 0.3);
}

/* --------------------------------------------------------------------------
   Accessibility — honour reduced motion completely
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none; }
  .ktd-veil { transition: none; opacity: 0; }
  .ktd-mote { animation: none; display: none; }
  .card, .btn, .step, .tag,
  .placeholder-media .pm-inner,
  .placeholder-media img,
  .card .icon-badge, .wood-swatch,
  .footer-links a, .back-to-top { transition: none; }
  .card:hover, .btn:hover, .step:hover { transform: none; }
}