@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --background: 240 10% 4%;
  --foreground: 220 20% 92%;
  --border: 220 30% 18%;
  --card: 240 10% 8%;
  --card-foreground: 220 20% 92%;
  --card-border: 220 50% 20%;
  --popover: 240 10% 8%;
  --popover-foreground: 220 20% 92%;
  --popover-border: 220 50% 20%;
  --primary: 220 91% 65%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 10% 14%;
  --secondary-foreground: 220 20% 85%;
  --muted: 240 10% 12%;
  --muted-foreground: 220 10% 55%;
  --accent: 220 60% 25%;
  --accent-foreground: 220 20% 92%;
  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 100%;
  --input: 220 30% 22%;
  --ring: 220 91% 65%;

  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);

  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);
  
  --radius: .5rem;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #09090b; /* hsl(240 10% 4%) */
  color: #e2e8f0; /* hsl(220 20% 92%) */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Custom styling not covered by Tailwind CDN */
.bg-neon-grid {
  background-image:
    linear-gradient(rgba(59,130,246,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

@keyframes border-glow-cycle {
  0%,100% {
    box-shadow: 0 0 25px rgba(59,130,246,0.3), 0 0 60px rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.28);
  }
  40% {
    box-shadow: 0 0 35px rgba(96,165,250,0.45), 0 0 70px rgba(96,165,250,0.1);
    border-color: rgba(96,165,250,0.38);
  }
  70% {
    box-shadow: 0 0 28px rgba(83,252,24,0.18), 0 0 55px rgba(83,252,24,0.06);
    border-color: rgba(83,252,24,0.22);
  }
}
.panel-glow-border {
  animation: border-glow-cycle 6s ease-in-out infinite;
  will-change: box-shadow, border-color;
  transform: translateZ(0);
}

/* === Title Orbit Ring === */
@keyframes title-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.title-orbit-wrap {
  position: relative;
  border-radius: 0.875rem;
  padding: 2px;
  overflow: hidden;
}
.title-orbit-spin {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 295deg,
    rgba(59,130,246,0.1) 310deg,
    rgba(96,165,250,0.7) 330deg,
    rgba(216,180,254,1)  345deg,
    rgba(96,165,250,0.7) 355deg,
    rgba(59,130,246,0.1) 358deg,
    transparent 360deg
  );
  animation: title-orbit-spin 3.5s linear infinite;
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
}
.title-orbit-inner {
  position: relative;
  z-index: 1;
  border-radius: 0.75rem;
  background: #09090b;
  padding: 8px 24px;
}

@keyframes pulse-glow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(59,130,246,0.6), 0 0 20px rgba(59,130,246,0.3);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 20px rgba(96,165,250,1), 0 0 45px rgba(59,130,246,0.8), 0 0 80px rgba(59,130,246,0.3);
    opacity: 0.75;
  }
}
.pulse-glow-text {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* === Volume Slider === */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(59,130,246,0.25);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}
.volume-slider:hover {
  background: rgba(59,130,246,0.4);
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.7);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 14px rgba(59,130,246,0.9);
}
.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.7);
  cursor: pointer;
}

/* === Shine Button Effect === */
@keyframes btn-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes btn-shine {
  0%   { left: -120%; }
  100% { left: 140%; }
}
.shine-btn {
  position: relative;
  overflow: hidden;
}
.shine-btn:not(:disabled) {
  animation: btn-float 4s ease-in-out infinite;
}
.shine-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  pointer-events: none;
}
.shine-btn.shine-active::before {
  animation: btn-shine 0.7s ease forwards;
}
.shine-btn-1:not(:disabled) { animation-delay: 0s; }
.shine-btn-2:not(:disabled) { animation-delay: 0.6s; }
.shine-btn-3:not(:disabled) { animation-delay: 1.2s; }

/* === Particles === */
@keyframes float-particle {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.5; }
  100% { transform: translateY(-100vh) scale(0.4); opacity: 0; }
}
.particle {
  animation: float-particle linear infinite;
  will-change: transform, opacity;
}

/* === Flying Link Cards === */
@keyframes fly-link-across {
  0%   { transform: translate(-50%, -50%) translateX(0)     scale(0.5); opacity: 0; }
  12%  { transform: translate(-50%, -50%) translateX(0)     scale(1);   opacity: 1; }
  80%  { transform: translate(-50%, -50%) translateX(50vw)  scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(54vw)  scale(0.5); opacity: 0; }
}
.fly-link-card {
  position: absolute;
  top: 50%;
  left: 25%;
  animation: fly-link-across 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  white-space: nowrap;
}

/* === Jumpscare Overlay === */
@keyframes jumpscare-flash {
  0%   { background: rgba(255,0,0,0); }
  4%   { background: rgba(255,0,0,0.95); }
  8%   { background: rgba(180,0,0,0.3); }
  14%  { background: rgba(255,0,0,0.98); }
  20%  { background: rgba(120,0,0,0.5); }
  30%  { background: rgba(255,0,0,0.7); }
  50%  { background: rgba(80,0,0,0.4); }
  80%  { background: rgba(40,0,0,0.2); }
  100% { background: rgba(0,0,0,0); }
}
.jumpscare-flash {
  animation: jumpscare-flash 2.5s ease forwards;
}

@keyframes jumpscare-shake {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  5%  { transform: translate(-12px,-10px) rotate(-2deg); }
  10% { transform: translate(12px,8px)  rotate(2deg); }
  15% { transform: translate(-10px,12px) rotate(-1.5deg); }
  20% { transform: translate(10px,-8px)  rotate(1.5deg); }
  25% { transform: translate(-8px,6px)  rotate(-1deg); }
  30% { transform: translate(8px,-6px)  rotate(1deg); }
  40% { transform: translate(-5px,4px); }
  50% { transform: translate(5px,-4px); }
  60% { transform: translate(-3px,3px); }
  70% { transform: translate(3px,-3px); }
  80% { transform: translate(-2px,2px); }
}
.jumpscare-overlay {
  animation: jumpscare-shake 0.6s ease 0s 1;
  background: rgba(0,0,0,0.88);
}
.jumpscare-sub {
  animation: cmd-fade-up 0.3s ease 0.3s both;
}

/* === OnlyFans Open Transition === */
@keyframes of-page-open {
  0%   { transform: translateY(100%) scaleY(0.95); opacity: 0; }
  60%  { transform: translateY(-2%) scaleY(1.01); opacity: 1; }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}
.of-page-open {
  animation: of-page-open 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes of-breathe {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.7; }
}
.of-breathe {
  animation: of-breathe 1.6s ease-in-out infinite;
}

/* === Command Overlays === */
@keyframes cmd-overlay-life {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
.cmd-overlay {
  animation: cmd-overlay-life 3.2s ease forwards;
}

@keyframes cmd-emoji-pop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  75%  { transform: scale(0.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.cmd-emoji {
  animation: cmd-emoji-pop 0.5s cubic-bezier(.17,.67,.35,1.3) forwards;
  display: inline-block;
}

@keyframes cmd-text-slam {
  0%   { transform: scale(2.2) translateY(-20px); opacity: 0; filter: blur(8px); }
  45%  { transform: scale(0.95) translateY(0);    opacity: 1; filter: blur(0); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.cmd-text {
  animation: cmd-text-slam 0.45s cubic-bezier(.22,.68,0,1.4) 0.15s both;
}

@keyframes cmd-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmd-user { animation: cmd-fade-up 0.4s ease 0.05s both; }
.cmd-sub  { animation: cmd-fade-up 0.4s ease 0.4s both; }

/* === Corner Brackets for panels === */
.corner-bracket-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(59, 130, 246, 0.45);
  border-left: 2px solid rgba(59, 130, 246, 0.45);
  border-top-left-radius: 1rem;
  pointer-events: none;
}
.corner-bracket-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(59, 130, 246, 0.45);
  border-right: 2px solid rgba(59, 130, 246, 0.45);
  border-top-right-radius: 1rem;
  pointer-events: none;
}
.corner-bracket-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid rgba(59, 130, 246, 0.45);
  border-left: 2px solid rgba(59, 130, 246, 0.45);
  border-bottom-left-radius: 1rem;
  pointer-events: none;
}
.corner-bracket-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid rgba(59, 130, 246, 0.45);
  border-right: 2px solid rgba(59, 130, 246, 0.45);
  border-bottom-right-radius: 1rem;
  pointer-events: none;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5);
}

/* Link Entrance Animation */
@keyframes link-card-in {
  from {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.link-card-enter {
  animation: link-card-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}