/* Hologram display: pure black background (black = transparent in a hologram), glowing light content */
:root { --cyan: #5df4ff; --gold: #ffcf70; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: #000; color: #fff; overflow: hidden;
  font-family: 'Poppins', 'Noto Sans Devanagari', system-ui, sans-serif;
}
body.mirror .stage { transform: scaleX(-1); }

.stage {
  height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh; padding: 4vh 6vw;
}

/* ---- avatar: video if a file exists, otherwise a glowing placeholder ---- */
.avatar { position: relative; width: min(70vh, 90vw); height: 48vh; display: grid; place-items: center; transition: height .6s ease; }
body[data-step="ready"] .avatar { height: 20vh; }
body[data-step="ready"] .aura { transform: scale(.6); }
.avatar video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
  opacity: 0; transition: opacity .3s ease;
}
body.has-video .avatar video.active { opacity: 1; }
body.has-video .aura { opacity: 0; }

/* Video present: video only, full stage. No text, no itinerary panel, no image. */
body.has-video .stage { padding: 0; gap: 0; }
body.has-video .avatar, body.has-video[data-step="ready"] .avatar { width: 100vw; height: 100vh; }
body.has-video .subtitle, body.has-video .itinerary { display: none; }

.aura {
  display: grid; place-items: center; width: min(34vh, 60vw); aspect-ratio: 1; border-radius: 50%;
  font-weight: 700; letter-spacing: .3em; font-size: clamp(1rem, 2.4vh, 1.6rem); color: var(--cyan);
  background: radial-gradient(circle, rgba(93, 244, 255, .28), rgba(93, 244, 255, .05) 60%, transparent 70%);
  border: 2px solid rgba(93, 244, 255, .6);
  box-shadow: 0 0 40px rgba(93, 244, 255, .5), inset 0 0 50px rgba(93, 244, 255, .25);
  animation: breathe 3.2s ease-in-out infinite; transition: opacity .5s, transform .6s;
}
@keyframes breathe { 50% { transform: scale(1.06); box-shadow: 0 0 80px rgba(93, 244, 255, .8), inset 0 0 70px rgba(93, 244, 255, .4); } }

/* ---- text printed on the hologram ---- */
.subtitle {
  max-width: 88%; text-align: center; line-height: 1.55; min-height: 3em;
  font-size: clamp(1.4rem, 3.4vh, 2.6rem); font-weight: 500;
  text-shadow: 0 0 18px rgba(93, 244, 255, .75), 0 0 2px #fff;
}
.subtitle.typing::after { content: '▍'; margin-left: 4px; color: var(--cyan); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
body[data-step="idle"] .subtitle { color: var(--gold); text-shadow: 0 0 22px rgba(255, 207, 112, .7); animation: breathe-text 3s ease-in-out infinite; }
@keyframes breathe-text { 50% { opacity: .55; } }
body[data-step="ready"] .subtitle { font-size: clamp(1.1rem, 2.4vh, 1.8rem); }

/* ---- itinerary ---- */
.itinerary { width: min(92vw, 1000px); display: flex; flex-direction: column; align-items: center; gap: 2vh; animation: fade .6s ease both; }
.itinerary[hidden] { display: none; }
.itinerary h2 { font-size: clamp(1.4rem, 3.4vh, 2.6rem); color: var(--gold); text-shadow: 0 0 22px rgba(255, 207, 112, .6); text-align: center; }
.itinerary img { max-height: 24vh; max-width: 100%; border-radius: 18px; border: 1px solid rgba(93, 244, 255, .5); box-shadow: 0 0 30px rgba(93, 244, 255, .35); }
.itinerary ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.6vh; width: 100%; }
.itinerary li {
  padding: 1.6vh 2vw; border-radius: 16px; border: 1px solid rgba(93, 244, 255, .45);
  background: rgba(93, 244, 255, .06); box-shadow: 0 0 22px rgba(93, 244, 255, .18);
  opacity: 0; animation: fade .6s ease forwards;
}
.itinerary li b { display: block; color: var(--cyan); font-size: clamp(1.1rem, 2.6vh, 1.9rem); text-shadow: 0 0 12px rgba(93, 244, 255, .7); }
.itinerary li p { margin-top: .6vh; font-size: clamp(.95rem, 2.1vh, 1.5rem); line-height: 1.5; color: #e9fbff; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- helpers ---- */
:fullscreen { cursor: none; }
:fullscreen .status { display: none; }
.status { position: fixed; right: 12px; bottom: 12px; width: 10px; height: 10px; border-radius: 50%; background: #c33; opacity: .5; }
.status.on { background: #2e6; }
.unlock { position: fixed; inset: auto 0 5vh 0; margin: auto; width: max-content; padding: 16px 30px; border-radius: 999px; font: inherit; font-size: 1.2rem; color: #000; background: var(--cyan); border: 0; cursor: pointer; z-index: 5; }
.unlock[hidden] { display: none; }