/*
Theme Name: Premium Sureshot
Theme URI: https://example.com/premium-sureshot
Author: Lovable
Author URI: https://lovable.dev
Description: Premium Sureshot Prediction Channel landing theme — white background with animated gradient blobs, gradient text and shimmering CTA.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: premium-sureshot
Tags: landing-page, one-column, custom-colors, translation-ready
*/

/* ---------- Design tokens ---------- */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --card:rgba(255,255,255,.7);
  --glow:rgba(139,92,246,.55);
  --grad-brand:linear-gradient(120deg,#ff3cac 0%,#784ba0 40%,#2b86c5 80%,#06b6d4 100%);
  --grad-cta:linear-gradient(120deg,#06b6d4,#3b82f6,#8b5cf6,#ec4899);
  --grad-text:linear-gradient(120deg,#ec4899,#8b5cf6,#3b82f6,#06b6d4);
  --ease-smooth:cubic-bezier(.65,0,.35,1);
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Layout ---------- */
.ps-main{position:relative;min-height:100vh;overflow:hidden}
.ps-hero{max-width:48rem;margin:0 auto;padding:3.5rem 1.25rem 5rem;text-align:center;position:relative;z-index:1}
@media (min-width:640px){.ps-hero{padding-top:5rem}}

/* ---------- Background blobs ---------- */
.ps-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.ps-blob{position:absolute;border-radius:9999px;filter:blur(64px);opacity:.55;animation:ps-blob 22s var(--ease-smooth) infinite}
.ps-blob.b1{top:-8rem;left:-6rem;width:24rem;height:24rem;background:linear-gradient(45deg,#f472b6,#e879f9)}
.ps-blob.b2{top:33%;right:-6rem;width:28rem;height:28rem;background:linear-gradient(45deg,#22d3ee,#3b82f6);animation-delay:-6s}
.ps-blob.b3{bottom:0;left:33%;width:24rem;height:24rem;background:linear-gradient(45deg,#a78bfa,#818cf8);animation-delay:-12s}

/* ---------- Text / pills ---------- */
.ps-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid #f9a8d4;background:rgba(255,255,255,.6);
  padding:.35rem 1rem;border-radius:9999px;
  font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#db2777;box-shadow:0 1px 2px rgba(0,0,0,.04);backdrop-filter:blur(6px);
}
.ps-eyebrow{
  margin-top:1rem;font-size:.75rem;font-weight:800;letter-spacing:.35em;text-transform:uppercase;
}
.ps-h1{
  margin:1.5rem 0 0;font-size:3rem;line-height:1.05;letter-spacing:-.02em;font-weight:900;
}
@media (min-width:640px){.ps-h1{font-size:3.75rem}}
@media (min-width:768px){.ps-h1{font-size:4.5rem}}
.ps-h1 span{display:block}
.ps-tagline{margin-top:1.5rem;font-size:1.05rem;font-weight:600;color:rgba(15,23,42,.8);display:inline-flex;align-items:center;gap:.5rem}
.ps-fire{display:inline-block;animation:ps-bounce-slow 3.4s var(--ease-smooth) infinite}

/* ---------- Gradient text ---------- */
.ps-gradient-text{
  background:var(--grad-text);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ps-gradient-x 7s var(--ease-smooth) infinite;
}

/* ---------- CTA ---------- */
.ps-cta{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  width:100%;max-width:36rem;margin:2.5rem auto 0;
  padding:1.15rem 2rem;border-radius:1rem;
  color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--grad-cta);background-size:200% 200%;
  animation:ps-gradient-x 6s var(--ease-smooth) infinite, ps-pulse-glow 3.6s var(--ease-smooth) infinite, ps-scale-in .9s var(--ease-out-soft) both;
  animation-delay:0s,0s,.65s;
  transition:transform .25s var(--ease-out-soft);
}
.ps-cta:hover{transform:scale(1.02)}
.ps-cta .ps-shine{
  pointer-events:none;position:absolute;top:0;bottom:0;left:-33%;width:33%;
  transform:skewX(-12deg);background:rgba(255,255,255,.3);filter:blur(6px);
  animation:ps-shimmer 4.5s cubic-bezier(.4,0,.2,1) infinite;
}
.ps-note{margin-top:1rem;font-size:.75rem;color:var(--muted);display:inline-flex;gap:.5rem;align-items:center}
.ps-desc{margin:1rem auto 0;max-width:28rem;font-size:.9rem;color:var(--muted)}

/* ---------- Members card ---------- */
.ps-members{
  margin:2rem auto 0;padding:1rem 1.5rem;border:1px solid var(--border);
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border-radius:1rem;box-shadow:0 10px 30px -12px rgba(0,0,0,.15);display:inline-block;
}
.ps-members-title{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;font-weight:800}
.ps-members-sub{margin-top:.25rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--muted)}
.ps-dot{position:relative;display:inline-flex;width:.5rem;height:.5rem}
.ps-dot::before{content:"";position:absolute;inset:0;border-radius:9999px;background:#34d399;opacity:.75;animation:ps-ping 1.6s var(--ease-smooth) infinite}
.ps-dot::after{content:"";position:relative;display:block;width:.5rem;height:.5rem;border-radius:9999px;background:#10b981}

/* ---------- Features ---------- */
.ps-features{list-style:none;padding:0;margin:2.5rem 0 0;display:flex;flex-direction:column;gap:.75rem}
.ps-feature{
  display:flex;align-items:center;gap:1rem;text-align:left;
  padding:1rem 1.25rem;border:1px solid var(--border);border-radius:.85rem;
  background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .35s var(--ease-out-soft),box-shadow .35s var(--ease-out-soft);
  animation:ps-fade-up 1.1s var(--ease-out-soft) both;
}
.ps-feature:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,0,0,.15)}
.ps-icon{
  width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:9999px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);background-size:200% 200%;
  animation:ps-gradient-x 8s var(--ease-smooth) infinite;
  transition:transform .35s var(--ease-out-soft);
  box-shadow:0 6px 16px -6px rgba(120,75,160,.5);
}
.ps-feature:hover .ps-icon{transform:scale(1.1) rotate(6deg)}
.ps-feature-text{font-weight:700}

/* ---------- Fade-up stagger ---------- */
.ps-fade{animation:ps-fade-up 1.1s var(--ease-out-soft) both}
.d1{animation-delay:.1s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}
.d7{animation-delay:.75s}.d8{animation-delay:.8s}.d9{animation-delay:.9s}
.ps-features .ps-feature:nth-child(1){animation-delay:1s}
.ps-features .ps-feature:nth-child(2){animation-delay:1.1s}
.ps-features .ps-feature:nth-child(3){animation-delay:1.2s}
.ps-features .ps-feature:nth-child(4){animation-delay:1.3s}
.ps-features .ps-feature:nth-child(5){animation-delay:1.4s}

/* ---------- Keyframes ---------- */
@keyframes ps-gradient-x{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ps-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.15)}66%{transform:translate(-30px,20px) scale(.9)}}
@keyframes ps-pulse-glow{0%,100%{box-shadow:0 0 30px -4px var(--glow),0 0 60px -10px var(--glow)}50%{box-shadow:0 0 55px 4px var(--glow),0 0 110px 0 var(--glow)}}
@keyframes ps-shimmer{0%{transform:translateX(-140%) skewX(-12deg);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(360%) skewX(-12deg);opacity:0}}
@keyframes ps-fade-up{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ps-scale-in{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes ps-bounce-slow{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes ps-ping{0%{transform:scale(1);opacity:.75}75%,100%{transform:scale(2);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}