/* ===================================================================
   gate.css  —  '문을 열고 들어가는' 시작 화면  ★ 포털 공통
   [2026-09-17] 오너 요청: "앱을 켜자마자 카드가 보이지 말고, 신비한 세계의
   문을 열고 들어가는 느낌. 3D 로."

   ⚠ 동영상 파일이 아니라 CSS 3D 변환이다.
     perspective + rotateY 로 문짝이 실제 공간에서 열리고,
     그 뒤 무대 전체를 확대하며 페이드해서 '문 안으로 들어가는' 시점을 만든다.
     영상 파일은 수 MB라 폰에서 느리고, 이미지·미디어 파일을 쓰지 않는
     이 앱의 원칙(CLAUDE.md 3절)도 깨진다.

   ★ 타로 전용이 아니다. 앱 6개가 같은 관문을 쓰고 문구만 바꿔 끼운다.
   =================================================================== */

.gate[hidden] { display: none !important; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  padding: 24px 18px;
  background: radial-gradient(120% 90% at 50% 38%, #241a5c 0%, #100a30 46%, #05030f 100%);
  overflow: hidden;
  opacity: 1;
  transition: opacity .85s ease;
}

/* 문이 열린 뒤: 무대가 커지며 통과 → 화면이 사라진다 */
.gate.is-through { opacity: 0; pointer-events: none; }

/* ---------- 하늘 : 별 + 성운 ---------- */
.gate__sky {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.gate__sky::before,
.gate__sky::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
}
.gate__sky::before {
  width: 62vmin; height: 46vmin;
  left: 6%; top: 10%;
  background: radial-gradient(circle, rgba(143,123,255,.4), transparent 70%);
}
.gate__sky::after {
  width: 54vmin; height: 44vmin;
  right: 4%; bottom: 8%;
  background: radial-gradient(circle, rgba(255,209,102,.22), transparent 70%);
}
.gate__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* ---------- 무대 : 여기가 3D 공간이다 ---------- */
.gate__stage {
  position: relative;
  width: min(76vw, 320px);
  aspect-ratio: 300 / 460;
  perspective: 900px;
  perspective-origin: 50% 46%;
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(.5,.02,.3,1);
  flex: 0 0 auto;
}
/* 문 안으로 빨려 들어가는 시점 */
.gate.is-through .gate__stage { transform: scale(3); }

/* 문틈에서 새어 나오는 빛 */
.gate__glow {
  position: absolute;
  left: 50%; top: 46%;
  width: 10%; height: 62%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,246,215,1), rgba(255,209,102,.7) 38%, transparent 74%);
  filter: blur(6px);
  opacity: .85;
  animation: seam 3s ease-in-out infinite;
  transition: width 1.3s ease, height 1.3s ease, opacity 1.3s ease, filter 1.3s ease;
}
@keyframes seam {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scaleX(.85); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scaleX(1.25); }
}

/* 문이 열리며 화면 전체로 번지는 빛 — '들어가는' 느낌의 절반은 이 빛이 만든다 */
.gate__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
              rgba(255,248,224,.98), rgba(255,209,102,.55) 26%, transparent 64%);
  opacity: 0;
  transition: opacity .6s ease;
}
.gate.is-opening .gate__flash { opacity: .45; }
.gate.is-through .gate__flash { opacity: .92; transition-duration: .5s; }
.gate.is-opening .gate__glow {
  width: 150%; height: 130%;
  opacity: 1;
  filter: blur(28px);
  animation: none;
}

/* ---------- 문짝 ---------- */
.gate__doors {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.gate__door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 1.3s cubic-bezier(.62,.02,.24,1), filter 1.3s ease;
  will-change: transform;
}
.gate__door svg { display: block; width: 100%; height: 100%; }
.gate__door--l { left: 0;  transform-origin: left center; }
.gate__door--r { right: 0; transform-origin: right center; }
.gate__door--r svg { transform: scaleX(-1); }

.gate.is-opening .gate__door--l { transform: rotateY(-108deg); filter: brightness(.55); }
.gate.is-opening .gate__door--r { transform: rotateY(108deg);  filter: brightness(.55); }
.gate.is-opening .gate__door { pointer-events: none; }

/* 누르기 전 살짝 앞으로 — 만질 수 있는 물건처럼 */
.gate:not(.is-opening) .gate__door:hover { filter: brightness(1.12); }

/* 문틀 : 문짝 위에 덮여 고정된다 */
.gate__frame {
  position: absolute;
  inset: -6% -9% -4%;
  pointer-events: none;
}
.gate__frame svg { display: block; width: 100%; height: 100%; }

/* ---------- 글자 ---------- */
.gate__copy {
  position: relative;
  text-align: center;
  transition: opacity .5s ease, transform .5s ease;
  flex: 0 0 auto;
}
.gate.is-opening .gate__copy { opacity: 0; transform: translateY(14px); }

.gate__brand {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .3em;
  color: #ffd166;
  opacity: .85;
}
.gate__title {
  margin: 0 0 10px;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #f4efff;
  text-shadow: 0 0 22px rgba(255,209,102,.35);
}
.gate__note {
  margin: 0 0 20px;
  font-size: 13px;
  color: #b3add8;
}
.gate__btn {
  min-height: 50px;
  padding: 0 30px;
  border: 1px solid rgba(255,209,102,.75);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,209,102,.18), rgba(255,209,102,.06));
  color: #ffe9b0;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255,209,102,.4);
  animation: knock 2.8s ease-in-out infinite;
}
@keyframes knock {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,209,102,.34); }
  50%      { box-shadow: 0 0 26px 3px rgba(255,209,102,.22); }
}
.gate__btn:hover { background: linear-gradient(180deg, rgba(255,209,102,.3), rgba(255,209,102,.1)); }

/* ---------- 문이 열린 뒤 앱이 떠오른다 ---------- */
body.is-gated { overflow: hidden; }
body.is-gated .pt-header,
body.is-gated .pt-nav,
body.is-gated .pt-main,
body.is-gated .pt-footer,
body.is-gated .ad-slot { opacity: 0; }

.pt-header, .pt-nav, .pt-main, .pt-footer, .ad-slot {
  transition: opacity .7s ease;
}

/* ---------- 움직임을 줄여 달라고 한 사람에게는 애니메이션 없이 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gate__star, .gate__glow, .gate__btn { animation: none !important; }
  .gate, .gate__stage, .gate__door, .gate__copy { transition-duration: .01ms !important; }
}