/**
 * File Name: loading.css
 * 2026-07-03 | Final Check
 */

html {
  scrollbar-gutter: stable;
}

body.is-loading {
  overflow: hidden;
}

/* ==============================================================================
 * LOADING CONTAINER & SEASONS (ローディングコンテナ & 季節別カラー定義)
 * ============================================================================== */
.p-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.85);
  --season-color: #1d3d5e;
  --season-bg-color: rgba(29, 61, 94, 0.15);
}

.p-loading[data-season="spring"] {
  --season-color: #34a853;
  --season-bg-color: rgba(52, 168, 83, 0.15);
}

.p-loading[data-season="summer"] {
  --season-color: #46b4e6;
  --season-bg-color: rgba(70, 180, 230, 0.15);
}

.p-loading[data-season="autumn"] {
  --season-color: #e67e22;
  --season-bg-color: rgba(230, 126, 34, 0.15);
}

.p-loading[data-season="winter"] {
  --season-color: #e74c3c;
  --season-bg-color: rgba(231, 76, 60, 0.15);
}

/* ==============================================================================
 * LOADING ANIMATION ELEMENTS (ローディング各アニメーション要素)
 * ============================================================================== */
.p-loading__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

.p-loading__circle-zone {
  width: 100%;
  height: 100%;
}

.p-loading__circle-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.p-loading__circle-bg {
  fill: none;
  stroke: var(--season-bg-color);
  stroke-width: 4;
}

.p-loading__circle-bar {
  fill: none;
  stroke: var(--season-color);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.05s linear;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
}

.p-loading__wave {
  fill: var(--season-color);
  opacity: 0.15;
  display: none;
  transition: transform 0.05s linear;
  transform-origin: center bottom;
  transform: translateY(100px);
}

.p-loading__counter-zone {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-family: sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--season-color);
  opacity: 1;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

/* ==============================================================================
 * MEDIA QUERIES
 * ============================================================================== */

/* スマホ横向き（低画面高） */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .p-loading__inner {
    width: 80px;
    height: 80px;
  }
  .p-loading__counter-zone {
    font-size: 1.1rem;
  }
}

/* タブレット・標準PCサイズ */
@media screen and (min-width: 768px) and (min-height: 501px) {
  /* 共通のブレイクポイントデザイン原則の器として配置 */
}

/* 大型デスクトップサイズ */
@media screen and (min-width: 1024px) and (min-height: 501px) {
  /* 共通のブレイクポイントデザイン原則の器として配置 */
}