/* Hero Blocks for Different Pages */

/* Home Hero - Purple */
.home-hero{background:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 30%,#7c3aed 60%,#6d28d9 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:3rem 2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(139,92,246,0.3)}
.home-hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(167,139,250,0.3) 0%,transparent 60%);animation:floatHome 15s ease-in-out infinite;pointer-events:none}
.home-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.2) 0%,transparent 50%);pointer-events:none}
.home-hero h1{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#fff,#e9d5ff,#d8b4fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.75rem;position:relative;z-index:1}
.home-hero p{font-size:1rem;color:#f3e8ff;margin:0;position:relative;z-index:1;line-height:1.6;font-weight:500}

/* Category Hero - Orange */
.cat-hero{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 30%,#f97316 60%,#ea580c 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:2.5rem 2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(251,191,36,0.3)}
.cat-hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(251,191,36,0.2) 0%,transparent 60%);animation:floatCat 20s ease-in-out infinite;pointer-events:none}
.cat-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,0.25) 0%,transparent 50%);pointer-events:none}
.cat-hero h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#fef3c7,#fde68a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;position:relative;z-index:1}
.cat-hero p{font-size:1rem;color:#fef3c7;margin:0;position:relative;z-index:1;line-height:1.6;font-weight:500}
.cat-hero .badge-trending{position:relative;z-index:1;background:rgba(255,255,255,0.2);color:#fff;padding:0.5rem 1rem;border-radius:8px;font-weight:700;backdrop-filter:blur(10px)}

/* Institution Hero - Indigo */
.inst-hero{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 30%,#4338ca 60%,#3730a3 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:2.5rem 2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(99,102,241,0.3)}
.inst-hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,0.2) 0%,transparent 60%);animation:floatInst 20s ease-in-out infinite;pointer-events:none}
.inst-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,0.25) 0%,transparent 50%);pointer-events:none}
.inst-hero h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#e0e7ff,#c7d2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;position:relative;z-index:1}
.inst-hero p{font-size:1rem;color:#e0e7ff;margin:0;position:relative;z-index:1;line-height:1.6;font-weight:500}

/* Search Hero - Blue */
.search-hero{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(59,130,246,0.3)}
.search-hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(59,130,246,0.2) 0%,transparent 60%);animation:floatCat 18s ease-in-out infinite;pointer-events:none}
.search-hero h1{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:0.5rem;position:relative;z-index:1}
.search-hero p{color:#dbeafe;margin:0;position:relative;z-index:1}

/* Watchlist Hero - Blue */
.watchlist-hero{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:2.5rem 2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(59,130,246,0.3)}
.watchlist-hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(59,130,246,0.2) 0%,transparent 60%);animation:floatHome 18s ease-in-out infinite;pointer-events:none}
.watchlist-hero h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#dbeafe,#bfdbfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;position:relative;z-index:1}
.watchlist-hero p{font-size:1rem;color:#dbeafe;margin:0;position:relative;z-index:1}

/* Polls Hero - Yellow */
.polls-hero{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#f97316 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:2.5rem 2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(251,191,36,0.3)}
.polls-hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(251,191,36,0.2) 0%,transparent 60%);animation:floatHome 18s ease-in-out infinite;pointer-events:none}
.polls-hero h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#fef3c7,#fde68a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;position:relative;z-index:1}
.polls-hero p{font-size:1rem;color:#fef3c7;margin:0;position:relative;z-index:1}

/* Poll Detail Hero - Yellow */
.poll-hero{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#f97316 100%);background-size:200% 200%;animation:gradientShift 8s ease infinite;padding:2rem;border-radius:16px;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(251,191,36,0.3)}
.poll-hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(251,191,36,0.2) 0%,transparent 60%);animation:floatCat 18s ease-in-out infinite;pointer-events:none}
.poll-hero h1{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:0.5rem;position:relative;z-index:1}
.poll-hero p{color:#fef3c7;margin:0;position:relative;z-index:1}