/* ============================================
   PARLAY PROTOCOL - PREMIUM LANDING STYLES
   Brand colors: #3b82f6, #2563eb, #06b6d4
   ============================================ */

/* Noise texture overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Custom cursor */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(59,130,246,0.09) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  mix-blend-mode: screen;
}

/* Animated gradient text */
.gradient-text-animated {
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #22d3ee, #3b82f6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s linear infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Text reveal animation */
.text-reveal {
  overflow: hidden;
}
.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: text-reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes text-reveal-up {
  to { transform: translateY(0); opacity: 1; }
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}
.stagger-children.visible > *:nth-child(1) { animation: stagger-in 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger-children.visible > *:nth-child(2) { animation: stagger-in 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger-children.visible > *:nth-child(3) { animation: stagger-in 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger-children.visible > *:nth-child(4) { animation: stagger-in 0.6s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger-children.visible > *:nth-child(5) { animation: stagger-in 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger-children.visible > *:nth-child(6) { animation: stagger-in 0.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes stagger-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Glassmorphism 2.0 */
.glass-premium {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 20px 40px -12px rgba(0,0,0,0.4);
}

/* 3D Tilt card */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
.tilt-card:hover {
  transform: perspective(1000px) rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg)) translateZ(10px);
}
.tilt-card .tilt-content {
  transform: translateZ(40px);
}

/* Magnetic button */
.magnetic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.03, 0.98, 0.52, 0.99);
  cursor: pointer;
}
.magnetic-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
  filter: blur(15px);
}
.magnetic-btn:hover::before {
  opacity: 0.6;
}

/* Ripple effect */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.8s;
}
.ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* Counter animation */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.counter.counting {
  animation: counter-pulse 0.1s ease-out;
}
@keyframes counter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Morphing orbs */
.morph-orb {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

/* Aurora background */
.aurora-bg {
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(59,130,246,0.06), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,0.05), transparent),
    radial-gradient(ellipse 50% 30% at 40% 80%, rgba(16,185,129,0.04), transparent);
  animation: aurora-shift 20s ease-in-out infinite alternate;
}
@keyframes aurora-shift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(15deg); }
}

/* Glow line */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, #3b82f6, transparent);
  animation: glow-line-shift 3s linear infinite;
  background-size: 200% 100%;
}
@keyframes glow-line-shift {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Floating particles */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(148,163,184,0.4);
  border-radius: 50%;
  animation: particle-float 10s ease-in-out infinite;
}
@keyframes particle-float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

/* Input focus glow */
input:focus, .input-glow:focus {
  outline: none;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2), 0 0 20px rgba(59,130,246,0.15) !important;
  transition: all 0.3s ease;
}

/* Smooth scrolling */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}

/* Original styles - enhanced */
.case-card{background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.8));border:1px solid rgba(255,255,255,0.1);border-radius:1.5rem}
.degen-card{background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.8));border:1px solid rgba(255,255,255,0.1);border-radius:1.5rem;position:relative;overflow:hidden}
.degen-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,0.04),transparent 50%);pointer-events:none}
.speedometer{width:200px;height:120px}
.speedometer svg{width:100%;height:100%}
.speed-arc{fill:none;stroke-width:12;stroke-linecap:round}
.speed-bg{stroke:rgba(51,65,85,0.5)}
.speed-fill{stroke:url(#speedGrad);transition:stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1)}
.speed-glow{filter:drop-shadow(0 0 8px rgba(59,130,246,0.5))}
.speed-value{font-size:32px;font-weight:800;fill:#fff;text-anchor:middle}
.speed-label{font-size:12px;fill:rgba(148,163,184,0.8);text-anchor:middle;text-transform:uppercase;letter-spacing:2px}
.speed-loading .speed-fill{animation:speed-loading 1.5s ease-in-out infinite}
@keyframes speed-loading{0%,100%{stroke-dashoffset:251}50%{stroke-dashoffset:125}}

.glow-btn{font-weight:600;border-radius:0.75rem;box-shadow:0 4px 15px rgba(0,0,0,0.3);padding:0.875rem 1.5rem;font-size:1rem;position:relative;overflow:hidden}
.glow-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.glow-btn:hover::before{left:100%}

.stat-card{background:rgba(15,23,42,0.6);border:1px solid rgba(51,65,85,0.5);border-radius:0.75rem;padding:0.75rem;text-align:center;transition:all 0.3s}
.stat-card:hover{border-color:rgba(59,130,246,0.3);transform:translateY(-2px)}
.stat-value{font-size:1.25rem;font-weight:700;color:#fff}
.stat-label{font-size:0.7rem;color:rgba(148,163,184,0.8);text-transform:uppercase;letter-spacing:1px}
.chain-card{background:rgba(15,23,42,0.6);border:1px solid rgba(51,65,85,0.5);border-radius:0.75rem;padding:0.75rem;text-align:center;transition:all 0.3s}
.chain-card:hover{border-color:rgba(59,130,246,0.3);box-shadow:0 0 20px rgba(59,130,246,0.1)}
.chain-card .score{font-size:1.5rem;font-weight:700;color:#fff}
.tier-badge{font-size:1.5rem;font-weight:700;padding:0.25rem 0.75rem;border-radius:0.5rem;display:inline-block}
.tier-beginner{color:#9ca3af}
.tier-bronze{color:#94a3b8;text-shadow:0 0 20px rgba(148,163,184,0.3)}
.tier-pro{color:#60a5fa;text-shadow:0 0 20px rgba(59,130,246,0.5)}
.tier-diamond{color:#34d399;text-shadow:0 0 20px rgba(16,185,129,0.5)}
.tier-daily{color:#6b7280}
.ref-input{flex:1;background:rgba(15,23,42,0.6);border:1px solid rgba(255,255,255,0.1);border-radius:0.5rem;padding:0.75rem;color:#fff;font-family:monospace;transition:all 0.3s}
.copy-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:0.75rem 1.25rem;border-radius:0.5rem;font-weight:600;transition:all 0.3s;position:relative;overflow:hidden}
.copy-btn:hover{transform:scale(1.02);box-shadow:0 0 20px rgba(59,130,246,0.4)}
.reward-case{width:160px;height:140px;margin:0 auto;position:relative;perspective:400px}
.case-box{width:100%;height:100%;position:relative;animation:float 2s ease-in-out infinite}
.case-base{position:absolute;bottom:0;width:100%;height:80px;background:linear-gradient(145deg,#1e3a5f,#0f172a);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.case-lid{position:absolute;top:5px;width:100%;height:50px;background:linear-gradient(145deg,#3b82f6,#1d4ed8);border-radius:12px 12px 4px 4px;animation:lid 2s ease-in-out infinite;box-shadow:0 4px 15px rgba(59,130,246,0.3)}
.case-lock{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:18px;height:22px;background:#22d3ee;border-radius:4px;box-shadow:0 0 10px rgba(6,182,212,0.5)}
.case-glow{position:absolute;inset:-15px;background:radial-gradient(circle,rgba(59,130,246,0.18) 0%,transparent 70%);animation:glow 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lid{0%,100%{transform:rotateX(0)}50%{transform:rotateX(-3deg)}}
@keyframes glow{0%,100%{opacity:0.5}50%{opacity:1}}
.case-opening .case-lid,.reward-case.case-opening .case-lid{animation:lidOpen 0.8s ease-out forwards}
.case-opening .case-glow,.reward-case.case-opening .case-glow{animation:flashBurst 0.8s ease-out forwards}
.glow-btn{cursor:pointer;transition:all 0.3s cubic-bezier(0.03, 0.98, 0.52, 0.99)}
.glow-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,0.4),0 0 20px rgba(59,130,246,0.25)}
.glow-btn:active{transform:translateY(-1px) scale(0.98)}
@keyframes lidOpen{0%{transform:rotateX(0)}100%{transform:rotateX(-120deg);opacity:0}}
@keyframes flashBurst{0%{opacity:0;transform:scale(1)}50%{opacity:1}100%{opacity:0;transform:scale(3)}}
.case-flash{position:fixed;inset:0;background:radial-gradient(circle,rgba(59,130,246,0.9) 0%,rgba(6,182,212,0.6) 40%,transparent 70%);z-index:100;pointer-events:none;animation:screenFlash 0.6s ease-out forwards}
@keyframes screenFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* Pulse glow for CTA */
.pulse-glow {
  animation: pulse-glow-anim 3s ease-in-out infinite;
}
@keyframes pulse-glow-anim {
  0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.3), 0 0 15px rgba(59,130,246,0.18); }
  50% { box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 30px rgba(59,130,246,0.32); }
}

/* Marquee */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Grid dots background */
.grid-dots {
  background-image: radial-gradient(circle, rgba(59,130,246,0.15) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Hover underline effect */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  transition: width 0.3s ease;
}
.hover-underline:hover::after {
  width: 100%;
}