html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* ✅ 배경 페이지 넘김용 레이어 */
.bg-page {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* opacity: 0; */
  transition: opacity 0.8s ease;
}

/* 페이드 인 상태 */
.bg-page.bg-show {
  opacity: 1;
}

/* 실제 페이지 넘김 애니메이션 */
.bg-page.flip-in {
  z-index: 100;
  animation: pageFlip 0.8s ease forwards;
}

@keyframes pageFlip {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* 기본 배경 */
body {
  background-image: url('../src/low_back.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  position: relative;
  isolation: isolate;
}

/* =========================
   나무 / 로고 / 바닥 텍스트
   ========================= */

.tree-left {
  position: absolute;
  left: 10vw;
  bottom: 3vh;
  height: 70vh;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: normal;
}

.top-logo {
  position: absolute;
  top: 3vh;
  right: 4vw;
  height: 4vh;
  z-index: 10;
  pointer-events: none;
}

/* 나무 전체 컨테이너 */
.tree-wrap {
  position: absolute;
  left: 20vw;
  bottom: 12vh;
  height: 65vh;
  pointer-events: none;
  z-index: 3;
}

/* PNG / WEBM 공통: 컨테이너를 가득 채우되 비율 유지 */
.tree-wrap .tree-layer {
  position: absolute;
  bottom: 26px;
  left: 70px;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.tree-wrap .tree-high {
  transform: scale(1.1);   /* ← 1.0 = 원래, 1.25 = 25% 확대 */
  transform-origin: bottom left;  /* 기준점을 아래 왼쪽으로 고정 */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 하단 텍스트 */
/* .bottom-text {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  font-size: 45px;              
  font-weight: 400;            
  letter-spacing: -0.015em;     
  color: #000000;
  z-index: 20;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: opacity 0.4s ease;

  padding: 6px 0 20px;  
  background: rgba(255, 255, 255, 0.98);  
  box-sizing: border-box;
} */

.bottom-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  font-size: 35px;              /* ✅ 고정 45px */
  font-weight: 500;             /* ✅ Regular */
  letter-spacing: -0.015em;     /* ✅ 자간 -15 */
  color: #000000;

  z-index: 20;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;

  padding: 6px 0 20px;
  background: rgba(255, 255, 255, 0.98);
  box-sizing: border-box;

  transition: opacity 0.4s ease;

  /* ✅ 하얀 바 높이 고정 */
  min-height: 130px;          /* 원하는 높이로 조절 (예: 100~140) */
  display: flex;              /* ✅ 글자를 가운데 정렬 */
  flex-direction: column;
  justify-content: center;
}

/* ===== 하단 텍스트 상세 스타일 ===== */

/* 첫 번째 한글 라인 (전체 block로 만들어 위치 깨짐 방지) */
.bottom-text .ko-main {
  display: block;
  width: 100%;  
  font-weight: 600;
}

.bottom-text .ko-forest {
  color: #3C769A;     /* ✅ 요청한 색상 */
}

/* "이곳은 ~ 를 마실 수 있는" 부분 – 볼드 */
.bottom-text .ko-prefix,
.bottom-text .ko-mid,
.bottom-text .ko-suffix {
  color: #393939;
}

/* 아래 영어 문장 */
.bottom-text .en-sub {
  margin-top: -2px;
  font-size: 0.58em;
  color: #393939;
  font-weight: 400;
  line-height: 1.2;
}

.bottom-text .en-sub {
  margin-top: 10px;   /* ← 이 값으로 한글↔영문 간격 조절 */
}

/* =========================
   메인 / 로딩 화면
   ========================= */

.bg-fade {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  filter: brightness(0.8) blur(8px);
  transform: scale(1.02);
  transition:
    opacity 1.2s ease,
    filter 1.2s ease,
    transform 1.2s ease;
  z-index: -1;
}

/* 메인 화면: 처음엔 살짝 숨기기 */
.main-screen {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* 웹소켓 붙은 뒤 보여줄 때 */
.main-screen.show {
  opacity: 1;
}

/* 로딩 전체 레이어 */
.loading-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 로딩 안쪽 박스 */
.loading-inner {
  background: rgba(0, 0, 0, 0.55);
  padding: 24px 32px;
  border-radius: 16px;
  color: #fff;
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  text-align: center;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  font-size: 18px;
  font-weight: 500;
}

.loading-screen.hidden {
  display: none;
}

/* 로딩 로고/텍스트 애니메이션 */
.loading-wrapper {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-logo {
  height: 90px;
  width: auto;
  margin-bottom: 26px;
  animation: logoFloat 1.8s ease-in-out infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loading-text {
  font-size: 16px;
  color: #fff;
  letter-spacing: 1.5px;
  animation: blink 1.2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

@keyframes logoFloat {
  0%   { transform: translateY(-6px); opacity: 0.0; }
  30%  { opacity: 1; }
  50%  { transform: translateY(6px); }
  100% { transform: translateY(-6px); }
}

/* =========================
   TREE CANOPY SWAY (나무 잎 전체 흔들림)
   ========================= */

/* 풍성한 나무 잎 레이어 공통 */
.tree-canopy {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;

  background-image: url('../src/tree.png');  /* 기존 나무 이미지 재사용 */
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;

  pointer-events: none;
  opacity: 0.98; /* 필요하면 0.9~1.0 사이로 조절 */
}

/* 🔼 위쪽 잎 (가장 많이 흔들리는 영역) */
.canopy-top {
  /* 아래쪽을 잘라내고 윗부분만 남기는 느낌 (숫자는 tree.png에 맞춰 조금씩 조절해도 됨) */
  clip-path: inset(0 0 55% 0);  /* top right bottom left */
  transform-origin: 50% 90%;    /* 아래쪽을 기준으로 흔들리게 */
  animation: sway-top 7s ease-in-out infinite;
}

/* 🔁 중간 잎 레이어 */
.canopy-mid {
  clip-path: inset(20% 0 35% 0);
  transform-origin: 50% 95%;
  animation: sway-mid 8s ease-in-out infinite;
}

/* 🔽 아래쪽 잎 (줄기 가까운 잎 부분, 가장 덜 움직이게) */
.canopy-bottom {
  clip-path: inset(40% 0 18% 0);
  transform-origin: 50% 100%;
  animation: sway-bottom 9s ease-in-out infinite;
}

/* 🌿 위쪽 잎 애니메이션 */
@keyframes sway-top {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateX(-0.4vw) translateY(-0.5vh) rotate(-1.4deg) scale(1.01);
  }
  50% {
    transform: translateX(0.3vw) translateY(-0.8vh) rotate(1.8deg) scale(1.02);
  }
  75% {
    transform: translateX(-0.2vw) translateY(-0.4vh) rotate(-1deg) scale(1.01);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

/* 🌿 중간 잎 애니메이션 (조금만) */
@keyframes sway-mid {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateX(0.25vw) translateY(-0.3vh) rotate(0.9deg) scale(1.01);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

/* 🌿 아래쪽 잎 애니메이션 (아주 미세하게) */
@keyframes sway-bottom {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(0.15vw) translateY(-0.2vh) rotate(0.5deg);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
}