/* =========================================================
   SITE LOADER
========================================================= */

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

.site-loader {
  --loader-background: #f3f0e9;
  --loader-logo-width: clamp(126px, 12vw, 184px);
  --loader-progress: 0%;

  position: fixed;
  z-index: 99999;
  inset: 0;

  display: grid;
  place-items: center;
  overflow: hidden;

  background: var(--loader-background);
  color: var(--color-main);

  transition:
    background-color 0s linear 140ms,
    visibility 0s linear 1.15s;
}

.site-loader__center {
  position: relative;
  z-index: 3;

  display: grid;
  justify-items: center;
  width: min(320px, calc(100% - 48px));

  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.24s ease,
    transform 0.38s ease,
    filter 0.28s ease;
}

.site-loader__logo {
  position: relative;
  width: var(--loader-logo-width);
  aspect-ratio: 1 / 1;
}

.site-loader__logo-base,
.site-loader__logo-fill img {
  display: block;
  width: var(--loader-logo-width);
  height: 100%;
  object-fit: contain;
}

.site-loader__logo-base {
  opacity: 0.14;
  filter: grayscale(1) contrast(0.82);
}

.site-loader__logo-fill {
  position: absolute;
  inset: 0 auto 0 0;

  width: var(--loader-progress);
  overflow: hidden;

  transition: width 0.16s linear;
}

.site-loader__logo-fill img {
  max-width: none;
}

.site-loader__progress {
  width: min(218px, 72vw);
  height: 1px;
  margin-top: 20px;
  overflow: hidden;

  background: rgba(23, 54, 61, 0.14);
}

.site-loader__progress-bar {
  display: block;
  width: var(--loader-progress);
  height: 100%;

  background: var(--color-accent);
  transform-origin: left center;
  transition: width 0.16s linear;
}

.site-loader__value {
  margin: 9px 0 0;

  color: rgba(23, 54, 61, 0.58);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.site-loader__pieces {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
}

.site-loader.is-loader-armed .site-loader__pieces {
  opacity: 1;
}

.site-loader__piece {
  position: absolute;
  display: block;

  background: var(--loader-background);

  transform: translate3d(0, 0, 0) rotate(0deg) scale(1.012);

  opacity: 1;
  will-change: transform, opacity, filter;
}

/*
 * 読み込み完了後、ロゴを消して画面全体を三角形として破砕。
 */
.site-loader.is-loader-shattering {
  background-color: transparent;
  pointer-events: none;
}

.site-loader.is-loader-shattering .site-loader__center {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, -10px, 0) scale(0.96);
}

.site-loader.is-loader-shattering .site-loader__piece {
  opacity: 0;

  transform: translate3d(var(--loader-piece-x), var(--loader-piece-y), 0)
    rotate(var(--loader-piece-rotate)) scale(0.74);

  filter: blur(2px);

  transition:
    transform var(--loader-piece-duration) cubic-bezier(0.16, 1, 0.3, 1)
      var(--loader-piece-delay),
    opacity calc(var(--loader-piece-duration) * 0.72) ease
      var(--loader-piece-delay),
    filter var(--loader-piece-duration) ease var(--loader-piece-delay);
}

.site-loader.is-loader-fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (max-width: 640px) {
  .site-loader {
    --loader-logo-width: clamp(108px, 30vw, 142px);
  }

  .site-loader__progress {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__pieces {
    display: none;
  }

  .site-loader,
  .site-loader__center {
    transition-duration: 0.2s;
  }
}

/* =========================================================
   LUA HAVE SITE — MOTION LAYER v2
========================================================= */

/* =========================================================
   HERO / FRACTURED SPHERE CANVAS
========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 47%,
      rgba(23, 54, 61, 0.105),
      transparent 43%
    ),
    radial-gradient(
      circle at 25% 31%,
      rgba(216, 121, 67, 0.07),
      transparent 36%
    ),
    var(--color-sub);
}

.hero__canvas,
.hero__canvas-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__canvas {
  z-index: 0;
  opacity: 0.985;

  /*
   * 下端は線が途中で切れたように見えないよう、
   * 早めに薄くして次セクションへ溶かす。
   */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 66%,
    rgba(0, 0, 0, 0.9) 76%,
    rgba(0, 0, 0, 0.46) 89%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 66%,
    rgba(0, 0, 0, 0.9) 76%,
    rgba(0, 0, 0, 0.46) 89%,
    transparent 100%
  );
}

.hero__canvas-shade {
  z-index: 1;
  overflow: hidden;

  /*
   * 球体の右側にある本文の可読性を保ちつつ、
   * 砕けた三角片は途中まで見える濃度にする。
   */
  background:
    linear-gradient(
      90deg,
      rgba(243, 240, 233, 0) 0%,
      rgba(243, 240, 233, 0) 45%,
      rgba(243, 240, 233, 0.06) 57%,
      rgba(243, 240, 233, 0.28) 70%,
      rgba(243, 240, 233, 0.72) 86%,
      rgba(243, 240, 233, 0.95) 100%
    ),
    linear-gradient(
      180deg,
      rgba(243, 240, 233, 0.08) 0%,
      rgba(243, 240, 233, 0) 10%,
      rgba(243, 240, 233, 0) 65%,
      rgba(243, 240, 233, 0.22) 78%,
      rgba(243, 240, 233, 0.75) 93%,
      var(--color-sub) 100%
    );
}

/*
 * 左端と上端の見切れ専用ブラー。
 * 球体全体へfilterを掛けないため、中央の線は鮮明なまま。
 */
.hero__canvas-shade::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(243, 240, 233, 0.22) 0%,
      rgba(243, 240, 233, 0.05) 7%,
      transparent 15%
    ),
    linear-gradient(
      180deg,
      rgba(243, 240, 233, 0.18) 0%,
      rgba(243, 240, 233, 0.035) 6%,
      transparent 14%
    );

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 6%, transparent 16%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.58) 6%, transparent 15%);

  -webkit-mask-composite: source-over;

  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 6%, transparent 16%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.58) 6%, transparent 15%);

  mask-composite: add;
}

/*
 * 下端の見切れ専用ブラー。
 */
.hero__canvas-shade::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -8%;
  left: -5%;
  height: 45%;

  background: rgba(243, 240, 233, 0.11);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 25%,
    rgba(0, 0, 0, 0.72) 62%,
    #000 100%
  );

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 25%,
    rgba(0, 0, 0, 0.72) 62%,
    #000 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
}

html.motion-preload .hero__inner > * {
  opacity: 0;
  transform: translate3d(42px, 18px, 0);
  filter: blur(5px);
  transition:
    opacity 0.72s ease,
    transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease;
  transition-delay: calc(var(--hero-order, 0) * 150ms);
  will-change: opacity, transform, filter;
}

html.motion-preload .hero.is-hero-visible .hero__inner > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (max-width: 1100px) {
  .hero__canvas-shade {
    background:
      linear-gradient(
        90deg,
        rgba(243, 240, 233, 0) 0%,
        rgba(243, 240, 233, 0.03) 33%,
        rgba(243, 240, 233, 0.2) 52%,
        rgba(243, 240, 233, 0.72) 76%,
        rgba(243, 240, 233, 0.96) 100%
      ),
      linear-gradient(
        180deg,
        rgba(243, 240, 233, 0.08) 0%,
        rgba(243, 240, 233, 0) 11%,
        rgba(243, 240, 233, 0) 63%,
        rgba(243, 240, 233, 0.3) 79%,
        rgba(243, 240, 233, 0.8) 94%,
        var(--color-sub) 100%
      );
  }
}

@media (max-width: 760px) {
  .hero {
    background:
      radial-gradient(
        circle at 0% 39%,
        rgba(23, 54, 61, 0.095),
        transparent 48%
      ),
      radial-gradient(
        circle at 8% 26%,
        rgba(216, 121, 67, 0.06),
        transparent 38%
      ),
      var(--color-sub);
  }

  .hero__canvas {
    opacity: 0.66;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      rgba(0, 0, 0, 0.92) 55%,
      rgba(0, 0, 0, 0.42) 80%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      rgba(0, 0, 0, 0.92) 55%,
      rgba(0, 0, 0, 0.42) 80%,
      transparent 100%
    );
  }

  .hero__canvas-shade {
    background:
      linear-gradient(
        90deg,
        rgba(243, 240, 233, 0.05) 0%,
        rgba(243, 240, 233, 0.2) 30%,
        rgba(243, 240, 233, 0.7) 66%,
        rgba(243, 240, 233, 0.95) 100%
      ),
      linear-gradient(
        180deg,
        rgba(243, 240, 233, 0.08) 0%,
        rgba(243, 240, 233, 0) 12%,
        rgba(243, 240, 233, 0.16) 58%,
        rgba(243, 240, 233, 0.78) 88%,
        var(--color-sub) 100%
      );
  }

  .hero__canvas-shade::before {
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
  }

  .hero__canvas-shade::after {
    height: 46%;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* =========================================================
   TRIANGLE IMAGE REVEAL
========================================================= */

.motion-mask-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.triangle-reveal {
  position: absolute;
  inset: -2px;
  z-index: 10;
  display: block;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  color: var(--color-main-dark);
  pointer-events: none;
}

.triangle-reveal__piece {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.58s ease,
    transform 0.86s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--triangle-delay, 0ms);
  will-change: opacity, transform;
}

/*
 * 画像表示専用クラス。
 * 本文表示とは分離して、必ず画像が先に完了する。
 */
.is-image-revealed .triangle-reveal__piece {
  opacity: 0;
  transform: translate3d(var(--triangle-x, 0), var(--triangle-y, 0), 0)
    rotate(var(--triangle-rotate, 0deg)) scale(0.78);
}

/* =========================================================
   SERVICE CARD
========================================================= */

html.motion-preload .service-card.motion-service-card {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.45s ease,
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-preload .service-card.motion-service-card.is-card-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*
 * 本文は画像の三角解除が終了するまで出さない。
 */
html.motion-preload .service-card.motion-service-card .service-card__body > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(3px);
  transition:
    opacity 0.5s ease,
    transform 0.66s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
  transition-delay: calc(var(--body-order, 0) * 120ms);
  will-change: opacity, transform, filter;
}

html.motion-preload
  .service-card.motion-service-card.is-body-revealed
  .service-card__body
  > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* =========================================================
   FEATURE
========================================================= */

html.motion-preload .feature.motion-feature .feature__content {
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity 0.68s ease,
    transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.68s ease;
  will-change: opacity, transform, filter;
}

html.motion-preload
  .feature.motion-feature.motion-content-from-left
  .feature__content {
  transform: translate3d(-160px, 0, 0);
}

html.motion-preload
  .feature.motion-feature.motion-content-from-right
  .feature__content {
  transform: translate3d(160px, 0, 0);
}

html.motion-preload
  .feature.motion-feature.is-content-revealed
  .feature__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* =========================================================
   CONTACT
========================================================= */

html.motion-preload .contact .contact-motion-item {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  filter: blur(3px);
  transition:
    opacity 0.6s ease,
    transform 0.76s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
  transition-delay: calc(var(--contact-order, 0) * 110ms);
  will-change: opacity, transform, filter;
}

html.motion-preload .contact.is-contact-visible .contact-motion-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* =========================================================
   reCAPTCHA
========================================================= */

.form-recaptcha {
  min-height: 78px;
}

.form-recaptcha .g-recaptcha {
  max-width: 100%;
  transform-origin: left top;
}

/* =========================================================
   FALLBACK
========================================================= */

/*
 * JSエラー時も5秒後には必ず全コンテンツを表示。
 */
html.motion-fallback .hero__inner > *,
html.motion-fallback .service-card,
html.motion-fallback .service-card__body > *,
html.motion-fallback .feature__content,
html.motion-fallback .contact-motion-item {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html.motion-fallback .triangle-reveal {
  display: none !important;
}

@media (max-width: 760px) {
  /*
   * 表示前だけ左右へずらす
   */
  html.motion-preload
    .feature.motion-feature.motion-content-from-left:not(.is-content-revealed)
    .feature__content {
    transform: translate3d(-72px, 0, 0);
  }

  html.motion-preload
    .feature.motion-feature.motion-content-from-right:not(.is-content-revealed)
    .feature__content {
    transform: translate3d(72px, 0, 0);
  }

  /*
   * 表示完了後は必ず正しい位置へ戻す
   */
  html.motion-preload
    .feature.motion-feature.is-content-revealed
    .feature__content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@media (max-width: 420px) {
  .form-recaptcha .g-recaptcha {
    transform: scale(0.88);
  }

  .form-recaptcha {
    min-height: 69px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__canvas {
    opacity: 0.45;
  }

  html.motion-preload .hero__inner > *,
  html.motion-preload .service-card,
  html.motion-preload .service-card__body > *,
  html.motion-preload .feature__content,
  html.motion-preload .contact-motion-item,
  .triangle-reveal__piece {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .triangle-reveal {
    display: none;
  }
}