/* Keep Jillion's entrance / transition timeline and corner choreography.
   Revised Aether artwork has visible bounds of 387 × 397 in a 505 × 422 PNG.
   Mask offsets crop its transparent padding in CSS, preserving source pixels. */
.c-mark {
  --aether-symbol-width: 38rem;
  --aether-symbol-height: calc(var(--aether-symbol-width) * 397 / 387);
}
.c-mark .c-mark-obj:has(> img) {
  width: calc(var(--aether-symbol-width) * 194 / 387);
  mask-size: calc(var(--aether-symbol-width) * 505 / 387) calc(var(--aether-symbol-width) * 422 / 387);
}
.c-mark .c-mark-obj-left:has(> img) {
  height: calc(var(--aether-symbol-width) * 302 / 387);
  mask-image: url('/aether/brand-v3/left.png');
  mask-position: calc(var(--aether-symbol-width) * -59 / 387) calc(var(--aether-symbol-width) * -12 / 387);
}
.c-mark .c-mark-obj-right:has(> img) {
  height: calc(var(--aether-symbol-width) * 301 / 387);
  mask-image: url('/aether/brand-v3/right.png');
  mask-position: calc(var(--aether-symbol-width) * -252 / 387) calc(var(--aether-symbol-width) * -108 / 387);
}
.aether-mark-center { display: none; }

/* The source still scales the full viewport during loading / page transitions.
   Keep the original timing, but seat each piece in its precise shared canvas. */
:is(.loading, .l-transition) .c-mark-obj {
  position: absolute;
  grid-area: auto;
  right: auto;
  bottom: auto;
}
:is(.loading, .l-transition) .c-mark-obj-left {
  left: calc(50% - var(--aether-symbol-width) / 2);
  top: calc(50% - var(--aether-symbol-height) / 2);
  --aether-corner-x: calc(var(--vw) / -2 + var(--aether-symbol-width) / 2);
  --aether-corner-y: calc((100dvh - var(--wp-admin--admin-bar--height)) / -2 + var(--aether-symbol-height) / 2);
}
:is(.loading, .l-transition) .c-mark-obj-right {
  left: calc(50% - var(--aether-symbol-width) / 2 + var(--aether-symbol-width) * 193 / 387);
  top: calc(50% - var(--aether-symbol-height) / 2 + var(--aether-symbol-width) * 96 / 387);
  --aether-corner-x: calc(var(--vw) / 2 - var(--aether-symbol-width) / 2);
  --aether-corner-y: calc((100dvh - var(--wp-admin--admin-bar--height)) / 2 - var(--aether-symbol-height) / 2);
}
:is(.loading, .l-transition) .aether-mark-center {
  display: block;
  position: absolute;
  left: calc(50% - var(--aether-symbol-width) / 2 + var(--aether-symbol-width) * 101 / 387);
  top: calc(50% - var(--aether-symbol-height) / 2 + var(--aether-symbol-width) * 106 / 387);
  width: calc(var(--aether-symbol-width) * 185 / 387);
  height: calc(var(--aether-symbol-width) * 186 / 387);
  background-color: currentColor;
  mask-image: url('/aether/brand-v3/center.png');
  mask-size: calc(var(--aether-symbol-width) * 505 / 387) calc(var(--aether-symbol-width) * 422 / 387);
  mask-position: calc(var(--aether-symbol-width) * -160 / 387) calc(var(--aether-symbol-width) * -118 / 387);
  mask-repeat: no-repeat;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .35s var(--ease-none), transform .6s var(--ease-expo-out);
}
.aether-mark-center img { display: block; width: 100%; height: 100%; opacity: 0; }

/* Intro: assembled mark → center star and statement → original corner reveal. */
.loading .c-mark-obj { transform: translate3d(0,0,0); }
.loading.is-line:not(.is-end):not(.is-hide) .aether-mark-center {
  opacity: 1;
  transform: scale(1);
  transition-duration: .8s, 1s;
  transition-delay: .2s;
}
.loading.is-end .c-mark-obj {
  transform: translate3d(var(--aether-corner-x),var(--aether-corner-y),0);
}
.loading .loading-txt span:first-of-type { transform: translate3d(6.12rem,0,0); }
.loading .loading-txt span:nth-of-type(2) { transform: translate3d(-6.12rem,0,0); }
.loading:is(.is-text, .is-end) .loading-txt span { transform: translate3d(0,0,0); }
.aether-loading-en {
  position: absolute;
  left: 0;
  top: calc(50% + 14.5rem);
  width: 100%;
  text-align: center;
  font-family: var(--font-family-montserrat), sans-serif;
  font-size: 1rem;
  letter-spacing: .13em;
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .7s 1.4s var(--ease-none), transform .7s 1.4s var(--ease-expo-out);
}
.loading.is-text .aether-loading-en { opacity: .65; transform: translateY(0); }
.loading.is-end .aether-loading-en { opacity: 0; transition: opacity .4s var(--ease-none); }

/* Navigation: original opposing corners join to the same complete diamond. */
.l-transition .c-mark-obj {
  transform: translate3d(var(--aether-corner-x),var(--aether-corner-y),0);
}
html.is-wait .l-transition.is-show .c-mark-obj { transform: translate3d(0,0,0); }
html.is-wait .l-transition.is-show .aether-mark-center {
  opacity: 1;
  transform: scale(1);
  transition-delay: .8s;
}

@media screen and (max-width: 767px) {
  .c-mark { --aether-symbol-width: 15.87rem; }
  .loading .loading-txt span:first-of-type { transform: translate3d(3.825rem,0,0); }
  .loading .loading-txt span:nth-of-type(2) { transform: translate3d(-3.825rem,0,0); }
  .loading:is(.is-text, .is-end) .loading-txt span { transform: translate3d(0,0,0); }
  .aether-loading-en { top: calc(50% + 7.6rem); font-size: .75rem; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .loading { display: none; }
  .is-loading .mv-ttl .aether-hero-word { transform: none; }
  .is-loading .mv-en, .is-loading .mv-ja, .is-loading .mv-logo { opacity: 1; }
  .is-loading .mv-navi-item { transform: none; }
  .aether-mark-center { transition: none !important; }
}