/* Nail Spa Elmsford -> On Trend Nails Luzern Exact Motion & Layout Tokens (Mobile-Safe) */
:root {
  --otn-anim-duration: 0.6s;
  --otn-anim-ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --otn-img-scale-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --otn-emerald-dark: #0B241B;
  --otn-emerald-deep: #17251B;
  --otn-cream-light: #FAF9F6;
  --otn-white: #FFFFFF;
  --otn-gold: #C8A050;
  --otn-gold-light: #E6CA82;
}

/* 1. Scroll-Back Fixed Transparent Header */
.otn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: transform 0.42s var(--otn-anim-ease),
              background-color 0.42s var(--otn-anim-ease),
              backdrop-filter 0.42s var(--otn-anim-ease),
              box-shadow 0.42s var(--otn-anim-ease),
              padding 0.35s var(--otn-anim-ease);
  will-change: transform, background-color;
}
.otn-header.is-scrolled {
  background: rgba(11, 36, 27, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.otn-header.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/* 2. Global Slide + Fade Reveal — progressive enhancement so mobile WebView never shows a blank page */
html.js-motion [data-animate],
html.js-motion .preSlide {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--otn-anim-duration) var(--otn-anim-ease),
              transform var(--otn-anim-duration) var(--otn-anim-ease);
  transition-delay: var(--anim-delay, 0s);
  will-change: opacity, transform;
}
html.js-motion [data-animate="fade"],
html.js-motion .preFade {
  opacity: 0;
  transform: none;
  transition: opacity var(--otn-anim-duration) var(--otn-anim-ease);
  transition-delay: var(--anim-delay, 0s);
}
html.js-motion [data-animate="scale"],
html.js-motion .preScale {
  opacity: 0;
  transform: scale(0.96) translate3d(0, 16px, 0);
  transition: opacity 0.75s var(--otn-img-scale-ease),
              transform 0.75s var(--otn-img-scale-ease);
  transition-delay: var(--anim-delay, 0s);
}
html.js-motion [data-animate].is-visible,
html.js-motion .preSlide.slideIn,
html.js-motion .preFade.fadeIn,
html.js-motion .preScale.scaleIn,
.elmsford-hero [data-animate] {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* 3. Square Outline Buttons with Fill Sweep */
.otn-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 1.5px solid currentColor;
  padding: 1.05rem 2.2rem;
  font-family: "proxima-nova", "proxima-nova-condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.3s var(--otn-anim-ease),
              color 0.3s var(--otn-anim-ease),
              border-color 0.3s var(--otn-anim-ease),
              transform 0.3s var(--otn-anim-ease);
}
.otn-btn-outline:hover {
  background-color: var(--otn-gold);
  border-color: var(--otn-gold);
  color: var(--otn-emerald-dark);
  transform: translateY(-2px);
}

/* 4. Gallery & Service Image Hover Scale-Up */
.otn-img-wrap {
  overflow: hidden;
  position: relative;
}
.otn-img-wrap img {
  transition: transform 0.65s var(--otn-img-scale-ease),
              filter 0.65s var(--otn-anim-ease);
  will-change: transform;
}
.otn-img-wrap:hover img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate], .preSlide, .preFade, .preScale, .otn-header, .otn-img-wrap img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}