/* Layers retain their own transforms: scroll > pointer depth > photograph drift. */
.depth-scene, .depth-card { --depth-x: 0; --depth-y: 0; --glint-x: 50%; --glint-y: 50%; }
.depth-photo { width: 100%; height: 100%; transform: perspective(1400px) translate3d(calc(var(--depth-x) * -3%), calc(var(--depth-y) * -2%), 0) rotateX(calc(var(--depth-y) * 2deg)) rotateY(calc(var(--depth-x) * -2deg)) scale(1.045); transition: transform .55s ease; }
.depth-engaged .depth-photo { transition-duration: .08s; }
.salon-slide.is-active .salon-slide-photo img { animation: salon-ambient-photo 18s ease-in-out infinite alternate both; animation-play-state: paused; }
.salon-slider[data-motion-active="true"] .salon-slide.is-active .salon-slide-photo img { animation-play-state: running; }
.inner-hero.depth-scene .inner-hero-photo img { animation: inner-ambient-photo 19s ease-in-out infinite alternate both; animation-play-state: paused; }
.motion-enabled .inner-hero.is-depth-visible .inner-hero-photo img { animation-play-state: running; }
.inner-hero.depth-scene .inner-hero-photo:nth-child(2) img { animation-delay: -6s; }
.inner-hero.depth-scene .inner-hero-photo:nth-child(3) img { animation-delay: -12s; }
@keyframes salon-ambient-photo { from { transform: scale(1.015) translate3d(-.35%, 0, 0); } to { transform: scale(1.085) translate3d(.55%, -.4%, 0); } }
@keyframes inner-ambient-photo { from { transform: scale(1.01) translate3d(-.35%, .2%, 0); } to { transform: scale(1.065) translate3d(.45%, -.5%, 0); } }

/* The hero control explains the effective preference on every page. */
.hero-motion-dock { position: absolute; top: 24px; left: max(24px, calc((100vw - 1320px) / 2)); z-index: 6; }
.hero-motion-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 15px; border: 1px solid #e9d9dc; border-radius: 40px; background: #fff9f1d9; color: #583246; box-shadow: 0 5px 18px #4825350c, inset 0 1px 0 #fff; font: inherit; font-size: 11px; letter-spacing: .025em; cursor: pointer; }
.hero-motion-toggle::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #a86183; box-shadow: 0 0 0 4px #a8618314; }
.hero-motion-toggle[aria-pressed="true"]::before { background: #80747b; box-shadow: none; }
.hero-motion-toggle:hover { border-color: #b78095; background: #fffaf5; }
.hero-motion-toggle:focus-visible { outline: 3px solid #ad4c75; outline-offset: 4px; }
.hero-motion-toggle:disabled { cursor: default; opacity: .85; }
.salon-slider .hero-motion-toggle { background: #342430b5; border-color: #f7d9e945; color: #fff7fa; box-shadow: inset 0 1px 0 #fff2; }
.salon-slider .hero-motion-toggle::before { background: #efb4cf; box-shadow: 0 0 0 4px #efb4cf19; }
.salon-slider .hero-motion-toggle:hover { background: #482b3ce0; }
.salon-slider .hero-motion-toggle:focus-visible { outline-color: #fff7fa; }
.inner-hero-copy .hero-motion-toggle { margin-top: 18px; }

/* A small glass sculpture adds actual perspective without moving readable content. */
.hero-jewel { position: absolute; right: 8%; top: 38%; width: 154px; height: 154px; z-index: 3; pointer-events: none; perspective: 700px; opacity: .82; transform: translate3d(calc(var(--depth-x) * 24px), calc(var(--depth-y) * 18px), 0); transition: transform .4s ease; }
.hero-jewel-gimbal { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-17deg) rotateY(-24deg) rotateZ(-13deg); animation: jewel-float 12s ease-in-out infinite alternate; animation-play-state: paused; }
.motion-enabled .is-depth-visible .hero-jewel-gimbal { animation-play-state: running; }
.hero-jewel-face { position: absolute; inset: 28%; border: 1px solid #fff9e8a6; border-radius: 14px; background: linear-gradient(135deg, #fff9ed5e, #e6a8be18 48%, #fff9ec55); box-shadow: inset 0 0 18px #fff9ea2e, 10px 18px 28px #4a213e20; transform: rotateZ(45deg) translateZ(18px); }
.hero-jewel-orbit { position: absolute; inset: 8%; border: 1px solid #fff5dfa3; border-radius: 50%; transform: rotateX(63deg) rotateZ(-22deg); box-shadow: 0 1px 4px #59324313; }
.hero-jewel-orbit--cross { inset: 14%; border-color: #f4bdcbaa; transform: rotateY(62deg) rotateZ(24deg); }
.hero-jewel-pearl { position: absolute; width: 20px; height: 20px; top: 9%; left: 43%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fffcf5, #edcdc9 50%, #9d708588); box-shadow: 4px 5px 10px #47243f33; transform: translateZ(24px); }
.inner-hero .hero-jewel { width: 120px; height: 120px; top: auto; bottom: 12%; right: 6%; opacity: .74; }
@keyframes jewel-float { from { transform: translate3d(0, 6px, 0) rotateX(-17deg) rotateY(-24deg) rotateZ(-13deg); } to { transform: translate3d(0, -9px, 12px) rotateX(14deg) rotateY(25deg) rotateZ(9deg); } }

/* Subtle image tilt and a pointer-following reflection on existing cards. */
.depth-card { perspective: 1200px; }
.depth-card .service-card-image, .depth-card.catalog-card > img, .depth-card.journal-card > img, .depth-card.gallery-tile > img { transform: perspective(1200px) rotateX(calc(var(--depth-y) * -6deg)) rotateY(calc(var(--depth-x) * 6deg)); transition: transform .55s ease, box-shadow .55s ease; }
.depth-card.gallery-tile > img { transform: perspective(1200px) rotateX(calc(var(--depth-y) * -6deg)) rotateY(calc(var(--depth-x) * 6deg)) scale(1.045); }
.depth-card .service-card-image::after { background: radial-gradient(circle at var(--glint-x) var(--glint-y), #fff6df38, transparent 56%), linear-gradient(145deg, #ffffff16, transparent 55%); }
.depth-card.depth-engaged .service-card-image { box-shadow: 0 22px 40px -22px #55213b62; }
.depth-card.gallery-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--glint-x) var(--glint-y), #fff2e724, transparent 54%); opacity: 0; transition: opacity .4s ease; }
.depth-card.gallery-tile.depth-engaged::after { opacity: 1; }
.motion-hidden *, .motion-hidden *::before, .motion-hidden *::after { animation-play-state: paused !important; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; }
.motion-paused .depth-photo, .motion-paused .hero-jewel, .motion-paused .depth-card .service-card-image, .motion-paused .depth-card > img { transform: none; }

@media (max-width: 900px) {
  .hero-jewel { width: 110px; height: 110px; right: 5%; top: 32%; }
}
@media (max-width: 700px) {
  .inner-hero .hero-jewel { width: 84px; height: 84px; top: 82px; bottom: auto; right: 7%; opacity: .7; }
  .inner-hero--compact .hero-jewel { top: 58px; }
  .inner-hero-copy .hero-motion-toggle { margin-top: 14px; }
}
@media (max-width: 600px) {
  .hero-motion-dock { top: 17px; left: 20px; }
  .salon-slider .hero-jewel { top: 135px; right: 6%; width: 92px; height: 92px; }
  .hero-motion-toggle { font-size: 10px; padding-inline: 13px; }
}
@media (hover: none), (pointer: coarse) {
  .depth-photo { transform: scale(1.025); }
  .depth-card .service-card-image, .depth-card > img { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-opt-in) *, html:not(.motion-opt-in) *::before, html:not(.motion-opt-in) *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  html:not(.motion-opt-in) .depth-photo, html:not(.motion-opt-in) .hero-jewel, html:not(.motion-opt-in) .depth-card .service-card-image, html:not(.motion-opt-in) .depth-card > img { transform: none !important; }
}