/* VGN Tour Styles - mirrors other tours */

.vgn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: #0f0f12;
  z-index: 1000;
  animation: vgnBackdropIn 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.vgn-modal-backdrop.closing { animation: vgnBackdropOut 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.vgn-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0b0d10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  animation: vgnContentIn 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.vgn-modal-content.closing { animation: vgnContentOut 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.vgn-modal-image-wrapper {
  position: relative;
  max-width: 95vw;
  max-height: calc(100vh - 100px);
  width: auto;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vgn-modal-image { width: auto; height: auto; max-width: 95vw; max-height: calc(100vh - 100px); object-fit: contain; display: block; }

/* Overlays */
.vgn-overlay-top, .vgn-overlay-left, .vgn-overlay-right, .vgn-overlay-bottom {
  position: absolute;
  background: rgba(0,0,0,0.85);
  pointer-events: none;
  transition: all 500ms ease-in-out;
  opacity: 1;
}
.vgn-overlay-top { top: 0; left: 0; right: 0; }
.vgn-overlay-left { left: 0; }
.vgn-overlay-right { right: 0; }
.vgn-overlay-bottom { left: 0; right: 0; bottom: 0; }
.vgn-overlay-transitioning { opacity: 0.3; }

.vgn-highlight-border { position: absolute; border: 2px solid #b02f34; border-radius: 10px; pointer-events: none; transition: all 500ms ease-in-out; box-shadow: 0 0 0 2px rgba(176,47,52,0.3); opacity: 1; transform: scale(1); }
.vgn-highlight-border.transitioning { opacity: .5; transform: scale(.98); }

/* Step Popup */
.vgn-step-popup { position: absolute; background:#111319; border:1px solid #262a33; border-radius:12px; padding:20px; color:#f1f2f5; min-width:300px; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 1px rgba(176,47,52,.3); animation: vgnPopupIn 600ms ease-out forwards; transition: all 500ms ease-in-out; }
.vgn-step-popup.transitioning { opacity:.3; transition: all 500ms cubic-bezier(0.25,0.46,0.45,0.94); }
.vgn-step-popup.transitioning.transition-next { transform: translateX(80px) scale(.95); }
.vgn-step-popup.transitioning.transition-prev { transform: translateX(-80px) scale(.95); }
.vgn-step-popup.closing { opacity:0; transform: translateY(20px) scale(.8); transition: all 250ms cubic-bezier(0.4,0,0.2,1); }
.vgn-popup-animated-border { position:absolute; inset:0; border-radius:12px; border:2px solid transparent; background: linear-gradient(45deg, rgba(176,47,52,.3), rgba(176,47,52,.1)); background-clip:border-box; animation:pulseGlow 2s infinite; pointer-events:none; }
.vgn-popup-content { position:relative; z-index:10; }
.vgn-quit-button { position:absolute; top:12px; right:12px; width:28px; height:28px; background:rgba(0,0,0,.5); border:1px solid #262a33; border-radius:50%; color:#b9bfca; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; z-index:20; transition:all 200ms ease; }
.vgn-quit-button:hover { background: rgba(176,47,52,.8); color:#fff; transform: scale(1.1); }

/* Progress Bar */
.vgn-tour-progress-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 8px; background: rgba(0,0,0,.3); display:flex; gap:2px; z-index:1002; backdrop-filter: blur(10px); animation: vgnBarIn 250ms cubic-bezier(0.4,0,0.2,1) forwards; }
.vgn-tour-progress-bar.closing { animation: vgnBarOut 250ms cubic-bezier(0.4,0,0.2,1) forwards; }
.vgn-progress-segment { flex:1; position:relative; cursor:pointer; overflow:visible; transition: all 300ms cubic-bezier(0.4,0,0.2,1); background: rgba(255,255,255,.1); }
.vgn-progress-segment:hover { background: rgba(255,255,255,.15); }
.vgn-progress-segment-fill { position:absolute; inset:0; background: linear-gradient(90deg,#b02f34 0%,#d24449 100%); transform: scaleX(0); transform-origin:left; transition: transform 500ms cubic-bezier(0.4,0,0.2,1); }
.vgn-progress-segment.completed .vgn-progress-segment-fill, .vgn-progress-segment.active .vgn-progress-segment-fill { transform: scaleX(1); }
.vgn-progress-step-number { position:absolute; bottom:12px; left:50%; transform: translateX(-50%); width:32px; height:32px; border-radius:50%; background:#1a1d25; border:2px solid #262a33; color:#6b7280; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; transition: all 250ms cubic-bezier(0.4,0,0.2,1); z-index:1003; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.vgn-progress-segment:hover .vgn-progress-step-number { transform: translateX(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.vgn-progress-step-number.completed { background:#8e262a; border-color:#b02f34; color:#f1f2f5; box-shadow: 0 2px 8px rgba(176,47,52,.3); }
.vgn-progress-step-number.active { background: linear-gradient(135deg,#b02f34 0%, #d24449 100%); border-color:#d24449; color:#fff; box-shadow: 0 4px 16px rgba(176,47,52,.6); animation: stepNumberPulse 2s infinite; }

@keyframes pulseGlow { 0%{ box-shadow:0 0 0 0 rgba(176,47,52,.4);} 50%{ box-shadow:0 0 8px 4px rgba(176,47,52,.6);} 100%{ box-shadow:0 0 0 0 rgba(176,47,52,.4);} }
@keyframes vgnBackdropIn { from{opacity:0} to{opacity:1}}
@keyframes vgnBackdropOut { from{opacity:1} to{opacity:0}}
@keyframes vgnContentIn { from{opacity:0; transform: scale(.95)} to{opacity:1; transform: scale(1)}}
@keyframes vgnContentOut { from{opacity:1; transform: scale(1)} to{opacity:0; transform: scale(.95)}}
@keyframes vgnBarIn { from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)}}
@keyframes vgnBarOut { from{opacity:1; transform: translateY(0)} to{opacity:0; transform: translateY(10px)}}
@keyframes vgnPopupIn { from{opacity:0; transform: translateY(20px) scale(.9)} to{opacity:1; transform: translateY(0) scale(1)}}


