/* Exotic Touch Massage · premium motion layer (V2.1)
   This file only enhances the public-facing UI. All content is visible when
   JavaScript is off, and all animations respect prefers-reduced-motion. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-gold: #c7c2a1;
}

/* A quieter, more dimensional sage-and-cream hero. */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 75% 76% at 90% 2%, rgba(155, 176, 142, .26), transparent 69%),
    radial-gradient(ellipse 46% 70% at 8% 85%, rgba(251, 241, 221, .92), transparent 76%),
    linear-gradient(117deg, #fbf9f1 0%, #f3f3e9 49%, #e9eee2 100%);
}
.hero::before,
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 36% 48% at 75% 57%, rgba(255,255,255,.34), transparent 75%);
  z-index: 0;
}
.hero-inner, .cta-section > .shell { position: relative; z-index: 1; }
.hero-copy > .eyebrow { animation: etm-hero-rise .8s .08s both var(--motion-ease); }
.hero h1 { animation: etm-hero-rise 1s .19s both var(--motion-ease); }
.hero-lead { animation: etm-hero-rise .9s .31s both var(--motion-ease); }
.hero-actions { animation: etm-hero-rise .9s .43s both var(--motion-ease); }
.hero-meta { animation: etm-hero-rise .9s .54s both var(--motion-ease); }
.hero-visual { animation: etm-hero-visual 1.25s .20s both var(--motion-ease); }
.hero-frame { animation: etm-frame-breathe 9s 1.5s ease-in-out infinite; }
.hero-orbit { animation: etm-orbit-breathe 11s ease-in-out infinite; }
.hero-orbit::before { animation: etm-orbit-breathe 14s -4s ease-in-out infinite; }
.hero-leaf { animation: etm-leaf-sway 11s ease-in-out infinite; transform-origin: 25% 85%; }
.floating-note { animation: etm-note-float 7s 1.3s ease-in-out infinite; }

/* Editorial polish: subtle interaction, generous breathing room, no layout shift. */
.site-header { transition: background-color .35s ease, box-shadow .35s ease; }
.site-header.is-scrolled {
  background: rgba(254, 253, 248, .985);
  box-shadow: 0 12px 38px rgba(31, 49, 31, .075);
}
.brand img { transition: rotate .65s var(--motion-ease), scale .65s var(--motion-ease); }
@media (hover:hover) {
  .brand:hover img { rotate: -9deg; scale: 1.05; }
  .nav > a:not(.button) { position: relative; }
  .nav > a:not(.button)::after {
    content: ''; position: absolute; bottom: 5px; left: 0; right: 0;
    height: 1px; background: #788c70; scale: 0 1; transform-origin: left;
    transition: scale .43s var(--motion-ease);
  }
  .nav > a:not(.button):hover::after, .nav > a.is-active:not(.button)::after { scale: 1 1; }
}
.button { position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--motion-ease), background-color .35s, box-shadow .35s var(--motion-ease);
}
.button::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.18) 46%, transparent 75%);
  translate: -170% 0;
  transition: translate .7s var(--motion-ease);
}
@media (hover:hover) {
  .button:hover { transform: translateY(-3px); box-shadow: 0 13px 25px rgba(31, 53, 31, .17); }
  .button:hover::before { translate: 170% 0; }
  .text-link span, .location-links a, .staff-info > a { transition: color .25s ease, translate .35s var(--motion-ease); }
  .text-link:hover span, .location-links a:hover, .staff-info > a:hover { translate: 3px 0; }
}
.button:active { transform: translateY(0); }

.location-card, .staff-card, .service-card {
  position: relative;
  transition: transform .6s var(--motion-ease), box-shadow .6s var(--motion-ease), border-color .45s;
}
.location-card::after, .staff-card::after, .service-card::after {
  content: ''; pointer-events: none; position: absolute; inset: auto 0 0;
  height: 2px; background: linear-gradient(90deg, transparent, #adb895, var(--motion-gold), transparent);
  scale: 0 1; transform-origin: center;
  transition: scale .6s var(--motion-ease);
}
.location-art > img, .staff-photo > img, .editorial-art > img:first-child,
.profile-image img, .profile-gallery-wrap img, .photo-gallery img {
  transition: transform 1.1s var(--motion-ease), filter .8s ease;
}
@media (hover:hover) {
  .location-card:hover, .staff-card:hover, .service-card:hover {
    transform: translateY(-7px);
    border-color: #c3ceb8;
    box-shadow: 0 25px 54px rgba(43, 63, 42, .13);
  }
  .location-card:hover::after, .staff-card:hover::after, .service-card:hover::after { scale: 1 1; }
  .location-card:hover .location-art > img, .staff-card:hover .staff-photo > img,
  .editorial-art:hover > img:first-child,
  .profile-image:hover img, .photo-gallery a:hover img { transform: scale(1.065); }
}
.location-card:focus-within, .staff-card:focus-within, .service-card:focus-within {
  border-color: #8d9f83;
  box-shadow: 0 10px 30px rgba(43, 63, 42, .12);
}
.editorial-art { box-shadow: 0 25px 65px rgba(43, 63, 42, .09); }
.editorial-art > img:first-child { will-change: auto; }
.steps > div { transition: padding-left .45s var(--motion-ease), border-color .3s ease; }
@media (hover:hover) {
  .steps > div:hover { padding-left: 9px; border-color: #a3b198; }
}
.cta-section { position: relative; isolation: isolate; overflow: hidden; }
.cta-section::before {
  background:
    radial-gradient(ellipse 48% 110% at 2% 110%, rgba(167,181,148,.14), transparent 72%),
    radial-gradient(ellipse 40% 100% at 100% -15%, rgba(190,197,156,.13), transparent 78%);
}

/* Booking pages retain their native forms, validation and step visibility. */
.booking-form, .booking-sidebar, .contact-form, .contact-location, .branch-info {
  transition: box-shadow .4s ease, border-color .4s ease;
}
.booking-form:focus-within, .contact-form:focus-within { box-shadow: 0 14px 35px rgba(45, 70, 46, .07); }
.slot-choice { transition: background-color .25s, border-color .25s, transform .25s var(--motion-ease), box-shadow .25s; }
@media (hover:hover) {
  .slot-choice:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(41, 68, 43, .12); }
}

/* Added after the page is interactive; only below-the-fold content is marked.
   A missing/blocked JS file therefore never leaves website sections invisible. */
.etm-motion-target { transition: opacity .85s var(--motion-ease), translate .85s var(--motion-ease); }
.etm-motion-target.etm-motion-pending { opacity: 0; translate: 0 29px; }
.etm-motion-target.etm-motion-visible { opacity: 1; translate: 0 0; }
.etm-motion-target.etm-motion-visible.etm-stagger-1 { transition-delay: .09s; }
.etm-motion-target.etm-motion-visible.etm-stagger-2 { transition-delay: .18s; }

@keyframes etm-hero-rise {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes etm-hero-visual {
  from { opacity: 0; translate: 20px 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes etm-frame-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes etm-orbit-breathe {
  0%, 100% { opacity: .7; scale: 1; }
  50% { opacity: .94; scale: 1.025; }
}
@keyframes etm-leaf-sway {
  0%, 100% { rotate: -1deg; }
  50% { rotate: 4deg; }
}
@keyframes etm-note-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@media (max-width:760px) {
  .hero-visual { animation-duration: .95s; }
  .hero-frame { animation-duration: 11s; }
  .hero-orbit { animation-duration: 15s; }
  .etm-motion-target.etm-motion-pending { translate: 0 18px; }
  .etm-motion-target { transition-duration: .65s; }
  .etm-motion-target.etm-motion-visible.etm-stagger-2 { transition-delay: .08s; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }
  .hero-copy > .eyebrow, .hero h1, .hero-lead, .hero-actions,
  .hero-meta, .hero-visual, .hero-frame, .hero-orbit, .hero-orbit::before,
  .hero-leaf, .floating-note { animation: none !important; }
  .etm-motion-target, .etm-motion-target.etm-motion-pending,
  .etm-motion-target.etm-motion-visible {
    opacity: 1 !important; translate: none !important; transition: none !important;
  }
  .button, .button::before, .brand img, .location-card, .staff-card,
  .service-card, .location-art > img, .staff-photo > img,
  .editorial-art > img:first-child, .slot-choice,
  .nav > a:not(.button)::after { transition: none !important; }
  .button:hover, .location-card:hover, .staff-card:hover, .service-card:hover,
  .slot-choice:hover { transform: none !important; }
}