/* ===== Shri Pauhari Baba Temple – shared styles ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem
}

body {
  animation: pageIn .6s ease backwards
}

html.leaving body {
  opacity: 0;
  transition: opacity .24s ease
}

@keyframes pageIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* hero text entrance */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.rise {
  opacity: 0;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards
}

/* reveal on scroll (added by main.js) */
@keyframes rvUp {
  from {
    opacity: 0;
    translate: 0 28px
  }

  to {
    opacity: 1;
    translate: none
  }
}

.rv {
  opacity: 0;
  translate: 0 28px
}

.rv-in {
  animation: rvUp .85s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--d, 0ms)
}

.rv.rv-in {
  opacity: 1;
  translate: none
}

/* safety: always visible once revealed */

/* navbar */
@keyframes navIn {
  from {
    opacity: 0;
    translate: 0 -18px
  }

  to {
    opacity: 1;
    translate: none
  }
}

.nav-in {
  animation: navIn .7s cubic-bezier(.2, .7, .2, 1) .1s both
}

.nav-pill {
  transition: background-color .3s, box-shadow .3s
}

.nav-pill.scrolled {
  background-color: rgb(0 48 44/.98)
}

.burger {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border: 2px solid rgb(240 237 228/.85);
  border-radius: 9999px;
  transition: background-color .25s
}

.burger:hover {
  background-color: rgb(255 255 255/.1)
}

.burger i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s
}

.burger i:nth-child(1) {
  transform: translateY(-6px)
}

.burger i:nth-child(3) {
  transform: translateY(6px)
}

.burger[aria-expanded=true] i:nth-child(1) {
  transform: rotate(45deg)
}

.burger[aria-expanded=true] i:nth-child(2) {
  opacity: 0;
  transform: scaleX(.2)
}

.burger[aria-expanded=true] i:nth-child(3) {
  transform: rotate(-45deg)
}

@keyframes menuIn {
  from {
    opacity: 0;
    translate: 0 -10px
  }

  to {
    opacity: 1;
    translate: none
  }
}

@keyframes menuLi {
  from {
    opacity: 0;
    translate: -12px 0
  }

  to {
    opacity: 1;
    translate: none
  }
}

.menu-in {
  animation: menuIn .35s cubic-bezier(.2, .7, .2, 1) both
}

.menu-in li,
.menu-in>a {
  animation: menuLi .5s cubic-bezier(.2, .7, .2, 1) both
}

.menu-in li:nth-child(1) {
  animation-delay: .05s
}

.menu-in li:nth-child(2) {
  animation-delay: .1s
}

.menu-in li:nth-child(3) {
  animation-delay: .15s
}

.menu-in li:nth-child(4) {
  animation-delay: .2s
}

.menu-in li:nth-child(5) {
  animation-delay: .25s
}

.menu-in li:nth-child(6) {
  animation-delay: .3s
}

.menu-in>a {
  animation-delay: .36s
}

/* scroll progress bar */
#sp {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: #f9c85f;
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 70;
  pointer-events: none
}

/* image hover + hero slow zoom */
figure.overflow-hidden>img {
  transition: transform .9s cubic-bezier(.2, .7, .2, 1)
}

figure.overflow-hidden:hover>img {
  transform: scale(1.04)
}

@keyframes kb {
  from {
    transform: scale(1.08)
  }

  to {
    transform: scale(1)
  }
}

#slides img {
  animation: kb 14s ease-out both
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  body,
  .nav-in,
  .menu-in,
  .menu-in li,
  .menu-in>a,
  .rv-in,
  #slides img {
    animation: none
  }

  .rise {
    animation: none;
    opacity: 1
  }

  .rv {
    opacity: 1;
    translate: none
  }
}