/* assets/css/page-5750.css */

/* リセットと基本設定 */
html, body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  /* 背景用カスタムプロパティ（GSAP で操作）*/
  --grid-offset: 0;
  --scan-pos: 0;
}

/* ローディング画面 */
.loading-screen {
  position: fixed;
  inset: 0;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ローダー：グリッド状の四角形アニメーション */
.loading-screen .container {
  width: 80px;
  height: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  transform: rotate(-45deg);
}
.loading-screen .square {
  background-color: white;
  display: grid;
  place-items: center;
  border-radius: 5px;
  animation: load 1.6s ease infinite;
}
@keyframes load {
  0%   { transform: scale(1); }
  50%  { transform: scale(0); background-color: var(--color); }
  100% { transform: scale(1); }
}
.loading-screen .one   { --color: magenta; }
.loading-screen .two   { animation-delay: 0.1s; --color: lime; }
.loading-screen .three { animation-delay: 0.2s; --color: blue; }
.loading-screen .four  { animation-delay: 0.3s; --color: yellow; }
.loading-screen .five  { animation-delay: 0.4s; --color: orange; }

/* スライダー全体コンテナ */
.slider-container {
  height: 100vh;
  position: relative;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.slider video {
  width: 80%;
  max-width: 1600px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0,255,255,0.15));
}

/* テキストボックス */
.info-box {
  position: absolute;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2rem;
  border-radius: 8px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,255,255,0.25);
  font-size: 1.3rem;
  max-width: 600px;
  overflow: hidden;
}
.slider1-textbox { top: 10%;  left: 5%; }
.slider2-textbox { bottom: 15%; right: 5%; }
.slider3-textbox { top: 25%;  right: 10%; }

/* テキストボックスの光ライン（擬似要素） */
.info-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(0,255,255,0.6) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slider {
    flex-direction: column;
  }
  .slider video {
    width: 100%;
  }
  .info-box {
    position: static;
    margin: 1rem auto 0;
    max-width: 90%;
    font-size: 1rem;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }
  .slider1-textbox,
  .slider2-textbox,
  .slider3-textbox {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}

/* 最終リンク */
.final-links {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;           /* JS で制御 */
  z-index: 20;
  pointer-events: none; /* JS で on/off */
}
.final-links a {
  display: block;
  margin: 20px 0;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, transform 0.3s ease;
}
.final-links a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #0ff;
  transition: width 0.3s ease, left 0.3s ease;
}
.final-links a:hover {
  color: #0ff;
  transform: scale(1.05);
  text-shadow: 0 0 8px #0ff;
}
.final-links a:hover::before {
  left: 0;
  width: 100%;
}

/* ─────────────────────────────────────────
   グリッド背景アニメーション + スキャンライン
──────────────────────────────────────── */
#customPageBody {
  background-color: black;
}
body::before {
  --line: rgba(255,255,255,0.08);
  --size: 2.75rem;
  content: '';
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(90deg, var(--line) 0.0625rem, transparent 0.0625rem var(--size)) 50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 0.0625rem, transparent 0.0625rem var(--size)) 50% 50% / var(--size) var(--size);
  background-position: 0 0, 0 0;
  mask: linear-gradient(-20deg, transparent 50%, #f0f0f0);
  position: fixed;
  opacity: 0;
  animation: fadeInGrid 1s forwards 3s, gridMove 60s linear infinite 3s;
}
@keyframes fadeInGrid {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gridMove {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 1000px 1000px, -1000px -1000px; }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  background-position: 0 calc(var(--scan-pos) * 1px);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: scanFade 1s forwards 3s;
}
@keyframes scanFade {
  to { opacity: 1; }
}