/* ==========================================================================
   Intro sequence (index.html) — drone flyover → entrance kiosk → hub kiosk
   ========================================================================== */
html, body{ margin:0; padding:0; }
html.intro-active, html.intro-active body{ height:100%; overflow:hidden; margin:0; background:#000; }

.intro-scene{
  position:fixed; top:0; left:0; right:0; bottom:0;
  width:100%; height:100vh; height:100dvh;
  z-index:10; opacity:0; pointer-events:none;
  transition: opacity 600ms ease;
  display:flex; align-items:center; justify-content:center;
  background: var(--prussian);
}
.intro-scene.active{ opacity:1; pointer-events:auto; z-index:20; }

/* ---- Scene 1: video ---- */
#scene-video{ background:#000; }
#scene-video video{ width:100%; height:100%; object-fit:cover; }
.intro-overlay{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding: 26px 32px; z-index:2; }
.intro-caption{ position:absolute; bottom:60px; left:0; right:0; text-align:center; color: var(--warm-white); z-index:2; }
.intro-caption .eyebrow{ color: var(--wood); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; }
.intro-caption h2{ font-family: var(--font-display); color: var(--warm-white); font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); margin-top:10px; }
.intro-skip{ padding: 10px 20px; font-size: 0.82rem; }
.intro-sound-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(250,246,239,0.4);
  background: rgba(13,27,42,0.5); color: var(--warm-white); font-size:1.1rem; display:flex; align-items:center; justify-content:center;
}
.intro-progress{ position:absolute; bottom:0; left:0; height:3px; background: var(--wood); width:0%; z-index:2; transition: width 200ms linear; }
.video-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  color: var(--silver); text-align:center; padding: 0 24px;
}
.video-fallback .hanok-mark{ width:64px; height:30px; color: var(--wood); }

/* ---- Scene 2.5: transit (moving from entrance to central hall) ---- */
.transit-scene{ background: radial-gradient(ellipse at 50% 30%, #16293e 0%, var(--prussian) 70%); overflow:hidden; }
.transit-scene .warp{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.transit-scene .warp::before{
  content:""; position:absolute; inset:-20% -60%;
  background: repeating-linear-gradient(100deg, transparent 0 42px, rgba(169,117,76,0.16) 42px 44px);
  animation: warpMove 1.6s linear infinite;
}
@keyframes warpMove{ from{ transform: translateX(0); } to{ transform: translateX(-260px); } }
@media (prefers-reduced-motion: reduce){
  .transit-scene .warp::before{ animation: none !important; transform: translateX(-130px); }
}

.transit-content{ position:relative; z-index:2; text-align:center; color: var(--warm-white); padding: 0 24px; }
.transit-content .hanok-mark{ width:56px; height:26px; margin:0 auto 20px; color: var(--wood); animation: pulseScale 1.1s ease-in-out infinite; }
.transit-content .eyebrow{ color: var(--wood); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; }
.transit-content h2{ font-family: var(--font-display); font-size: var(--step-2); margin-top:12px; }
.transit-content p{ color: var(--silver); margin-top:12px; max-width: 380px; margin-left:auto; margin-right:auto; }
@keyframes pulseScale{ 0%,100%{ transform:scale(1); opacity:0.7; } 50%{ transform:scale(1.18); opacity:1; } }

.transit-progress-track{ width: min(70vw, 220px); height:4px; background: rgba(250,246,239,0.15); border-radius:2px; margin: 28px auto 0; overflow:hidden; }
.transit-progress-fill{ height:100%; background: var(--wood); width:0%; }

/* ---- Scene 2 & 3: kiosk scenes ---- */
.kiosk-scene{
  background-color: var(--prussian);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.kiosk-scene::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,27,42,0.55) 0%, rgba(13,27,42,0.78) 100%);
}
.kiosk-scene .kiosk-frame{ position: relative; z-index: 1; }

#scene-kiosk-entrance{
  background-image: url("../images/entrance-kiosk-bg.jpg"), radial-gradient(ellipse at 50% 20%, #16293e 0%, var(--prussian) 65%);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
#scene-kiosk-hub{
  background-image: url("../images/central-hall-bg.jpg"), radial-gradient(ellipse at 50% 20%, #16293e 0%, var(--prussian) 65%);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
.kiosk-frame{
  width: min(92vw, 480px); background: var(--prussian-soft); border: 6px solid #04101c;
  border-radius: 34px; padding: 34px 28px 40px; box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.kiosk-screen{ text-align:center; }
.kiosk-frame .kiosk-eyebrow{ color: var(--wood); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; }
.kiosk-frame h2{ color: var(--warm-white); font-family: var(--font-display); font-size: var(--step-2); margin-top:10px; }
.kiosk-frame p{ color: var(--silver); margin-top:12px; font-size:0.92rem; }
.kiosk-frame .hanok-mark{ width:48px; height:22px; margin: 0 auto 14px; color: var(--wood); }
.kiosk-frame .btn{ width:100%; justify-content:center; margin-top:26px; }
.kiosk-frame .btn.secondary-action{ margin-top:12px; }
.kiosk-dot{ width:8px; height:8px; border-radius:50%; background: var(--pine); display:inline-block; margin-right:8px; box-shadow:0 0 0 3px rgba(62,107,82,0.25); }
.kiosk-status{ font-size:0.76rem; color: var(--silver-dim); margin-top:22px; }

/* ---- Teleport flash transition ---- */
.teleport-flash{
  position:fixed; inset:0; z-index:50; background: var(--wood); opacity:0; pointer-events:none;
}
.teleport-flash.flashing{ animation: teleportFlash 620ms ease; }
@keyframes teleportFlash{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}

@media (max-width: 560px){
  .kiosk-frame{ padding: 26px 20px 30px; }
}

@media (max-width: 480px){
  .intro-caption{ bottom: 92px; }
  .intro-overlay{ padding: 18px; }
  #btn-skip-video{ bottom: 20px !important; right: 20px !important; padding: 9px 16px; font-size: 0.76rem; }
  .transit-content h2{ font-size: 1.5rem; }
  .transit-content p{ font-size: 0.86rem; }
}