/* Original vertical title, rings and paper-petal choreography.
   Petal pop and paper entrance reuse the MIT-licensed yui540 keyframes
   in motion-yui540.css; its complete copyright/license notice is retained. */
.site-loader {
  --intro-supported: 1;
  --intro-red: #c41432;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border: 0;
  background: #fff;
  color: #243143;
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transition: opacity .6s ease-in-out;
}
.site-loader:not([open]) { display: none; }
.site-loader[open] { display: grid; grid-template-rows: 1fr auto; }
/* The dialog supplies the white sheet; its fade reveals the page beneath. */
.site-loader::backdrop { background: transparent; }
.site-loader.is-leaving { opacity: 0; }
html.intro-active { overflow: hidden; }
.loader-stage {
  align-self: center;
  justify-self: center;
  width: min(100%, 380px);
  text-align: center;
  padding: 16px 0 12px;
}
.loader-composition { position: relative; isolation: isolate; margin: 0 auto 24px; }
.loader-ornaments {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(70vw, 320px, 58vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.loader-paper { position: absolute; inset: 24%; transform: rotate(45deg); }
.loader-paper > span { display: block; width: 100%; height: 100%; background: #fff3f4; }
.loader-rings { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.loader-ring { fill: none; stroke: var(--intro-red); stroke-width: 1; transform-origin: center; }
.loader-ring-outer { stroke-opacity: .35; stroke-dasharray: 100; }
.loader-ring-inner { stroke-opacity: .18; stroke-dasharray: 1 3.5; }
.loader-petal {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  transform: rotate(var(--turn));
}
.loader-petal > span { display: block; width: 100%; height: 100%; background: var(--intro-red); }
.loader-petal-round > span { border-radius: 50%; }
.loader-petal-outline > span { border: 1px solid var(--intro-red); background: #fff; }
.loader-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 auto;
  padding: 0;
}
.loader-kanji {
  display: block;
  color: #243143;
  -webkit-text-fill-color: currentColor;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(40px, 8.8vh, 78px);
  font-weight: 500;
  line-height: 1.07;
  opacity: 1;
}
/* User requirement: 宴 (and 祭 when present) must stay red throughout. */
.site-loader .loader-red { color: #c41432; -webkit-text-fill-color: #c41432; }
.loader-status { margin-top: 25px; color: #5f6873; font: 12px/1.8 "Yu Gothic", Meiryo, sans-serif; }
.loader-line { display: block; height: 2px; width: 120px; margin: 16px auto 0; overflow: hidden; background: #f3dfe3; }
.loader-line::after { content: ""; display: block; width: 100%; height: 100%; background: var(--intro-red); transform-origin: left; }
.loader-controls { display: flex; justify-content: flex-end; padding: 12px 10px 0; }
.loader-skip {
  border: 1px solid #d6bcc2;
  background: #fff;
  color: #243143;
  min-height: 48px;
  min-width: 120px;
  padding: 10px 22px;
  cursor: pointer;
  font: 13px/1.8 "Yu Gothic", Meiryo, sans-serif;
}
.loader-skip:hover { border-color: #a61936; background: #fff3f4; }
.loader-skip:focus-visible { outline: 3px solid #116aab; outline-offset: 5px; }
/* Keep the existing homepage entrance for the moment after the loader. */
html.intro-active .page-home .art-paper,
html.intro-active .page-home .art-seal,
html.intro-active .page-home .title-mask > span,
html.intro-active .page-home .hero-emblem { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .site-loader[open] .loader-kanji { animation: daienkai-intro-letter-fade 1.15s ease-in-out calc(var(--loader-order) * .32s) both; }
  .site-loader[open] .loader-line::after { animation: daienkai-intro-line 4.1s ease-in-out both; }
  .site-loader[open] .loader-paper > span {
    animation: yui540-paper-enter 1.45s cubic-bezier(.25, .1, .25, 1) .15s both,
      yui540-paper-unfold 1.95s ease-in-out .15s both;
  }
  .site-loader[open] .loader-ring-outer { animation: daienkai-intro-ring-draw 2.5s ease-in-out .15s both; }
  .site-loader[open] .loader-ring-inner { animation: daienkai-intro-ring-turn 3.8s ease-in-out .15s both; }
  .site-loader[open] .loader-petal { animation: daienkai-intro-petal-drift 1.65s ease-in-out calc(var(--delay) + .9s) both; }
  .site-loader[open] .loader-petal > span { animation: yui540-seal-pop 1.05s ease-in-out calc(var(--delay) * 1.35) both; }
}
@keyframes daienkai-intro-line { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
@keyframes daienkai-intro-letter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes daienkai-intro-ring-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes daienkai-intro-ring-turn {
  from { opacity: 0; transform: rotate(-35deg) scale(.97); }
  25% { opacity: 1; }
  to { opacity: 1; transform: rotate(10deg) scale(1); }
}
@keyframes daienkai-intro-petal-drift {
  from { transform: translateY(0) rotate(var(--turn)); }
  to { transform: translateY(var(--drift)) rotate(calc(var(--turn) + 8deg)); }
}
@media (max-width: 440px) {
  .site-loader { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .loader-composition { margin-bottom: 22px; }
  .loader-controls { padding-right: 0; }
}
@media (max-height: 500px) {
  .site-loader { padding: max(14px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
  .loader-stage { padding: 0; }
  .loader-composition { margin-bottom: 10px; }
  .loader-ornaments { width: min(55vw, 38vh); }
  .loader-wordmark { gap: 1px; }
  .loader-kanji { font-size: clamp(27px, 7.5vh, 36px); }
  .loader-status { margin-top: 8px; }
  .loader-line { margin-top: 7px; }
  .loader-controls { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader, .site-loader *, .loader-line::after { animation: none !important; transition: none !important; }
}
@media print { .site-loader { display: none !important; } html.intro-active { overflow: visible; } }