/* ═══════════════════════════════════════════════════════════════════
   開場：海報 → 影片 → 主頁

   流程（class 由 js/main.js 依序加在 #gate 上）：
     is-poster  → 海報全螢幕佔滿，提示文字呼吸閃爍，靜待點擊
     is-playing → 海報淡出，影片浮現並全螢幕自動播放
     is-done    → 影片結束後整個開場淡出，交棒給主頁
   ═══════════════════════════════════════════════════════════════════ */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  cursor: pointer;
  overflow: hidden;
  background: #000;
  transition: opacity .8s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.gate.is-done {
  opacity: 0;
  pointer-events: none;
}


/* ── 海報與影片：兩者皆全螢幕佔滿 ─────────────────────────────── */

.gate-poster,
.gate-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 佔滿畫面，比例不符時裁切，不留黑邊 */
  object-position: center;
  /* 各自獨立合成層，避免 iOS 在淡出時重繪造成閃爍 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 影片始終疊在海報「下方」先靜靜播放；
   等它真正畫出第一個影格後，才淡出上層海報露出影片，
   全程不會有黑底冒出來（消除手機上的閃爍）。 */
.gate-video {
  z-index: 1;
  background: #000;
}

.gate-poster {
  z-index: 2;
  will-change: opacity;
  transition: opacity .6s ease-in-out;
}

.gate.is-playing .gate-poster {
  opacity: 0;
  pointer-events: none;
}


/* ── 提示文字 ─────────────────────────────────────────────────── */

.gate-hint {
  position: absolute;
  left: 50%;
  bottom: 0px;
  z-index: 4;
  transform: translateX(-50%);
  width: clamp(40px, 9vmin, 54px);
  height: clamp(40px, 9vmin, 54px);
  display: grid;
  place-items: center;
  color: #5c4632;
  transition: opacity .5s ease-out;
  pointer-events: none;
}

/* 金線同心圓觸點：整體柔和呼吸 */
.gate-hint-icon {
  position: relative;
  z-index: 1;
  width: 76%;
  height: 76%;
  overflow: visible;
  filter: drop-shadow(0 1px 7px rgba(74, 56, 38, .28));
  animation: hint-breathe 3s ease-in-out infinite;
}
@keyframes hint-breathe {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}

/* 中心珍珠：週期性的輕壓脈動，暗示「觸碰」 */
.gate-hint-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: hint-press 3s ease-in-out infinite;
}
@keyframes hint-press {
  0%, 100% { transform: scale(1);    opacity: 1; }
  46%      { transform: scale(.7);   opacity: .85; }  /* 按下 */
  60%      { transform: scale(1.05); }
}

/* 金色細線漣漪：隨珍珠按下向外擴散 */
.gate-hint-ripple {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  border: 1px solid rgba(194, 168, 120, .9);
  box-shadow: 0 0 6px rgba(194, 168, 120, .35);
  opacity: 0;
  transform: scale(.55);
  animation: hint-ripple 3s ease-out infinite;
}
.gate-hint-ripple:nth-of-type(2) { animation-delay: 1.5s; }
@keyframes hint-ripple {
  0%,
  46%  { opacity: 0;   transform: scale(.55); }
  60%  { opacity: .7; }
  100% { opacity: 0;   transform: scale(1.9); }
}

/* 開始播放後隱藏提示 */
.gate:not(.is-poster) .gate-hint {
  opacity: 0;
  animation: none;
}


/* ── 無障礙：使用者要求減少動態時，直接進站 ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gate { transition-duration: .01ms !important; }
  .gate-poster { transition: none !important; }
  .gate-hint-icon,
  .gate-hint-dot,
  .gate-hint-ripple { animation: none !important; }
  .gate-hint-ripple { display: none; }
}