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;
}

/* =========================
   버블 관련
   ========================= */

/* 버블 전체 영역 */
.bubble-wrap {
  position: absolute;

  /* 화면에서 버블 중심 위치 */
  top: 42%;
  left: 74%;                      /* 오른쪽 영역 중심 */
  transform: translate(-50%, -50%);

  /* 버블 크기 – 화면 비율 기준 */
  width: 60vw;
  height: 60vw;

  pointer-events: none;
  z-index: 5;
}

/* PNG 프레임 */
#bubble-frame {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* 텍스트 — PNG의 정확한 중앙 */
.bubble-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #353535a1;
  z-index: 10;
  pointer-events: none;
}

.bubble-text .title {
  font-size: clamp(30px, 2.7vw, 45px);
  font-weight: 900;
}

.bubble-text .value {
  font-size: clamp(100px, 9vw, 220px);
  font-weight: 700;
  line-height: 1;
}

.bubble-text .value span {
  font-size: 0.45em;
  margin-left: 0.12em;
  position: relative;
  top: 0.06em;
}

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

.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: 6vh;
  z-index: 10;
  pointer-events: none;
}

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

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

.tree-wrap .tree-low {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.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: clamp(32px, 3.4vw, 72px);
  font-weight: 700;
  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 .smile {
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: center center;
  margin-left: 0.15em;
  font-size: 0.9em;
}

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

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

/* "이곳은 ~ 를 마실 수 있는" 부분 – 볼드 */
.bottom-text .ko-prefix,
.bottom-text .ko-forest,
.bottom-text .ko-mid {
  font-weight: 700;
}

/* “숲속의 산소”만 강조 – 조금 더 크게 */
.bottom-text .ko-forest {
  font-size: 1.05em;   /* 🔥 추천 크기 */
  font-weight: 700;     /* 강조 유지 */
}

/* “공간이에요” – 보통 굵기 */
.bottom-text .ko-suffix {
  font-weight: 400;
}

/* 아래 영어 문장 */
.bottom-text .en-sub {
  margin-top: -2px;
  font-size: 0.5em;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
  line-height: 1.2;
}

/* 영문 강조 부분 */
.bottom-text .en-forest {
  font-weight: 600;
}

/* =========================
   배경 효과 (wind / leaf)
   ========================= */

.wind-layer {
  position: absolute;
  top: 10vh;
  left: 15;
  width: 100vw;
  height: 80vh;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.leaf-layer {
  position: absolute;
  top: 10vh;
  left: 0;
  width: 100vw;
  height: 80vh;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  filter: none;
}

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

.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);
  }
}

/* =========================
   FLYING LEAVES (나무에서 링으로 날아가는 나뭇잎)
   ========================= */

.leaf-flying {
  position: absolute;

  /* 시작 위치: tree-wrap 근처 (조금 오른쪽, 중간 높이) */
  left: 26vw;
  bottom: 42vh;

  width: 28px;   /* 기존 18px → 증가 */
  height: 56px;  /* 기존 36px → 증가 */

  /* 나뭇잎 모양 */
  background: linear-gradient(145deg, #9be879, #3a7f3b);
  border-radius: 70% 10% 70% 10%;
  box-shadow: 0 0 8px rgba(155, 232, 121, 0.6);

  transform-origin: center;
  opacity: 0;

  pointer-events: none;
  z-index: 4; /* tree(3)보다 위, 버블(5)보다 약간 아래 또는 비슷하게 */

  animation-name: leaf-fly;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* 각 잎마다 속도/타이밍 다르게 */
.leaf1 { animation-duration: 6s; animation-delay: 0s; }
.leaf2 { animation-duration: 6.4s; animation-delay: 0.4s; }
.leaf3 { animation-duration: 6.8s; animation-delay: 1.2s; }
.leaf4 { animation-duration: 7.2s; animation-delay: 2.0s; }
.leaf5 { animation-duration: 7.7s; animation-delay: 2.8s; }
.leaf6 { animation-duration: 6.3s; animation-delay: 3.5s; }
.leaf7 { animation-duration: 7.5s; animation-delay: 4.0s; }


/* 💨 나뭇잎 이동 경로:
   tree-wrap(왼쪽) → bubble-wrap(오른쪽) 근처로 */
@keyframes leaf-fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  35% {
    /* 중간쯤에서 위로 살짝 올라가며 흔들 */
    transform: translate(18vw, 6vh) rotate(60deg) scale(1);
  }
  70% {
    transform: translate(32vw, 3vh) rotate(190deg) scale(0.9);
  }
  100% {
    /* 링 근처 좌표 (대략 bubble 중심 쪽) */
    transform: translate(40vw, 4vh) rotate(320deg) scale(0.5);
    opacity: 0;
  }
}

/* =========================
   AIR PARTICLES (신선한 공기 / 빛 입자)
   ========================= */

.air-particle {
  position: absolute;

  /* 나뭇잎보다 약간 위쪽 지점에서 시작 */
  left: 24vw;
  bottom: 46vh;

  width: 12px;
  height: 12px;
  border-radius: 50%;

  background: radial-gradient(circle at 30% 30%,
    #eaffff,
    #4fe3ff 40%,
    transparent 70%);
  filter: blur(1px);
  opacity: 0;

  pointer-events: none;
  z-index: 4;

  animation-name: air-fly;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.air1 { animation-duration: 4.8s; animation-delay: 0.4s; }
.air2 { animation-duration: 5.2s; animation-delay: 1.6s; }
.air3 { animation-duration: 5.6s; animation-delay: 2.3s; }

/* 공기가 나무에서 링 쪽으로 휘며 빨려가는 느낌 */
@keyframes air-fly {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  40% {
    transform: translate(16vw, 7vh) scale(0.9);
    opacity: 1;
  }
  70% {
    transform: translate(30vw, 5vh) scale(0.7);
    opacity: 0.6;
  }
  100% {
    transform: translate(38vw, 6vh) scale(0.3);
    opacity: 0;
  }
}

/* =========================
   RING GLOW (링 주변 숨쉬는 빛 효과)
   ========================= */

.ring-glow {
  position: absolute;

  /* bubble-wrap가 오른쪽 70% 근처라서 그 주변에 배치 */
  right: 6vw;
  top: 42%;

  width: 28vw;
  height: 28vw;
  border-radius: 50%;

  background: radial-gradient(circle,
    rgba(120, 255, 220, 0.35),
    transparent 70%);
  filter: blur(16px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 4;

  animation: ring-pulse 4s ease-in-out infinite;
}

@keyframes ring-pulse {
  0% {
    transform: translate(6%, -2%) scale(0.95);
    opacity: 0.14;
  }
  50% {
    transform: translate(0, 0) scale(1.05);
    opacity: 0.32;
  }
  100% {
    transform: translate(6%, -2%) scale(0.95);
    opacity: 0.14;
  }
}