/* Site loader — quiet paper, the site's own komorebi, and a seamless dissolve.
   The background matches the hero's paper exactly, so the "screen change" is invisible:
   the loading UI simply clears like haze. Shown once per session. */

html.js-loading,
html.js-loading body { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: #F1EDE4;
  transition: opacity .9s ease .55s, visibility 0s 1.5s;
}

/* no-JS safety + removed state */
html:not(.js-loading) .loader { display: none; }

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* the same leaf shadow the site breathes with */
.loader__shadow {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  opacity: .38;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 21%, #000 49%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 21%, #000 49%);
}

.loader__shadow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 44%;
  /* multiply is baked into the flat asset (Safari合成負荷対策) */
  /* filters are baked into hero-shadow-baked.webp (Edge/GPU負荷対策) */
  /* same keyframes as the hero atmosphere — the two shadows stay in phase through the dissolve */
  animation: introShadowDrift 24s ease-in-out infinite alternate;
  transform-origin: 61% 38%;
}

/* the hero's paper grain, so the loader paper is pixel-identical */
.loader__paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../img/plaster-flat.webp") center top / 2400px 912px repeat-y;
  /* multiply is baked into the flat asset (Safari合成負荷対策) */
  opacity: .04;
}

.loader__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #584B3A;
  transition: opacity .8s ease;
}

.loader.is-done .loader__panel { opacity: 0; }

.loader__logo {
  width: clamp(140px, 12vw, 176px);
  height: auto;
  margin-bottom: clamp(30px, 5vh, 54px);
}

.loader__ring {
  position: relative;
  width: clamp(118px, 14vh, 148px);
  aspect-ratio: 1;
  margin-bottom: clamp(26px, 4vh, 44px);
}

.loader__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.loader__ring circle {
  fill: none;
  stroke-width: 2.5;
}

.loader__ring .t { stroke: rgba(88, 75, 58, .13); }

.loader__ring .p {
  stroke: #3E7150;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
}

.loader__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 3vh, 28px);
  letter-spacing: .08em;
  text-indent: .08em;
}

.loader__count i {
  font-style: normal;
  font-size: .55em;
  margin-left: .12em;
}

.loader__label {
  margin: 0 0 10px;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(15px, 2.2vh, 19px);
  font-weight: 500;
  letter-spacing: .5em;
  text-indent: .5em;
}

.loader__sub {
  margin: 0 0 clamp(22px, 3.4vh, 34px);
  font-family: "Shippori Mincho B1", serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-indent: .3em;
  opacity: .72;
}

.loader__bar {
  width: clamp(220px, 24vw, 320px);
  height: 2px;
  background: rgba(88, 75, 58, .16);
  overflow: hidden;
}

.loader__bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: #3E7150;
}

@media (max-width: 768px) {
  .loader__shadow {
    opacity: .27;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, #000 27%, rgba(0, 0, 0, .65) 100%);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, #000 27%, rgba(0, 0, 0, .65) 100%);
  }

  .loader__logo { width: clamp(120px, 34vw, 150px); }

  .loader__bar { width: min(64vw, 260px); }
}