/* atelier Kamijo — interface motion, scoped to .motion-ui. */
.motion-ui {
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-progress: 0;
}
.motion-ui body::after {
  content: ''; position: fixed; z-index: 110; left: 0; top: 0;
  width: 100%; height: 2px; background: #c6ac7a;
  transform: scaleX(var(--m-progress)); transform-origin: left;
  pointer-events: none;
}
.motion-ui .site-intro { background: #0b0b0b; transition: clip-path 1.15s var(--m-ease); clip-path: inset(0); }
.motion-ui .site-intro.is-leaving { clip-path: inset(0 0 100% 0); }
.motion-ui .site-intro__panel,
.motion-ui .site-intro.is-leaving .site-intro__panel { transform: none; background: transparent; }
.motion-ui .site-intro__center { z-index: 2; background: radial-gradient(ellipse, #0b0b0b38, #0b0b0b9c); }
.motion-ui .site-intro__mark { animation-duration: 1.15s; }
.motion-ui .site-intro__place { animation-delay: .3s; animation-duration: 1s; }
.motion-ui .site-intro__tag { animation-delay: .55s; animation-duration: 1s; }
.m-intro-photo { position: absolute; inset: 0; opacity: .22; background: url('../assets/images/hero-opening.jpg') center / cover; animation: m-intro-photo 3.3s var(--m-ease) both; }
.m-intro-photo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #c6ac7a35 calc(25% - 1px) 25%); }
.m-intro-thread { position: absolute; z-index: 3; width: 1px; height: 20vh; top: 0; left: 50%; background: linear-gradient(transparent, #c6ac7a); transform-origin: top; animation: m-thread 1.6s .1s var(--m-ease) both; }
@keyframes m-intro-photo { from { opacity: 0; transform: scale(1.16); clip-path: inset(45% 25%); } to { opacity: .22; transform: scale(1); clip-path: inset(0); } }
@keyframes m-thread { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.motion-ui .hero__media { translate: 0 var(--m-hero-y, 0px); scale: 1.035; }
.motion-ui .hero__title { translate: 0 var(--m-title-y, 0px); }
.motion-ui .hero__frame { transition: border-color 1.5s ease; }
.motion-ui .hero__frame-corner { animation: m-corner 1.6s var(--m-ease) both; animation-delay: var(--m-intro-delay, .2s); }
@keyframes m-corner { from { opacity: 0; scale: .45; } to { opacity: 1; scale: 1; } }
.motion-ui [data-motion-heading] .m-char { display: inline-block; opacity: 0; transform: translateY(.65em) rotate(2deg); filter: blur(3px); transition: opacity .9s ease, transform 1.2s var(--m-ease), filter 1.2s ease; transition-delay: calc(var(--m-char-i, 0) * 42ms); }
.motion-ui [data-motion-heading].m-in .m-char { opacity: 1; transform: none; filter: blur(0); }
.motion-ui .m-reveal { opacity: 0; translate: 0 28px; transition: opacity 1s ease, translate 1.35s var(--m-ease); transition-delay: var(--m-delay, 0ms); }
.motion-ui .m-reveal.m-in { opacity: 1; translate: 0 0; }
.motion-ui .m-photo { overflow: hidden; clip-path: inset(10% 4% 10% 4%); transition: clip-path 1.65s var(--m-ease), border-color .5s ease; }
.motion-ui .m-photo.m-in { clip-path: inset(0); }
.motion-ui .m-photo img { scale: 1.095; translate: 0 var(--m-image-y, 0px); transition: scale 1.5s var(--m-ease), filter 1.2s ease; }
.motion-ui .m-photo:not(.m-in) img { scale: 1.18; }
.motion-ui .work-card:hover .m-photo img { scale: 1.14; transform: none; }
.motion-ui .sec-head__line { transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--m-ease); }
.motion-ui .sec-head.m-in .sec-head__line { transform: scaleY(1); }
.motion-ui .sec-head::before { translate: 0 var(--m-watermark-y, 0px); }
.motion-ui .ornament { opacity: .35; transition: opacity 1.2s ease; }
.motion-ui .ornament.m-in { opacity: 1; }
.motion-ui .ornament::before,
.motion-ui .ornament::after { transform: scaleX(0); transition: transform 1.4s var(--m-ease); }
.motion-ui .ornament::before { transform-origin: right; }
.motion-ui .ornament::after { transform-origin: left; }
.motion-ui .ornament.m-in::before,
.motion-ui .ornament.m-in::after { transform: scaleX(1); }
.motion-ui .btn-circle { translate: var(--m-button-x, 0px) var(--m-button-y, 0px); transition: background .5s ease, color .5s ease, border-color .5s ease, translate .6s var(--m-ease); }
.motion-ui .btn-circle::after { content: ''; position: absolute; inset: -6px; border: 1px solid #c6ac7a44; border-radius: 50%; opacity: 0; scale: .94; transition: scale .65s var(--m-ease), opacity .5s ease; pointer-events: none; }
.motion-ui .btn-circle:hover::after,
.motion-ui .btn-circle:focus-visible::after { opacity: 1; scale: 1; }
.motion-ui .btn-circle__arrow { transition: translate .6s var(--m-ease); }
.motion-ui .btn-circle:hover .btn-circle__arrow { translate: 5px 0; }
.motion-ui .work-card__text { transition: translate .65s var(--m-ease); }
.motion-ui .work-card:hover .work-card__text { translate: 4px 0; }
.motion-ui :is(a,button):focus-visible { outline: 2px solid #d8c199; outline-offset: 7px; }
.motion-ui .menu-overlay { transition: visibility .85s; }
.motion-ui .menu-overlay.is-open { transition: visibility 0s; }
.motion-ui .menu-overlay__panel { transition: transform .9s var(--m-ease); }
.motion-ui .menu-overlay__list li { transform: translateY(28px); transition-duration: .8s; }
.motion-ui .menu-overlay.is-open .menu-overlay__list li { transform: none; }
.m-menu-visual { position: absolute; left: 8vw; top: 17vh; width: min(34vw, 510px); height: 65vh; overflow: hidden; pointer-events: none; opacity: 0; clip-path: inset(10% 0); transition: opacity .7s ease, clip-path 1s var(--m-ease); }
.motion-ui .menu-overlay.is-open .m-menu-visual { opacity: 1; clip-path: inset(0); }
.m-menu-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08; transition: opacity .75s ease, scale 1.6s var(--m-ease); filter: brightness(.68); }
.m-menu-visual img.is-active { opacity: 1; scale: 1; }
.m-menu-caption { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; color: #eae3d5; font: italic 18px var(--f-en); letter-spacing: .15em; padding-top: 18px; border-top: 1px solid #c6ac7a80; }
.m-cursor { position: fixed; top: 0; left: 0; z-index: 150; width: 78px; height: 78px; border: 1px solid #d8c199a0; border-radius: 50%; background: #10100d3d; backdrop-filter: blur(3px); display: grid; place-content: center; color: #f0e8d9; font: 12px var(--f-en); letter-spacing: .17em; pointer-events: none; opacity: 0; scale: .65; transition: opacity .25s ease, scale .5s var(--m-ease); }
.m-cursor.is-active { opacity: 1; scale: 1; }
.m-view-link { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 42px; height: 42px; border: 1px solid #f0e8d973; border-radius: 50%; color: #f0e8d9; background: #10100d65; display: grid; place-items: center; font-size: 20px; opacity: 0; translate: -7px 0; transition: opacity .45s ease, translate .65s var(--m-ease); }
.work-card:hover .m-view-link,
.work-card:focus-within .m-view-link { opacity: 1; translate: 0; }
.m-video-control { position: absolute; z-index: 8; right: 42px; bottom: 42px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #c6ac7a85; color: #efe9df; border-radius: 50%; background: #0b0b0b66; cursor: pointer; font: 14px sans-serif; transition: border-color .3s, background .3s; }
.m-video-control:hover { background: #0b0b0bb0; border-color: #d8c199; }
.m-page-curtain { position: fixed; inset: 0; z-index: 180; background: #12100e; border-top: 1px solid #c6ac7a; pointer-events: none; transform: translateY(101%); transition: transform .42s cubic-bezier(.65,0,.3,1); }
.motion-ui.m-leaving .m-page-curtain { transform: translateY(0); }
.motion-ui.m-arriving main { animation: m-page-in 1s var(--m-ease) both; }
@keyframes m-page-in { from { opacity: .2; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.motion-ui .side-rail { opacity: .8; }
@media (max-width: 1000px) { .m-menu-visual { display: none; } }
@media (max-width: 700px), (pointer: coarse) {
  .m-cursor { display: none; }
  .motion-ui .m-photo { clip-path: inset(5% 0); }
  .motion-ui .m-photo.m-in { clip-path: inset(0); }
  .motion-ui .btn-circle { translate: none; }
  .motion-ui [data-motion-heading] .m-char { transition-delay: calc(var(--m-char-i, 0) * 28ms); }
  .m-video-control { width: 34px; height: 34px; bottom: 18px; right: 18px; }
  .m-view-link { width: 32px; height: 32px; font-size: 16px; right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ui *, .motion-ui *::before, .motion-ui *::after { animation: none !important; transition: none !important; }
  .motion-ui .m-reveal, .motion-ui [data-motion-heading] .m-char { opacity: 1 !important; translate: none !important; transform: none !important; filter: none !important; }
  .motion-ui .m-photo { clip-path: none !important; }
  .motion-ui .m-photo img, .motion-ui .hero__media, .motion-ui .hero__title, .motion-ui .sec-head::before { translate: none !important; scale: 1 !important; }
  .motion-ui .sec-head__line, .motion-ui .ornament::before, .motion-ui .ornament::after { transform: none !important; }
  .motion-ui .site-intro, .m-cursor { display: none !important; }
}
@media print {
  .motion-ui .m-reveal, .motion-ui [data-motion-heading] .m-char { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; }
  .motion-ui .m-photo { clip-path: none !important; }
  .m-cursor, .m-video-control, .m-page-curtain, .site-intro { display: none !important; }
}
.motion-ui .m-video-paused .hero__opener-focus,
.motion-ui .m-video-paused .hero__video { animation-play-state: paused; }
/* Keep the close control above the open navigation sheet. */
.motion-ui body.is-menu-open .site-header { z-index: 70; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.motion-ui .menu-overlay__list a { grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: .8rem; }
.motion-ui .menu-overlay__ja { font-size: clamp(1.1rem, 1.75vw, 1.65rem); letter-spacing: .1em; }
/* The decorative frame stays still while the fabric moves within it. */
.motion-ui .hero__media { translate: none; scale: 1; }
.motion-ui .hero__opener { translate: 0 var(--m-hero-y, 0px); scale: 1.035; }
.motion-ui .hero__video { translate: 0 var(--m-hero-y, 0px); }
@media (prefers-reduced-motion: reduce) {
  .motion-ui .hero__opener, .motion-ui .hero__video { translate: none !important; scale: 1 !important; }
}