/* FORMLESS — connect, unfold, return. Shared by every page. */
:root {
  --flow-ease: cubic-bezier(.22, 1, .36, 1);
  --flow-spring: cubic-bezier(.2, .8, .2, 1.07);
  --flow-short: 220ms;
  --flow-long: 680ms;
}

@view-transition { navigation: auto; }

/* The masthead stays in place while the content becomes the next surface. */
.site-header { view-transition-name: flow-header; }
::view-transition-group(root),
::view-transition-group(flow-object) {
  animation-duration: .68s;
  animation-timing-function: var(--flow-ease);
}
::view-transition-old(root) {
  animation: .46s var(--flow-ease) both flow-page-out;
}
::view-transition-new(root) {
  animation: .68s var(--flow-ease) both flow-page-in;
}
::view-transition-group(flow-header) { animation-duration: .36s; }
::view-transition-old(flow-header),
::view-transition-new(flow-header) { animation: none; mix-blend-mode: normal; }
::view-transition-old(flow-object),
::view-transition-new(flow-object) {
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
  animation-duration: .5s;
}
::view-transition-image-pair(flow-object) { overflow: clip; isolation: isolate; }
@keyframes flow-page-out {
  from { opacity: 1; transform: perspective(1600px) translateZ(0) rotateY(0deg); }
  to { opacity: 0; transform: perspective(1600px) translateZ(-80px) translateX(-2%) rotateY(3deg); }
}
@keyframes flow-page-in {
  from { opacity: .5; transform: perspective(1600px) translateZ(-100px) translateX(3%) rotateY(-4deg); }
  to { opacity: 1; transform: perspective(1600px) translateZ(0) translateX(0) rotateY(0deg); }
}

/* A short, nonblocking fold is the progressive fallback for MPA transitions. */
.flow-page-fold {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  perspective: 1500px;
}
.flow-page-fold > i {
  background: var(--flow-fold-color, #fc7b04);
  transform: scaleX(0) rotateY(-28deg);
  transform-origin: right center;
  transition: transform .26s var(--flow-ease);
}
.flow-page-fold > i:nth-child(2) { transition-delay: 18ms; filter: brightness(.95); }
.flow-page-fold > i:nth-child(3) { transition-delay: 36ms; filter: brightness(.88); }
.flow-departing .flow-page-fold { visibility: visible; }
.flow-departing .flow-page-fold > i { transform: scaleX(1) rotateY(0deg); }

/* A logo surface becomes an aperture. Its rim passes the camera before arrival. */
.flow-portal,
.flow-portal-arrival {
  position: fixed;
  inset: 0;
  z-index: 10020;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.flow-portal { perspective: 1400px; }
.flow-portal-disc {
  position: absolute;
  left: var(--portal-x);
  top: var(--portal-y);
  width: var(--portal-width);
  height: var(--portal-height);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  color: #fff9ed;
  background: var(--portal-color);
  border: 1px solid #fda358;
  box-shadow: 2px 3px 0 2px #191b18, 5px 7px 0 3px #67615a, 0 0 24px #fd8b3833;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}
.flow-portal-image {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--portal-color) 80%, transparent), transparent), var(--portal-image);
  background-size: cover;
  background-position: center;
  opacity: .76;
}
.flow-portal-title {
  position: absolute;
  inset: 24% 8% auto;
  text-align: center;
  white-space: pre-line;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(var(--portal-width) * .15);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.045em;
  text-shadow: 0 2px 9px #0005;
}
.flow-portal[data-palette="cream"] .flow-portal-title { color: #14211d; text-shadow: none; }
.flow-portal-disc::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: #f4f1e9;
  opacity: 0;
}
.flow-portal-departing .flow-portal-disc {
  animation: flow-portal-dive 520ms cubic-bezier(.58, .04, .3, 1) both;
}
.flow-portal-departing .flow-portal-disc::after {
  animation: flow-portal-surface 520ms ease-in both;
}
.flow-portal-departing .flow-portal-title {
  animation: flow-portal-label 240ms ease-out both;
}
.flow-portal-arrival {
  background: #f4f1e9;
  animation: flow-portal-arrival 380ms cubic-bezier(.16, 1, .3, 1) both;
}
.flow-portal-arriving > main {
  animation: flow-portal-land 380ms cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: 50% 24vh;
}
html.flow-portal-route .site-header { view-transition-name: none; }
html.flow-portal-route::view-transition-old(root),
html.flow-portal-route::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes flow-portal-dive {
  0% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: .5; }
  12% { opacity: 1; }
  100% {
    transform: translate3d(calc(-50% + var(--portal-dx)), calc(-50% + var(--portal-dy)), 0) scale(var(--portal-scale));
    opacity: 1;
  }
}
@keyframes flow-portal-surface {
  0%, 20% { opacity: 0; }
  86%, 100% { opacity: 1; }
}
@keyframes flow-portal-label {
  0%, 24% { opacity: 1; }
  100% { opacity: 0; filter: blur(2px); }
}
@keyframes flow-portal-arrival {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes flow-portal-land {
  from { transform: perspective(1400px) translateZ(30px); }
  to { transform: perspective(1400px) translateZ(0); }
}

/* Individual transforms compose with the art direction's own transform. */
[data-tilt], .business-plane { perspective: 1000px; }
[data-tilt] .plane-object, .business-plane .plane-object,
[data-tilt] > .tilt-layer {
  rotate: var(--flow-axis-x, 0) var(--flow-axis-y, 1) 0 var(--flow-angle, 0deg);
  translate: var(--flow-px, 0px) var(--flow-py, 0px);
  transform-style: preserve-3d;
}
[data-flow-light] {
  background-image: radial-gradient(ellipse at var(--flow-light-x, 50%) var(--flow-light-y, 35%), #ffffff45, transparent 62%);
}
.flow-magnet {
  translate: var(--flow-magnet-x, 0px) var(--flow-magnet-y, 0px);
}

/* These attributes belong on image wrappers, keeping content and text still. */
[data-flow-image], [data-parallax][data-depth] {
  translate: 0 var(--flow-scroll-y, 0px);
}
[data-flow-image] { rotate: var(--flow-scroll-turn, 0deg); }

/* A mask is an added visual layer; its absence never hides an image. */
[data-mask-reveal].flow-mask-ready { position: relative; }
.flow-mask-cover {
  position: absolute;
  inset: -1px;
  display: flex;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.flow-mask-cover > i {
  flex: 1 1 0;
  background: var(--mask-color, var(--paper, #f4f1e9));
  transform-origin: center top;
  transition: transform .82s var(--flow-ease);
  transition-delay: calc(var(--strip) * 24ms);
}
.flow-mask-cover > i:nth-child(even) { transform-origin: center bottom; }
.flow-mask-open .flow-mask-cover > i { transform: scaleY(0); }
.flow-mask-done .flow-mask-cover { visibility: hidden; }

/* Two co-registered surfaces reveal the same design's underlying structure. */
[data-fluid-reveal] { position: relative; isolation: isolate; }
[data-fluid-reveal] > .fluid-surface { position: relative; z-index: 1; }
[data-fluid-reveal] > .fluid-underlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.flow-fluid-ready > .fluid-underlay {
  opacity: 1;
  clip-path: circle(var(--fluid-r, 0px) at var(--fluid-x, 50%) var(--fluid-y, 50%));
}
.flow-fluid-organic > .fluid-underlay {
  clip-path: var(--fluid-clip);
}
.flow-fluid-defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* Native dialogs share the same sense of a sheet opening into the foreground. */
.image-dialog[open], .site-menu[open] {
  animation: flow-dialog-open .46s var(--flow-ease) both;
  transform-origin: center 15%;
}
.image-dialog::backdrop, .site-menu::backdrop {
  animation: flow-backdrop-in .32s ease both;
}
@keyframes flow-dialog-open {
  from { opacity: 0; transform: perspective(1200px) translateY(28px) rotateX(-7deg) scale(.975); }
  to { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0deg) scale(1); }
}
@keyframes flow-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

html.flow-motion-off::view-transition-old(*),
html.flow-motion-off::view-transition-new(*),
html.flow-motion-off::view-transition-group(*) { animation-duration: 1ms !important; }
.motion-paused .flow-page-fold,
.motion-paused .flow-portal,
.motion-paused .flow-portal-arrival,
.motion-paused .flow-mask-cover { display: none !important; }
.motion-paused.flow-portal-arriving > main { animation: none !important; }
.motion-paused [data-flow-image],
.motion-paused [data-parallax][data-depth],
.motion-paused .flow-magnet { translate: none !important; }
.motion-paused [data-flow-image] { rotate: none !important; }
.motion-paused [data-tilt] .plane-object,
.motion-paused .business-plane .plane-object,
.motion-paused [data-tilt] > .tilt-layer { rotate: none !important; translate: none !important; }
.motion-paused .image-dialog[open],
.motion-paused .site-menu[open] { animation: none !important; }
.motion-paused [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) {
    animation-duration: 1ms !important;
  }
  .flow-page-fold, .flow-mask-cover, .flow-portal, .flow-portal-arrival { display: none !important; }
  .flow-portal-arriving > main { animation: none !important; }
  [data-flow-image], [data-parallax][data-depth], .flow-magnet { translate: none !important; }
  [data-flow-image] { rotate: none !important; }
  [data-tilt] .plane-object, .business-plane .plane-object, [data-tilt] > .tilt-layer {
    rotate: none !important;
    translate: none !important;
  }
  .image-dialog[open], .site-menu[open],
  .image-dialog::backdrop, .site-menu::backdrop { animation: none !important; }
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (hover: none), (pointer: coarse) {
  [data-tilt] .plane-object, .business-plane .plane-object, [data-tilt] > .tilt-layer {
    rotate: none;
    translate: none;
  }
  .flow-magnet { translate: none; }
}