/* =========================================
   Page loader
========================================= */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #fff;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 350ms ease,
    visibility 350ms ease;
}

.page-loader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loader__logo {
  width: min(180px, 48vw);
  height: auto;

  opacity: 0;
  transform: translateY(8px);

  animation: loader-logo-fade-in 350ms ease forwards;
}

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

@keyframes loader-logo-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   Background performance optimization
   PC / Mobile: hybrid
   Reduced motion: static
========================================= */

.gradient-animation-layer {
  background-position: 0% 15%;
  will-change: transform;
}

.message-surface::before {
  background-position: 0% 18%;
  will-change: transform;
}

@keyframes gradient-water-base {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1.14) rotate(-2deg);
  }

  32% {
    transform: translate3d(4%, 1%, 0) scale(1.2) rotate(1.5deg);
  }

  66% {
    transform: translate3d(-1%, 5%, 0) scale(1.17) rotate(-1deg);
  }

  100% {
    transform: translate3d(5%, -3%, 0) scale(1.22) rotate(2.5deg);
  }
}

@keyframes message-gradient-flow {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(-1deg);
  }

  48% {
    transform: translate3d(3%, 1%, 0) scale(1.13) rotate(1.5deg);
  }

  100% {
    transform: translate3d(-1%, 4%, 0) scale(1.09) rotate(-1.5deg);
  }
}

/* OS側で動きを減らす設定の場合だけ完全静止 */
body[data-motion="static"] .gradient-animation-layer,
body[data-motion="static"] .gradient-animation-layer::before,
body[data-motion="static"] .gradient-animation-layer::after,
body[data-motion="static"] .message-surface::before {
  animation: none !important;
  will-change: auto !important;
}

body[data-motion="static"] .gradient-scroll-layer {
  transform: none !important;
  will-change: auto !important;
}