/**
 * Cinematic Close-Up System — Styles
 *
 * Full-screen overlay for dramatic dialogue moments.
 * Letterbox bars, backdrop blur, and SVG character portraits.
 */

/* ─── Overlay Container ─────────────────────────────────────────────────────── */

#cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ─── Backdrop ──────────────────────────────────────────────────────────────── */

.cinematic-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.5s ease, backdrop-filter 0.5s ease;
}

.cinematic-active .cinematic-backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

/* ─── Letterbox Bars ────────────────────────────────────────────────────────── */

.cinematic-bar {
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  z-index: 1;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cinematic-bar-top {
  top: 0;
}

.cinematic-bar-bottom {
  bottom: 0;
}

.cinematic-active .cinematic-bar {
  height: 10vh;
}

/* ─── Dialogue box floats above cinematic when active ──────────────────────── */

/* ─── Dialogue box in cinematic mode ───────────────────────────────────────── */
/* Sits in the reserved lower zone, always visible and clickable */
body.cinematic-mode #dialogue-box {
  z-index: 10010 !important;
  pointer-events: auto !important;
  position: fixed !important;
  bottom: 3vh !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  width: min(85vw, 620px) !important;
  max-height: 30vh !important;
  background: linear-gradient(135deg, #faf3e0 0%, #f4e4bc 100%) !important;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.6) !important;
  border: 3px solid #c4a882 !important;
}

body.cinematic-mode .dialogue-choices {
  pointer-events: auto !important;
}

body.cinematic-mode .dialogue-choices button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ─── Close button (visible on both desktop and mobile) ────────────────────── */

.cinematic-close {
  position: fixed;
  top: max(10vh + 8px, 56px);
  right: 16px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.5s ease 1s, background 0.2s;
}

.cinematic-active .cinematic-close {
  opacity: 1;
}

.cinematic-close:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* ─── Dismiss hint (desktop: Esc, mobile: hidden since close button exists) ── */

.cinematic-dismiss {
  position: fixed;
  top: max(10vh + 8px, 56px);
  right: 60px;
  z-index: 4;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-family: 'Noto Sans HK', sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 1.5s;
  line-height: 36px;
}

.cinematic-active .cinematic-dismiss {
  opacity: 1;
}

/* ─── Hide game HUD during cinematic ───────────────────────────────────────── */

body.cinematic-mode #joystick-zone,
body.cinematic-mode #interact-btn,
body.cinematic-mode #controls-help,
body.cinematic-mode .hud-hint {
  display: none !important;
}

/* ─── Stage (character container) ───────────────────────────────────────────── */

.cinematic-stage {
  position: fixed;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  bottom: 35vh;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* ─── Single Character Layout ───────────────────────────────────────────────── */

.cinematic-single .cinematic-character {
  width: min(60vw, 360px);
  height: 100%;
  max-height: 100%;
}

/* ─── Two-Shot Layout ───────────────────────────────────────────────────────── */

.cinematic-two-shot {
  gap: 40px;
}

.cinematic-two-shot .cinematic-character {
  width: min(35vw, 260px);
  height: 100%;
  max-height: 100%;
}

/* ─── Character Container ───────────────────────────────────────────────────── */

.cinematic-character {
  filter: drop-shadow(0 0 30px rgba(255, 200, 100, 0.2));
  transition: filter 0.3s ease, opacity 0.3s ease;
  position: relative;
}

.cinematic-character svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Active speaker glow */
.cinematic-character.cinematic-speaking {
  filter: drop-shadow(0 0 40px rgba(255, 220, 130, 0.4));
}

/* Dimmed listener */
.cinematic-character.cinematic-listening {
  filter: drop-shadow(0 0 15px rgba(255, 200, 100, 0.1));
  opacity: 0.85;
}

/* ─── Body Animation Parts (inherited from body-animations.css) ─────────────── */

.cinematic-character .arm-left,
.cinematic-character .arm-right,
.cinematic-character .leg-left,
.cinematic-character .leg-right,
.cinematic-character .forearm-left,
.cinematic-character .forearm-right,
.cinematic-character .hand-left,
.cinematic-character .hand-right {
  transform-origin: 0 0;
}

/* ─── Transitions ───────────────────────────────────────────────────────────── */

/* Zoom entrance */
.cinematic-stage.cinematic-zoom-enter {
  transform: translate(-50%, -50%) scale(0.3);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cinematic-stage.cinematic-zoom-enter.cinematic-zoom-active {
  transform: translate(-50%, -50%) scale(1);
}

/* Slide entrance for two-shot */
.cinematic-two-shot .cinematic-character:first-child {
  animation: cinematic-slide-left 0.5s ease-out both;
}

.cinematic-two-shot .cinematic-character:last-child {
  animation: cinematic-slide-right 0.5s ease-out 0.1s both;
}

@keyframes cinematic-slide-left {
  from {
    transform: translateX(-80px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes cinematic-slide-right {
  from {
    transform: translateX(80px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ─── Vignette effect on cinematic stage ────────────────────────────────────── */

.cinematic-stage::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.cinematic-active .cinematic-stage::after {
  opacity: 1;
}

/* ─── Mobile Responsiveness ─────────────────────────────────────────────────── */

/* ─── Mobile (narrow screens) ──────────────────────────────────────────────── */

@media (max-width: 600px) {
  .cinematic-stage {
    top: 5vh;
    bottom: 40vh;
  }

  .cinematic-single .cinematic-character {
    width: min(80vw, 300px);
  }

  .cinematic-two-shot {
    gap: 10px;
  }

  .cinematic-two-shot .cinematic-character {
    width: min(42vw, 180px);
  }

  .cinematic-active .cinematic-bar {
    height: 4vh;
  }

  body.cinematic-mode #dialogue-box {
    bottom: 2vh !important;
    max-height: 34vh !important;
    width: min(92vw, 600px) !important;
    padding: 12px 14px !important;
  }

  /* Dismiss hint hidden on mobile — close button is enough */
  .cinematic-dismiss {
    display: none;
  }

  .cinematic-close {
    top: max(4vh + 4px, 32px);
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
  }
}

/* ─── Landscape mobile / short screens ─────────────────────────────────────── */

@media (max-height: 480px) {
  .cinematic-stage {
    top: 4vh;
    bottom: 42vh;
  }

  .cinematic-active .cinematic-bar {
    height: 3vh;
  }

  body.cinematic-mode #dialogue-box {
    max-height: 36vh !important;
  }
}

/* ─── Very small phones ────────────────────────────────────────────────────── */

@media (max-width: 380px) {
  .cinematic-single .cinematic-character {
    width: min(85vw, 260px);
  }

  .cinematic-two-shot .cinematic-character {
    width: min(44vw, 160px);
  }

  body.cinematic-mode #dialogue-box {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}