:root {
  --preloader-bg: rgba(14, 24, 52, 0.45);
  --preloader-bg-fallback: rgba(14, 24, 52, 0.92);
  --preloader-blur: blur(14px) saturate(120%);
  --preloader-logo-size: 96px;
  --preloader-logo-size-sp: 72px;
  --preloader-ghost-opacity: 0.18;
  --preloader-reveal-duration: 1.6s;
  --preloader-fade-duration: 0.6s;
}

.tky-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--preloader-bg);
  -webkit-backdrop-filter: var(--preloader-blur);
          backdrop-filter: var(--preloader-blur);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--preloader-fade-duration) ease,
    visibility 0s linear var(--preloader-fade-duration);
}

.tky-preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tky-preloader__logo {
  position: relative;
  width: var(--preloader-logo-size);
  aspect-ratio: 1 / 1;
  transition: transform var(--preloader-fade-duration) ease;
}

.tky-preloader.is-loaded .tky-preloader__logo {
  transform: scale(1.04);
}

.tky-preloader__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tky-preloader__ghost {
  opacity: var(--preloader-ghost-opacity);
}

.tky-preloader__reveal {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 60%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 100% 250%;
          mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0%;
          mask-position: 0 0%;
  animation: tky-preloader-reveal var(--preloader-reveal-duration) cubic-bezier(0.45, 0, 0.25, 1) 0.15s forwards;
}

@keyframes tky-preloader-reveal {
  0% {
    -webkit-mask-position: 0 0%;
            mask-position: 0 0%;
    transform: translateY(6px);
  }
  100% {
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
    transform: translateY(0);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tky-preloader {
    background: var(--preloader-bg-fallback);
  }
}

@media (max-width: 960px) {
  .tky-preloader__logo {
    width: var(--preloader-logo-size-sp);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tky-preloader__reveal {
    -webkit-mask-image: none;
            mask-image: none;
    animation: tky-preloader-fadein 0.4s ease forwards;
    opacity: 0;
  }
  @keyframes tky-preloader-fadein {
    to { opacity: 1; }
  }
}