/* SEREIN motion: fixed reading/booking layout, moving type and photography. */
:root {
  --motion-ease: cubic-bezier(.18,.75,.18,1);
}

/* These frames preserve the original image dimensions even with JS disabled. */
.motion-photo-frame { position:relative; overflow:hidden; border-radius:3px; }
.motion-hero-window { position:absolute; inset:0; overflow:hidden; border-radius:0; }
.philosophy-photo .motion-image-window { height:430px; }
.philosophy-photo .motion-image-window>img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.motion-visit-window { height:218px; }
.motion-visit-window .visit-photo { width:100%; height:100%; }
.motion-line { display:inline-block; max-width:100%; overflow:hidden; vertical-align:top; padding-bottom:.13em; margin-bottom:-.13em; }
.motion-line-inner { display:block; }
.motion-wordmark-frame { overflow:hidden; margin-top:82px; }
.motion-wordmark-frame .footer-wordmark { margin-top:0; }
.motion-toggle { display:none; }

html.serein-motion .hero-copy { animation:none; }
html.serein-motion .motion-heading { translate:0 var(--motion-heading-y,0px); }
html.serein-motion .motion-line-inner { transition:transform 1.35s var(--motion-ease),opacity .8s ease; transition-delay:var(--motion-line-delay,0ms); }
html.serein-motion .motion-heading:not(.motion-in) .motion-line-inner { transform:translate3d(0,112%,0); opacity:.01; }

html.serein-motion .hero-image.motion-photo {
  translate:0 var(--motion-photo-y,0px);
  transform-origin:65% 50%;
  animation:serein-slow-pan 22s ease-in-out infinite alternate;
}
html.serein-motion .motion-hero-window:not(.motion-parallax-active) .hero-image.motion-photo { animation-play-state:paused; }
html.serein-motion .motion-photo-frame:not(.motion-hero-window) img.motion-photo {
  transform:translate3d(0,var(--motion-photo-y,0px),0);
  scale:1.16;
  translate:0 0;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.35s var(--motion-ease),scale 1.65s var(--motion-ease),translate 1.65s var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
}
/* Observe the unclipped frame. Only the child image receives the closed mask. */
html.serein-motion .motion-photo-frame:not(.motion-hero-window):not(.motion-in) img.motion-photo {
  clip-path:inset(0 0 100% 0);
  scale:1.28;
  translate:0 112px;
}
html.serein-motion .ritual-card .ritual-title,
html.serein-motion .ritual-card .ritual-description,
html.serein-motion .ritual-card .ritual-price {
  pointer-events:none;
  transition:transform 1.3s var(--motion-ease),opacity .9s ease;
  transition-delay:calc(var(--motion-delay,0ms) + 90ms);
}
html.serein-motion .ritual-card:not(.motion-in) .ritual-title,
html.serein-motion .ritual-card:not(.motion-in) .ritual-description,
html.serein-motion .ritual-card:not(.motion-in) .ritual-price { transform:translate3d(0,72px,0); opacity:0; }
/* Buttons never inherit a scrolling/card transform. */
html.serein-motion .ritual-book { position:relative; z-index:1; }
html.serein-motion .motion-stagger-item { transition:transform 1.2s var(--motion-ease),opacity .85s ease; transition-delay:var(--motion-delay,0ms); }
html.serein-motion .motion-stagger-item:not(.motion-in) { transform:translate3d(0,88px,0); opacity:0; }
html.serein-motion .motion-wordmark-frame .footer-wordmark {
  transform-origin:50% 100%;
  transform:translate3d(0,0,0) rotate(0deg);
  scale:var(--motion-wordmark-scale,1);
  transition:transform 1.7s var(--motion-ease);
}
html.serein-motion .motion-wordmark-frame:not(.motion-in) .footer-wordmark { transform:translate3d(-3%,110%,0) rotate(4deg); }
html.serein-motion .motion-parallax-active img.motion-photo,
html.serein-motion .motion-parallax-active .footer-wordmark { will-change:transform; }
html.serein-motion .motion-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.35px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.motion-toggle>span { font-family:var(--latin); font-size:12px; }
.motion-toggle:disabled { cursor:default; color:var(--muted); }

/* The pause button finishes entrances so every line and image stays readable. */
body.motion-paused .hero-image.motion-photo { animation-play-state:paused!important; }
html.serein-motion.motion-static .motion-line-inner,
html.serein-motion.motion-static .motion-stagger-item,
html.serein-motion.motion-static .ritual-card .ritual-title,
html.serein-motion.motion-static .ritual-card .ritual-description,
html.serein-motion.motion-static .ritual-card .ritual-price,
html.serein-motion.motion-static .motion-wordmark-frame .footer-wordmark { transition:none; transform:none; opacity:1; }
html.serein-motion.motion-static .motion-photo-frame:not(.motion-hero-window) img.motion-photo { transition:none; clip-path:inset(0); translate:0 0; }
html.serein-motion.motion-reduced .hero-image.motion-photo { animation:none; transform:none; translate:none; }
html.serein-motion.motion-reduced .motion-photo-frame img.motion-photo { transform:none; translate:none; scale:1; will-change:auto; }
html.serein-motion.motion-reduced .motion-heading { translate:none; }
html.serein-motion.motion-reduced .footer-wordmark { scale:1; }

@keyframes serein-slow-pan {
  from { transform:scale(1.12) translate3d(-.6%,0,0); }
  to { transform:scale(1.19) translate3d(.6%,-.5%,0); }
}
@keyframes serein-mobile-pan {
  from { transform:scale(1.10) translate3d(-.35%,0,0); }
  to { transform:scale(1.16) translate3d(.35%,-.4%,0); }
}

@media (max-width:800px) {
  .philosophy-photo .motion-image-window { height:405px; }
  .motion-visit-window { height:181px; }
  .motion-wordmark-frame { margin-top:62px; }
}
@media (max-width:700px) {
  .motion-hero-window { position:relative; inset:auto; height:320px; }
  .motion-hero-window .hero-image { position:absolute; inset:0; height:100%; }
  html.serein-motion .hero-image.motion-photo { transform-origin:76% 50%; animation-name:serein-mobile-pan; }
  .philosophy-photo .motion-image-window { height:330px; }
  .motion-visit-window { height:228px; }
  .motion-wordmark-frame { margin-top:43px; }
  html.serein-motion .motion-stagger-item:not(.motion-in) { transform:translate3d(0,56px,0); }
  html.serein-motion .motion-photo-frame:not(.motion-hero-window):not(.motion-in) img.motion-photo { translate:0 88px; }
  html.serein-motion .ritual-card:not(.motion-in) .ritual-title,
  html.serein-motion .ritual-card:not(.motion-in) .ritual-description,
  html.serein-motion .ritual-card:not(.motion-in) .ritual-price { transform:translate3d(0,56px,0); }
  html.serein-motion .motion-toggle { margin-top:17px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-image.motion-photo { animation:none!important; }
  .motion-line-inner,
  .motion-stagger-item,
  .motion-photo-frame img.motion-photo,
  .motion-wordmark-frame .footer-wordmark { transition:none!important; transform:none!important; translate:none!important; scale:1!important; clip-path:inset(0)!important; opacity:1!important; }
  .motion-heading { translate:none!important; }
}