/* ==========================================================================
   INTERDIMENSIONAL PORTAL TRAVEL & TRANSITION SYSTEM
   Seamless Portal Gun Warp, Security Authorization Modal & Reality Collapse
   ========================================================================== */

/* --- 1. Nav Portal Link Dot Upgrade --- */
.nav-link-portal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0.28rem 0.75rem !important;
  border-radius: 9999px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #97ce4c !important;
  background: rgba(151, 206, 76, 0.12) !important;
  border: 1px solid rgba(151, 206, 76, 0.35) !important;
  box-shadow: 0 0 10px rgba(151, 206, 76, 0.15) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.nav-link-portal:hover {
  background: rgba(151, 206, 76, 0.24) !important;
  border-color: #39ff14 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.55) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.portal-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14;
  animation: portalDotPulse 1.8s ease-in-out infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes portalDotPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 12px #39ff14; }
}

/* --- Custom Cursor Overrides for Portal Dialog --- */
.custom-cursor-dot,
.custom-cursor-trailer {
  z-index: 10000000 !important;
}

body.portal-modal-open .custom-cursor-dot {
  background: #39ff14 !important;
  box-shadow: 0 0 14px #39ff14, 0 0 4px #ffffff !important;
}

body.portal-modal-open .custom-cursor-trailer {
  border-color: rgba(57, 255, 20, 0.65) !important;
  background: rgba(57, 255, 20, 0.08) !important;
}

body.portal-modal-open.cursor-hover .custom-cursor-trailer {
  border-color: #39ff14 !important;
  background: rgba(57, 255, 20, 0.16) !important;
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.45) !important;
}

body.portal-modal-open.cursor-hover .custom-cursor-dot {
  background: #ffffff !important;
  box-shadow: 0 0 10px #ffffff !important;
}

/* --- 2. Interdimensional Security Authorization Modal --- */
.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: rgba(4, 6, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.portal-modal-dialog {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(145deg, #0e131d 0%, #07090f 100%);
  border: 1px solid rgba(151, 206, 76, 0.4);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 35px rgba(151, 206, 76, 0.2);
  position: relative;
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.portal-modal-backdrop.active .portal-modal-dialog {
  transform: scale(1) translateY(0);
}

.portal-modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #39ff14, #42b4ca, transparent);
}

.portal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.portal-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 3px 9px;
  border-radius: 5px;
}

.portal-badge-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
  animation: ledBlink 1s infinite;
}

@keyframes ledBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.portal-modal-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.portal-modal-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.portal-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.portal-vortex-preview {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, #39ff14 10%, #97ce4c 40%, transparent 75%);
  box-shadow: 0 0 25px rgba(57, 255, 20, 0.7);
  animation: vortexSpin 4s linear infinite;
  margin: 0.25rem 0 0.75rem 0;
  position: relative;
}

.portal-vortex-preview::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(66, 180, 202, 0.6);
  animation: vortexSpinReverse 6s linear infinite;
}

@keyframes vortexSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes vortexSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.portal-modal-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: #97ce4c;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.portal-modal-title {
  font-family: var(--font-display, sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.portal-modal-desc {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.55;
}

.portal-modal-desc strong {
  color: #e2e8f0;
}

.portal-telemetry-box {
  background: rgba(6, 9, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.telemetry-lbl {
  color: #64748b;
  letter-spacing: 0.08em;
}

.telemetry-val {
  color: #38bdf8;
  font-weight: 700;
}

.telemetry-val.green {
  color: #39ff14;
}

/* Action Buttons */
.portal-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-portal-cancel {
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-portal-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-portal-confirm {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #07080c;
  background: #39ff14;
  border: 1px solid #39ff14;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-portal-confirm:hover {
  background: #22c55e;
  box-shadow: 0 0 28px rgba(57, 255, 20, 0.85);
  transform: translateY(-1px);
}

.btn-portal-confirm:active {
  transform: translateY(1px);
}

/* --- 3. Fullscreen Portal Warp In VFX (Hardware-Accelerated 60fps) --- */
.portal-warp-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background: #040806;
  transition: opacity 0.12s ease-out;
  contain: strict;
}

.portal-warp-fullscreen.active {
  pointer-events: auto;
  opacity: 1;
}

/* Multi-Ring Concentric GPU Portal Tunnel */
.warp-tunnel-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate3d(-50%, -50%, 0) scale3d(0.05, 0.05, 1);
  will-change: transform;
}

.portal-warp-fullscreen.active .warp-tunnel-wrapper {
  animation: warpTunnelSurge 0.8s cubic-bezier(0.12, 0.9, 0.25, 1) forwards;
}

@keyframes warpTunnelSurge {
  0% {
    transform: translate3d(-50%, -50%, 0) scale3d(0.05, 0.05, 1) rotate(0deg);
  }
  35% {
    transform: translate3d(-50%, -50%, 0) scale3d(2.2, 2.2, 1) rotate(180deg);
  }
  70% {
    transform: translate3d(-50%, -50%, 0) scale3d(14, 14, 1) rotate(420deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale3d(32, 32, 1) rotate(720deg);
  }
}

.warp-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 255, 20, 0.9) 0%, rgba(151, 206, 76, 0.75) 40%, rgba(5, 46, 22, 0.4) 75%, transparent 100%);
  box-shadow: 0 0 60px #39ff14;
  animation: ringSpinClockwise 3s linear infinite;
  will-change: transform;
}

.warp-ring-inner {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #38bdf8 35%, #0284c7 70%, transparent 100%);
  box-shadow: 0 0 50px #38bdf8;
  animation: ringSpinCounter 2.2s linear infinite;
  will-change: transform;
}

.warp-singularity-core {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 40px #ffffff, 0 0 80px #39ff14;
}

@keyframes ringSpinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ringSpinCounter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Speed streaks zooming outward from center */
.warp-rays-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}

.portal-warp-fullscreen.active .warp-rays-container {
  animation: raysBurst 0.8s ease-in forwards;
}

@keyframes raysBurst {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 0.8; transform: scale(1); }
  80% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(2.2); }
}

.warp-streak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 48vh;
  transform-origin: top center;
  background: linear-gradient(to bottom, #ffffff 0%, #39ff14 40%, transparent 100%);
  border-radius: 2px;
}

/* Climax flash */
.warp-flash-blind {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  will-change: opacity;
}

.portal-warp-fullscreen.active .warp-flash-blind {
  animation: warpFinalFlash 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes warpFinalFlash {
  0%, 72% { opacity: 0; background: #39ff14; }
  88% { opacity: 0.75; background: #ffffff; }
  100% { opacity: 1; background: #ffffff; }
}

/* --- 4. Reality Stabilization Banner (Upon return to Index) --- */
.reality-stabilized-toast {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  padding: 0.85rem 1.25rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: #e2e8f0;
  transform: translateY(60px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reality-stabilized-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.stabilized-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  flex-shrink: 0;
}

/* ==========================================================================
   5. FLOATING INTERDIMENSIONAL PORTAL WIDGET (C-137)
   Hovering Sci-Fi Swirling Portal FAB across Index, Backend, and Frontend
   ========================================================================== */
.floating-portal-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99980;
  display: block;
  animation: portalFloatBob 4.2s ease-in-out infinite;
  pointer-events: auto;
  user-select: none;
}

.floating-portal-container:hover {
  animation-play-state: paused;
}

@keyframes portalFloatBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.floating-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: rgba(8, 14, 22, 0.94);
  border: 1px solid rgba(57, 255, 20, 0.4);
  border-radius: 9999px;
  padding: 6px 18px 6px 6px;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(57, 255, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.floating-portal-btn:hover {
  background: rgba(10, 20, 30, 0.98);
  border-color: #39ff14;
  box-shadow: 
    0 16px 45px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(57, 255, 20, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px) scale(1.03);
}

.floating-portal-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* --- Portal Disc & Rotating Accretion --- */
.portal-disc-wrapper {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portal-beacon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(57, 255, 20, 0.85);
  pointer-events: none;
  animation: portalBeaconRadiate 3s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
  opacity: 0;
}

@keyframes portalBeaconRadiate {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  60% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.portal-disc {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0e3d23 0%, #06190f 70%, #020904 100%);
  border: 2px solid #39ff14;
  box-shadow: 
    0 0 16px rgba(57, 255, 20, 0.55),
    inset 0 0 14px rgba(57, 255, 20, 0.65);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.floating-portal-btn:hover .portal-disc {
  box-shadow: 
    0 0 30px rgba(57, 255, 20, 0.9),
    0 0 55px rgba(57, 255, 20, 0.45),
    inset 0 0 20px rgba(57, 255, 20, 0.85);
  transform: scale(1.04);
}

/* Fluid Conic Swirl (Clockwise) */
.portal-fluid-conic {
  position: absolute;
  inset: -60%;
  background: conic-gradient(
    from 0deg,
    #39ff14 0deg,
    #0d421d 55deg,
    #97ce4c 110deg,
    #031d0e 170deg,
    #00e676 225deg,
    #135d2b 280deg,
    #39ff14 360deg
  );
  animation: portalSpinClockwise 3.6s linear infinite;
  opacity: 0.88;
  filter: blur(2px);
}

.floating-portal-btn:hover .portal-fluid-conic {
  animation-duration: 1.8s;
}

/* Counter-Rotating Swirl Arms */
.portal-swirl-arms {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(57, 255, 20, 0.85) 45deg,
    transparent 90deg,
    rgba(151, 206, 76, 0.9) 140deg,
    transparent 190deg,
    rgba(0, 230, 118, 0.85) 245deg,
    transparent 300deg,
    rgba(57, 255, 20, 0.95) 345deg,
    transparent 360deg
  );
  animation: portalSpinCounter 2.4s linear infinite;
  z-index: 2;
  mix-blend-mode: screen;
}

.floating-portal-btn:hover .portal-swirl-arms {
  animation-duration: 1.2s;
}

@keyframes portalSpinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes portalSpinCounter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Singularity Core with C-137 text */
.portal-core-singularity {
  position: relative;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(3, 10, 5, 0.92);
  border: 1px solid rgba(57, 255, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 10px rgba(57, 255, 20, 0.45),
    inset 0 0 8px rgba(57, 255, 20, 0.55);
  transition: all 0.3s ease;
}

.floating-portal-btn:hover .portal-core-singularity {
  background: rgba(5, 18, 9, 0.96);
  border-color: #39ff14;
  box-shadow: 
    0 0 16px #39ff14,
    inset 0 0 10px #39ff14;
}

.portal-singularity-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 0 6px #39ff14;
}

/* Floating Spark Particles */
.portal-spark-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #39ff14;
  z-index: 4;
  opacity: 0.8;
  pointer-events: none;
}

.sp-1 {
  top: 18%;
  left: 22%;
  animation: sparkPulse 1.8s ease-in-out infinite alternate;
}
.sp-2 {
  bottom: 22%;
  right: 18%;
  animation: sparkPulse 2.2s 0.4s ease-in-out infinite alternate;
}
.sp-3 {
  top: 30%;
  right: 25%;
  width: 3px;
  height: 3px;
  animation: sparkPulse 1.5s 0.8s ease-in-out infinite alternate;
}

@keyframes sparkPulse {
  0% { transform: scale(0.6); opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 4px #39ff14); }
}

/* --- Pill Info Column --- */
.portal-pill-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.portal-pill-eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 700;
  color: #39ff14;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14;
  animation: portalDotPulse 1.4s ease-in-out infinite;
}

.portal-pill-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.portal-pill-arrow-svg {
  color: #39ff14;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.floating-portal-btn:hover .portal-pill-arrow-svg {
  transform: translate(2px, -2px);
  color: #ffffff;
}

/* --- Responsive Adjustments --- */
@media (max-width: 640px) {
  .floating-portal-container {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }

  .floating-portal-btn {
    padding: 4px;
    gap: 0;
  }

  .portal-disc-wrapper {
    width: 48px;
    height: 48px;
  }

  .portal-disc {
    width: 48px;
    height: 48px;
  }

  .portal-core-singularity {
    width: 28px;
    height: 28px;
  }

  .portal-singularity-text {
    font-size: 0.58rem;
  }

  .portal-pill-info {
    display: none;
  }
}