/* 1. NÚT MŨI TÊN TRUNG TÂM PHÁT SÁNG (CENTER ARROW BUTTON) */
.forest-journey-arrow-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 40, 0.28) 0%, rgba(20, 10, 35, 0.82) 75%);
  border: 2px solid rgba(255, 230, 160, 0.85);
  box-shadow:
    0 0 25px rgba(255, 160, 30, 0.65),
    0 0 50px rgba(180, 80, 255, 0.35),
    inset 0 0 15px rgba(255, 200, 80, 0.4);
  cursor: pointer;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: opacity 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
    transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.3s ease;
  animation: arrowPulseGlow 2.4s infinite ease-in-out;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
  -webkit-user-select: none;
}

.forest-journey-arrow-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow:
    0 0 35px rgba(255, 180, 50, 0.95),
    0 0 70px rgba(200, 100, 255, 0.6),
    inset 0 0 20px rgba(255, 220, 100, 0.6);
  border-color: #fff;
}

.forest-journey-arrow-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.forest-journey-arrow-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.5);
}

.forest-journey-arrow-btn svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  transition: transform 0.25s ease;
}

.forest-journey-arrow-btn:hover svg {
  transform: translateX(3px);
}

@keyframes arrowPulseGlow {

  0%,
  100% {
    box-shadow:
      0 0 20px rgba(255, 160, 30, 0.6),
      0 0 40px rgba(180, 80, 255, 0.3),
      inset 0 0 12px rgba(255, 200, 80, 0.3);
    border-color: rgba(255, 230, 160, 0.8);
  }

  50% {
    box-shadow:
      0 0 35px rgba(255, 190, 60, 0.9),
      0 0 65px rgba(210, 110, 255, 0.55),
      inset 0 0 20px rgba(255, 230, 120, 0.6);
    border-color: #ffffff;
  }
}

/* 2. VÙNG TƯƠNG TÁC MÀN HÌNH (INTERACTIVE ZONE) */
.forest-interactive-clickable-zone {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  z-index: 40;
  cursor: pointer;
  background: transparent;
  pointer-events: auto;
  border-radius: 20px;
}

.forest-interactive-clickable-zone.is-disabled {
  pointer-events: none;
}

/* 3. HIỆU ỨNG CAMERA TIẾN SÂU 3D DỌC PHỐI CẢNH CON ĐƯỜNG */
.forest-screen.is-journey-pushing .forest-cute-bg {
  transform: scale(1.22) translateY(2%) !important;
  transition: transform 4.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.forest-screen.is-journey-pushing .fg-branch-left {
  transform: translateX(-48%) translateY(4%) scale(1.48) !important;
  opacity: 0.15 !important;
  transition: transform 3.6s cubic-bezier(0.25, 1, 0.35, 1), opacity 3.2s ease !important;
}

.forest-screen.is-journey-pushing .fg-branch-right {
  transform: translateX(48%) translateY(4%) scale(1.48) !important;
  opacity: 0.15 !important;
  transition: transform 3.6s cubic-bezier(0.25, 1, 0.35, 1), opacity 3.2s ease !important;
}

.forest-screen.is-journey-pushing .forest-cute-mid {
  transform: scale(1.15) !important;
  opacity: 0.35 !important;
  transition: transform 4.0s ease-out, opacity 3.6s ease !important;
}

.forest-screen.is-journey-pushing .forest-dialogue-corner {
  opacity: 0 !important;
  transform: translateY(20px) scale(0.92) !important;
  pointer-events: none !important;
  transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* 4. HIỆU ỨNG GLITCH 2-3 NHỊP NGẮN (SHORT BURSTS GLITCH) */
.forest-glitch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  display: block;
}

.forest-glitch-overlay.glitch-flash-1 {
  opacity: 1;
  animation: glitchBurst1 140ms steps(2) forwards;
}

.forest-glitch-overlay.glitch-flash-2 {
  opacity: 1;
  animation: glitchBurst2 160ms steps(3) forwards;
}

.forest-glitch-overlay.glitch-flash-3 {
  opacity: 1;
  animation: glitchBurst3 150ms steps(2) forwards;
}

@keyframes glitchBurst1 {
  0% {
    opacity: 0.8;
    background: rgba(0, 255, 230, 0.12);
    clip-path: inset(20% 0 35% 0);
    transform: translate(-3px, 1px);
    filter: drop-shadow(4px 0 rgba(255, 0, 80, 0.7));
  }

  50% {
    opacity: 0.9;
    background: rgba(255, 0, 80, 0.12);
    clip-path: inset(55% 0 15% 0);
    transform: translate(3px, -2px);
    filter: drop-shadow(-4px 0 rgba(0, 255, 230, 0.7));
  }

  100% {
    opacity: 0;
    clip-path: none;
    transform: none;
  }
}

@keyframes glitchBurst2 {
  0% {
    opacity: 0.85;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.4) 2px, transparent 2px, transparent 4px);
    transform: skewX(1.8deg) translate(-4px, 0);
    filter: drop-shadow(5px 0 rgba(255, 20, 100, 0.8));
  }

  60% {
    opacity: 0.7;
    transform: skewX(-1.5deg) translate(4px, 1px);
    filter: drop-shadow(-5px 0 rgba(0, 255, 200, 0.8));
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes glitchBurst3 {
  0% {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.18);
    clip-path: inset(10% 0 60% 0);
    transform: translate(4px, -1px);
  }

  50% {
    opacity: 0.75;
    clip-path: inset(45% 0 20% 0);
    transform: translate(-4px, 2px);
  }

  100% {
    opacity: 0;
    clip-path: none;
    transform: none;
  }
}

/* 5. LỚP SƯƠNG TRẮNG DÀY ĐẶC CUỘN TRÀN (DENSE WHITE FOG OVERLAY) */
.forest-fog-transition-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 55%,
      rgba(255, 255, 255, 1.0) 0%,
      rgba(235, 242, 255, 0.99) 45%,
      rgba(215, 228, 250, 0.98) 80%,
      rgba(195, 210, 235, 0.97) 100%);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.9);
}

.forest-fog-transition-screen.fog-in {
  opacity: 1 !important;
}

.forest-fog-transition-screen.fog-out {
  opacity: 0 !important;
  transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hiệu ứng mây khói cuộn lượn trong lớp sương */
.forest-fog-transition-screen::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.8) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(240, 248, 255, 0.85) 0%, transparent 65%);
  filter: blur(40px);
  animation: fogRollDrift 6s infinite alternate ease-in-out;
}

@keyframes fogRollDrift {
  0% {
    transform: translate(-20px, -15px) scale(1);
  }

  100% {
    transform: translate(25px, 18px) scale(1.08);
  }
}

/* 6. MÀN HÌNH VIDEO JUMPSCARE MA NỮ TOÀN MÀN HÌNH */
#screen-jumpscare {
  position: relative;
  overflow: hidden;
}

.jumpscare-stage-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

#screen-jumpscare .screen-content.jumpscare-box {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  background: rgba(12, 5, 22, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 107, 107, 0.5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 50, 50, 0.25);
}

.jumpscare-video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback ảnh tĩnh nếu video chưa play được */
.jumpscare-fallback-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.jumpscare-stage-wrap.use-fallback .jumpscare-fallback-img {
  display: block;
}

.jumpscare-stage-wrap.use-fallback .jumpscare-video-element {
  display: none;
}

/* Rung giật bùng nổ khoảnh khắc Jumpscare */
.jumpscare-stage-wrap.is-scaring {
  animation: scareScreenShake 0.4s ease-in-out infinite alternate;
}

@keyframes scareScreenShake {
  0% {
    transform: translate(-4px, 2px) scale(1.02);
  }

  25% {
    transform: translate(5px, -3px) scale(1.04);
  }

  50% {
    transform: translate(-5px, -4px) scale(1.03);
  }

  75% {
    transform: translate(4px, 4px) scale(1.05);
  }

  100% {
    transform: translate(0, 0) scale(1.02);
  }
}

/* Chớp sáng đỏ/trắng kinh dị 2 khung hình đầu */
.jumpscare-red-strobe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.35);
  mix-blend-mode: color-dodge;
  opacity: 0;
  z-index: 1005;
}

.jumpscare-stage-wrap.is-scaring .jumpscare-red-strobe {
  animation: redStrobeFlash 0.3s steps(2) 2 forwards;
}

@keyframes redStrobeFlash {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.75;
  }
}

/* 7. GIẢM CHUYỂN ĐỘNG (PREFERS-REDUCED-MOTION) */
@media (prefers-reduced-motion: reduce) {
  .forest-journey-arrow-btn {
    animation: none !important;
  }

  .forest-screen.is-journey-pushing .forest-cute-bg,
  .forest-screen.is-journey-pushing .fg-branch-left,
  .forest-screen.is-journey-pushing .fg-branch-right {
    transform: none !important;
    transition: opacity 1.5s ease !important;
  }

  .forest-glitch-overlay {
    display: none !important;
  }

  .jumpscare-stage-wrap.is-scaring {
    animation: none !important;
  }
}

/* 8. ĐÁP ỨNG DI ĐỘNG (RESPONSIVE MOBILE 375x667) */
@media (max-width: 600px) {
  .forest-journey-arrow-btn {
    width: 62px;
    height: 62px;
  }

  .forest-journey-arrow-btn svg {
    width: 28px;
    height: 28px;
  }
}