/* ============================================================
   POPPYJAM — loud, cosmic, early-internet-but-modern
   ============================================================ */

:root{
  --navy-0:#0a0a24;
  --navy-1:#12123f;
  --navy-2:#1c1c5c;
  --pink:#ff6ec7;
  --pink-soft:#ff8fd9;
  --blue:#5b8cff;
  --cyan:#7fe8e0;
  --lilac:#b794f6;
  --coral:#ff7a8a;
  --white:#ffffff;
  --holo:linear-gradient(100deg,#ff6ec7,#b794f6,#5b8cff,#7fe8e0,#ff6ec7);
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-pixel:'Silkscreen',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  color:var(--white);
  background:radial-gradient(120% 120% at 50% -10%, #2a1f6b 0%, var(--navy-1) 40%, var(--navy-0) 100%);
  min-height:100vh;
  overflow-x:hidden;
  cursor:default;
}

/* sparkly star cursor on interactive things */
a,button,.cta{cursor:pointer}

/* ---------- cosmic background ---------- */
#stars{position:fixed;inset:0;z-index:-3;width:100%;height:100%}

.glow{position:fixed;z-index:-2;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.glow-pink{width:480px;height:480px;background:var(--pink);top:-120px;left:-120px;animation:float1 16s ease-in-out infinite}
.glow-blue{width:520px;height:520px;background:var(--blue);bottom:-160px;right:-140px;animation:float2 20s ease-in-out infinite}
@keyframes float1{50%{transform:translate(80px,60px) scale(1.1)}}
@keyframes float2{50%{transform:translate(-70px,-50px) scale(1.15)}}

/* ---------- top ticker (modern marquee) ---------- */
.ticker{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,36,.6);
  backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(255,255,255,.12);
  overflow:hidden;white-space:nowrap;
  font-family:var(--font-pixel);font-size:.72rem;letter-spacing:1px;
}
.ticker__track{display:inline-block;padding:9px 0;animation:scroll 28s linear infinite}
.ticker__track span{margin:0 1.4rem;color:var(--cyan)}
.ticker__track b{color:var(--pink-soft)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

main{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- HERO ---------- */
.hero{text-align:center;padding:70px 0 60px}
.hero__badge{
  display:inline-block;font-family:var(--font-pixel);font-size:.65rem;
  letter-spacing:1.5px;color:var(--cyan);
  border:2px solid rgba(127,232,224,.4);border-radius:999px;
  padding:6px 14px;margin-bottom:26px;background:rgba(127,232,224,.06);
}
.blink{animation:blink 1.1s steps(1) infinite;color:#5bffa0}
@keyframes blink{50%{opacity:0}}

.hero__logo{
  width:min(560px,86vw);height:auto;
  filter:drop-shadow(0 0 40px rgba(255,110,199,.45)) drop-shadow(0 0 90px rgba(91,140,255,.35));
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-14px) rotate(-1deg)}}

.hero__tag{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.4rem,4.5vw,2.4rem);line-height:1.2;
  margin:14px auto 6px;max-width:620px;
}
.rainbow{
  background:var(--holo);background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:huemove 6s linear infinite;
}
@keyframes huemove{to{background-position:300% 0}}

.hero__sub{font-size:1rem;color:rgba(255,255,255,.6);letter-spacing:.3px}

.cta{
  display:inline-block;margin-top:34px;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:#1a1140;text-decoration:none;
  padding:14px 30px;border-radius:999px;
  background:var(--holo);background-size:300% 300%;
  box-shadow:0 8px 30px rgba(255,110,199,.4);
  animation:huemove 6s linear infinite;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 40px rgba(255,110,199,.6)}

/* ---------- SECTION ---------- */
.section{padding:40px 0 20px}
.section__title{
  text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,7vw,3.4rem);letter-spacing:.5px;
  text-shadow:0 0 30px rgba(183,148,246,.5);
}
.star{color:var(--cyan);display:inline-block;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.section__note{text-align:center;color:rgba(255,255,255,.55);margin:8px 0 38px;font-size:1rem}

/* ---------- PROJECT GRID ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:26px;
}
.card{
  position:relative;display:flex;flex-direction:column;
  text-decoration:none;color:var(--white);
  background:rgba(20,20,60,.55);
  border:2px solid rgba(255,255,255,.1);
  border-radius:22px;overflow:hidden;
  backdrop-filter:blur(6px);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2), border-color .2s, box-shadow .2s;
  transform:rotate(var(--tilt,0deg));
}
.card:hover{
  transform:rotate(0deg) translateY(-8px) scale(1.02);
  border-color:transparent;
  box-shadow:0 0 0 2px transparent,0 18px 50px rgba(91,140,255,.35);
}
/* holographic border on hover */
.card::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:2px;
  background:var(--holo);background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .2s;animation:huemove 6s linear infinite;
}
.card:hover::before{opacity:1}

.card__art{
  height:150px;background-size:cover;background-position:center;
  position:relative;display:flex;align-items:flex-end;
}
.card__emoji{
  position:absolute;top:12px;right:14px;font-size:2.1rem;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.card__status{
  margin:12px;font-family:var(--font-pixel);font-size:.58rem;letter-spacing:1px;
  padding:5px 10px;border-radius:999px;background:rgba(10,10,36,.7);
}
.status-live{color:#5bffa0;border:1px solid rgba(91,255,160,.5)}
.status-lab{color:var(--coral);border:1px solid rgba(255,122,138,.5)}

.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__name{font-family:var(--font-display);font-weight:700;font-size:1.45rem}
.card__desc{color:rgba(255,255,255,.68);font-size:.95rem;line-height:1.45;flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{
  font-family:var(--font-pixel);font-size:.55rem;letter-spacing:.5px;
  color:var(--lilac);border:1px solid rgba(183,148,246,.4);
  border-radius:6px;padding:4px 7px;
}
.card__go{
  margin-top:10px;font-family:var(--font-display);font-weight:600;
  color:var(--cyan);font-size:.95rem;
}
.card:hover .card__go{color:var(--pink-soft)}

/* ---------- ABOUT ---------- */
.about{padding:70px 0 40px}
.about__card{
  max-width:680px;margin:0 auto;text-align:center;
  background:rgba(20,20,60,.5);border:2px solid rgba(255,255,255,.1);
  border-radius:26px;padding:42px 34px;backdrop-filter:blur(6px);
}
.about__title{
  font-family:var(--font-display);font-weight:700;
  font-size:2.2rem;margin-bottom:18px;
  background:var(--holo);background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:huemove 6s linear infinite;
}
.about__card p{color:rgba(255,255,255,.78);line-height:1.7;font-size:1.05rem;margin-bottom:14px}
.about__sig{color:var(--cyan)!important;font-weight:500}

/* ---------- FOOTER ---------- */
.footer{text-align:center;padding:60px 22px 50px;margin-top:30px}
.footer__badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.webbadge{
  font-family:var(--font-pixel);font-size:.6rem;letter-spacing:.5px;
  color:rgba(255,255,255,.7);
  border:2px outset rgba(183,148,246,.4);
  background:rgba(28,28,92,.5);padding:7px 11px;border-radius:4px;
}
.counter{
  font-family:var(--font-pixel);font-size:.7rem;color:var(--cyan);
  margin-bottom:14px;letter-spacing:1px;
}
.counter span{color:var(--pink-soft)}
.footer__copy{font-family:var(--font-pixel);font-size:.62rem;color:rgba(255,255,255,.35);letter-spacing:1px}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .hero{padding:48px 0 40px}
  .ticker__track{animation-duration:20s}
  .grid{grid-template-columns:1fr}
  .card{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
}