/* Subtle animated gradient background */
.bg-aurora {
  background: radial-gradient(1200px 800px at 10% 10%, rgba(255, 94, 247, 0.25), transparent 40%),
              radial-gradient(900px 600px at 90% 20%, rgba(0, 164, 255, 0.20), transparent 40%),
              radial-gradient(1000px 700px at 50% 100%, rgba(255, 196, 0, 0.18), transparent 40%),
              linear-gradient(180deg, #0b0f17 0%, #121826 100%);
  animation: aurora 20s ease-in-out infinite alternate;
}

@keyframes aurora {
  0% {
    background-position: 10% 10%, 90% 20%, 50% 100%;
  }
  100% {
    background-position: 20% 20%, 80% 30%, 60% 90%;
  }
}

.blur-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-morphism {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.2);
}

.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.fade-in { animation: fadeIn 1s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 20px rgba(255,255,255,.1)} 50%{box-shadow:0 0 40px rgba(255,255,255,.2),0 0 60px rgba(255,94,247,.1)} }

.feature-card { transition: all .3s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.3); background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); }

.gradient-border { position: relative; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); }
.gradient-border::before { content:''; position:absolute; inset:0; padding:1px; background: linear-gradient(135deg, rgba(255,94,247,.5), rgba(0,164,255,.5), rgba(255,196,0,.5)); border-radius: inherit; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events:none; }

/* Logo styling */
.idoll-logo { height:2.5rem; width:auto; filter:brightness(1.1) contrast(1.05); transition: all .3s ease; }
.idoll-logo:hover { filter:brightness(1.2) contrast(1.1); transform: scale(1.02); }
.hero-logo { height:6rem; width:auto; filter:brightness(1.1) drop-shadow(0 4px 20px rgba(255,255,255,.15)); animation: logoFloat 8s ease-in-out infinite; }
.footer-logo { height:2rem; width:auto; filter:brightness(1.1); transition: all .3s ease; }
.footer-logo:hover { filter:brightness(1.2); transform: scale(1.05); }
@keyframes logoFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.02)} }

/* Enhanced visual elements */
.logo-glow { position: relative; }
.logo-glow::before { content:''; position:absolute; inset:-30px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); border-radius:50%; animation: glowRotate 20s linear infinite; }
@keyframes glowRotate { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.1)} 100%{transform:rotate(360deg) scale(1)} }

/* Robot silhouette styling */
.robot-silhouette { filter: brightness(1) saturate(0); }
@keyframes mysterySway { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(1deg)} }
.mystery-overlay { background: linear-gradient(45deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.8) 70%, rgba(0,0,0,.9) 100%); backdrop-filter: blur(1px); }
.reveal-hint { animation: pulseHint 2s ease-in-out infinite; }
@keyframes pulseHint { 0%,100%{opacity:.7; transform: scale(1)} 50%{opacity:1; transform: scale(1.05)} }

.static-effect { position:relative; overflow:hidden; }
.static-effect::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent, transparent 98px, rgba(255,255,255,.03) 100px), repeating-linear-gradient(0deg, transparent, transparent 98px, rgba(255,255,255,.03) 100px); animation: staticNoise .5s linear infinite; pointer-events:none; }
@keyframes staticNoise { 0%{transform:translate(0,0)} 10%{transform:translate(-1px,1px)} 20%{transform:translate(1px,-1px)} 30%{transform:translate(-1px,-1px)} 40%{transform:translate(1px,1px)} 50%{transform:translate(-1px,1px)} 60%{transform:translate(1px,-1px)} 70%{transform:translate(-1px,-1px)} 80%{transform:translate(1px,1px)} 90%{transform:translate(-1px,1px)} 100%{transform:translate(0,0)} }

.progress-dots { animation: progressLoad 3s ease-in-out infinite; }
@keyframes progressLoad { 0%,20%{opacity:.3} 50%{opacity:1} 80%,100%{opacity:.3} }

/* Subtle divider used in footer */
.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) { .floating, .glow-pulse, .progress-dots { animation: none !important; } }

/* Fix mobile viewport issues */
@supports (-webkit-touch-callout: none) { .min-h-dvh { min-height: -webkit-fill-available; } }

/* Prevent white fade on mobile */
html, body { background-color:#0b0f17; overflow-x:hidden; }
body { position: relative; }
.bg-aurora { min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; }

/* Custom dropdown styling */
.custom-select { position: relative; }
.custom-select select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
  padding-right: 2.5rem; color: white; cursor: pointer; transition: all .3s ease;
}
.custom-select select:focus { outline: none; border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.custom-select select:hover { background-color: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); }

/* Custom dropdown container */
.dropdown-container { position: relative; display: inline-block; width: 100%; }
.dropdown-button {
  width:100%; border-radius:.75rem; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  padding:.75rem 1rem; padding-right:2.5rem; outline:none; color:white; cursor:pointer; transition: all .3s ease;
  text-align:left; display:flex; align-items:center; justify-content:space-between;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat; background-position: right 1rem center; background-size:1rem;
}
.dropdown-button:hover { background-color: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); }
.dropdown-button:focus { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.dropdown-button.active { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.dropdown-button.active .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu {
  position:absolute; top:100%; left:0; right:0; z-index:1000; margin-top:.25rem; border-radius:.75rem;
  background: linear-gradient(135deg, rgba(18,24,38,.95), rgba(11,15,23,.98)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,.2); box-shadow: 0 10px 40px rgba(0,0,0,.4), 0 4px 20px rgba(0,0,0,.2);
  max-height:200px; overflow-y:auto; opacity:0; visibility:hidden; transform: translateY(-10px) scale(.95); transition: all .2s ease;
}
.dropdown-menu.show { opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.dropdown-option { padding:.75rem 1rem; color: rgba(255,255,255,.8); cursor:pointer; transition: all .2s ease; border-bottom:1px solid rgba(255,255,255,.05); }
.dropdown-option:last-child { border-bottom:none; }
.dropdown-option:hover { background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); color:white; transform: translateX(4px); }
.dropdown-option.selected { background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); color:white; }
.dropdown-menu::-webkit-scrollbar { display:none; }
.dropdown-menu { -ms-overflow-style:none; scrollbar-width:none; }

/* ASCII Wall Background */
.ascii-wall-wrapper { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:120%; z-index:0; overflow:hidden; pointer-events:none; }
#asciiWall { width:100%; height:100%; display:block; filter: drop-shadow(0 0 6px rgba(120,200,255,.25)) drop-shadow(0 0 12px rgba(120,200,255,.15)); opacity:.27; mix-blend-mode:screen; }
@media (max-width: 640px) { #asciiWall { opacity:.18; } }
@media (prefers-reduced-motion: reduce) { #asciiWall { animation:none !important; } }