:root {
  color-scheme: dark;
  --deep-teal: #0b333a;
  --edge-black: #030e10;
  --ink-teal: #072429;
  --warm: 250, 228, 180;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--edge-black);
}

/* JS가 매 프레임 갱신하는 값
   --glow 빛 세기 0~1. 문이 열린 만큼을 조금 늦게 따라가며 번진다
   --idle 닫힌 문틈 빛 1~0
   --gx   바닥 기준 문틈 오른쪽 끝(%). 왼쪽 끝은 문틀 안쪽 39.4%
   --bl, --br  바닥 빛이 끝나는 쪽의 좌우 끝(%) */
.splash {
  --glow: 0;
  --idle: 1;
  --gx: 39.4;
  --bl: 38;
  --br: 41;

  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-teal);
}

/* 가장자리는 거의 검정. 문이 열리면 어둠이 조금 물러난다 */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 75% 62% at 50% 52%,
      rgba(3, 14, 16, 0) 30%,
      rgba(3, 14, 16, 0.55) 68%,
      rgba(3, 14, 16, 0.92) 92%,
      rgba(2, 10, 12, 0.98) 100%
    ),
    rgba(3, 14, 16, calc(0.28 * (1 - var(--glow))));
  opacity: calc(1 - var(--glow) * 0.22);
}

/* Stellar Serif Bold Condensed (동서대학교 스텔라체). 무료 사용 허용, 수정·재배포 금지, BI/CI 사용 금지 */
@font-face {
  font-family: "Stellar Serif";
  src: url("assets/fonts/stellar-serif-bold-condensed.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 문 아래 안내 문구. 문이 열린 뒤 천천히 나타난다 */
.coming-soon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 16svh);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 16px;
  pointer-events: none;
  text-align: center;
  color: rgba(var(--warm), 0.86);
  animation: fade-in 1400ms ease-out 2600ms both;
}

.coming-soon-en {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  opacity: 0.85;
}

.coming-soon-ko {
  font-family: "Stellar Serif", serif;
  font-size: clamp(24px, 7vw, 30px);
  font-weight: normal;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

/* 문 주변으로 퍼지는 온기 */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--glow);
  background: radial-gradient(
    ellipse 70% 48% at 50% var(--door-y, 64%),
    rgba(var(--warm), 0.1) 0%,
    rgba(var(--warm), 0.04) 45%,
    transparent 78%
  );
}

/* 로고와 문을 한 묶음으로 화면 가운데에 둔다 */
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(72px, 15svh, 150px);
  transform: translateY(-4svh);
}

/* 원본 PNG의 투명 여백을 잘라 보이게 하는 틀 (원본 파일은 그대로) */
.logo-crop {
  position: relative;
  width: min(62vw, 300px);
  aspect-ratio: 1240 / 580;
  margin: 0;
  overflow: hidden;
  animation: fade-in 1200ms ease-out both;
}

/* 제자리에서 문 빛을 따라 은은하게 밝아진다 */
.brand-logo {
  display: block;
  width: 123.87%;
  max-width: none; /* 공유 페이지 기본 스타일(img max-width:100%)이 잘라내기 틀을 깨지 않도록 */
  height: auto;
  margin: -19.35% 0 0 -14.11%;
  user-select: none;
  pointer-events: none;
  filter: brightness(calc(0.78 + var(--glow) * 0.26));
}

/* 문 묶음 */
.portal {
  --w: clamp(66px, 19vw, 88px);

  position: relative;
  width: var(--w);
  aspect-ratio: 0.58;
  animation: fade-in 1200ms ease-out both;
}

.portal > span,
.floor > span {
  position: absolute;
  display: block;
}

/* 벽에 파인 아치 */
.recess {
  inset: -12% -22% -1%;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: linear-gradient(to bottom, rgba(4, 28, 33, 0.5), rgba(4, 28, 33, 0.22) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(var(--warm), calc(0.03 + var(--glow) * 0.07));
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* 문 뒤 벽에 번지는 빛. 문틈이 있는 왼쪽 아래가 조금 더 밝다 */
.halo {
  left: 42%;
  top: 70%;
  width: 420%;
  height: 300%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--glow);
  transform: translate(-50%, -50%) scale(calc(0.7 + var(--glow) * 0.3));
  background: radial-gradient(
    closest-side,
    rgba(var(--warm), 0.16) 0%,
    rgba(var(--warm), 0.06) 35%,
    rgba(var(--warm), 0.015) 65%,
    transparent 100%
  );
}

/* ---------- 문 (SVG, 모양은 splash.js가 매 프레임 계산) ---------- */
.door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.frame {
  fill: var(--ink-teal);
  stroke: rgba(26, 74, 81, 0.55);
  stroke-width: 0.012;
}

.room {
  opacity: calc(0.2 + var(--glow) * 0.8);
}

.room-lamp {
  opacity: var(--glow);
}

/* 문틈 쪽(왼쪽) 문설주 안쪽 면이 가게 빛을 받는다 */
.jamb-rim {
  stroke: rgb(var(--warm));
  stroke-width: 0.014;
  opacity: calc(var(--glow) * 0.5);
}

/* 문짝 두께 면. 문틈에서 나온 빛을 정면으로 받는다 (색은 JS) */
.leaf-edge {
  stroke-linejoin: round;
}

.leaf {
  stroke: #1a4a51;
  stroke-width: 0.008;
  stroke-linejoin: round;
}

.leaf-panel {
  fill: none;
  stroke: rgba(26, 74, 81, 0.6);
  stroke-width: 0.008;
}

.knob {
  fill: #d7ad55;
  stroke: rgba(5, 25, 29, 0.8);
  stroke-width: 0.006;
}

/* 닫혀 있을 때 손잡이 쪽 틈과 문 아래로 새는 빛 */
.seam,
.under-gap {
  stroke: rgb(var(--warm));
  stroke-width: 0.014;
  stroke-linecap: round;
  opacity: calc(var(--idle) * 0.55);
  filter: drop-shadow(0 0 0.02px rgb(var(--warm)));
  animation: seam-breathe 2.4s ease-in-out infinite;
}

.sill {
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: #062126;
  box-shadow: 0 -1px 0 rgba(var(--warm), calc(0.05 + var(--glow) * 0.3));
}

/* ---------- 바닥 ---------- */
/* 문 너비의 4배. 문은 37.5% ~ 62.5%, 문틀 안쪽은 39.4% ~ 60.6% 구간 */
.floor {
  top: 100%;
  left: 50%;
  width: 400%;
  height: 62%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 문 아래 접지 그림자 */
.ground {
  left: 30%;
  right: 30%;
  top: -10%;
  height: 40%;
  border-radius: 50%;
  opacity: calc(1 - var(--glow) * 0.35);
  background: radial-gradient(ellipse at 50% 30%, rgba(2, 18, 22, 0.55), transparent 70%);
}

/* 바닥에서 되비치는 넓고 흐린 빛 */
.pool {
  left: 24%;
  width: 40%;
  top: -14%;
  height: 70%;
  border-radius: 50%;
  opacity: calc(var(--glow) * 0.55);
  background: radial-gradient(ellipse at 50% 20%, rgba(var(--warm), 0.22), rgba(var(--warm), 0.06) 45%, transparent 72%);
  filter: blur(calc(var(--w) * 0.06));
}

.spill {
  inset: 0;
  transform-origin: 50% 0;
  transform: scaleY(calc(0.45 + var(--glow) * 0.55));
}

/* clip-path는 filter 뒤에 적용되므로, 자른 모양은 ::before에 두고 흐림은 부모에 준다 */
.spill::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* 문틈 모양 그대로 떨어지는 빛. 문턱 가까이가 가장 진하고 빠르게 옅어진다 */
.spill-core {
  opacity: var(--glow);
  filter: blur(calc(var(--w) * 0.035));
}

.spill-core::before {
  clip-path: polygon(
    39.4% 0,
    calc(var(--gx) * 1%) 0,
    calc(var(--br) * 1%) 100%,
    calc(var(--bl) * 1%) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(var(--warm), 0.7) 0%,
    rgba(var(--warm), 0.3) 18%,
    rgba(var(--warm), 0.1) 50%,
    transparent 92%
  );
}

/* 가장자리로 번지는 넓은 빛 */
.spill-soft {
  opacity: calc(var(--glow) * 0.8);
  filter: blur(calc(var(--w) * 0.14));
}

.spill-soft::before {
  clip-path: polygon(
    37% 0,
    calc(var(--gx) * 1% + 2%) 0,
    calc(var(--br) * 1% + 6%) 100%,
    calc(var(--bl) * 1% - 8%) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(var(--warm), 0.32) 0%,
    rgba(var(--warm), 0.1) 40%,
    transparent 90%
  );
}

/* ---------- 키프레임 ---------- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes seam-breathe {
  0%, 100% { stroke-opacity: 0.6; }
  50% { stroke-opacity: 1; }
}

/* ---------- 화면 크기 ---------- */
@media (min-width: 641px) {
  .logo-crop {
    width: min(30vw, 340px);
  }

  .portal {
    --w: clamp(72px, 6.5vw, 96px);
  }
}

@media (max-height: 560px) {
  .stage {
    gap: 40px;
  }

  .logo-crop {
    width: min(34vw, 240px);
  }

  .portal {
    --w: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-crop,
  .portal,
  .seam,
  .under-gap,
  .coming-soon {
    animation: none;
  }
}