/* ═══════════════════════════════════════════════════
   HOME.CSS — Mood grid & hero styles
═══════════════════════════════════════════════════ */

/* ── HERO ── */
.hero{text-align:center;margin-bottom:3.5rem;animation:heroIn .9s cubic-bezier(.16,1,.3,1) both}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-bottom:1.2rem;padding:.35rem 1rem;
  border:1px solid rgba(108,63,245,.35);border-radius:30px;
  font-size:.75rem;letter-spacing:.1em;color:#a78bfa;
  background:rgba(108,63,245,.08);
}
.hero-title{
  font-family:var(--fh);font-weight:800;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.12;
  margin-bottom:.9rem;
}
.hero-grad{
  background:linear-gradient(135deg,#c4b5fd 0%,#93c5fd 40%,#6ee7b7 100%);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradShift 5s linear infinite;
}
.hero-sub{color:var(--text2);font-size:1rem;max-width:480px;margin:0 auto}

/* ── MOOD GRID ── */
.mood-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-bottom:2.5rem;animation:fadeUp .7s .2s both;
}
@media(max-width:680px){.mood-grid{grid-template-columns:repeat(2,1fr)}}

.mood-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:24px;
  padding:1.8rem 1rem 1.5rem;text-align:center;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;
  animation:cardPop .5s both;
}
.mood-card:nth-child(1){animation-delay:.05s}.mood-card:nth-child(2){animation-delay:.1s}
.mood-card:nth-child(3){animation-delay:.15s}.mood-card:nth-child(4){animation-delay:.2s}
.mood-card:nth-child(5){animation-delay:.25s}.mood-card:nth-child(6){animation-delay:.3s}
.mood-card:nth-child(7){animation-delay:.35s}.mood-card:nth-child(8){animation-delay:.4s}
@keyframes cardPop{from{opacity:0;transform:scale(.85) translateY(18px)}to{opacity:1;transform:none}}

.mood-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.045) 50%,transparent 62%);
  transform:translateX(-100%);transition:transform .55s;
}
.mood-card:hover::before{transform:translateX(100%)}
.card-glow{
  position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(ellipse at 50% -5%,var(--gc,rgba(108,63,245,.2)),transparent 68%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.mood-card:hover{transform:translateY(-9px) scale(1.04)}
.mood-card:hover .card-glow,.mood-card.sel .card-glow{opacity:1}
.mood-card.sel{border-color:var(--gc2,#a78bfa);box-shadow:0 0 0 1.5px var(--gc2,#a78bfa),0 12px 36px rgba(108,63,245,.22)}

.m-happy    {--gc:rgba(250,204,21,.2);  --gc2:#facc15}
.m-sad      {--gc:rgba(96,165,250,.18); --gc2:#60a5fa}
.m-energetic{--gc:rgba(249,115,22,.2);  --gc2:#f97316}
.m-calm     {--gc:rgba(52,211,153,.18); --gc2:#34d399}
.m-romantic {--gc:rgba(244,114,182,.2); --gc2:#f472b6}
.m-angry    {--gc:rgba(239,68,68,.18);  --gc2:#ef4444}
.m-focused  {--gc:rgba(129,140,248,.2); --gc2:#818cf8}
.m-nostalgic{--gc:rgba(251,146,60,.18); --gc2:#fb923c}

.card-emoji{font-size:3rem;display:block;margin-bottom:.75rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.mood-card:hover .card-emoji,.mood-card.sel .card-emoji{transform:scale(1.3) rotate(-10deg)}
.card-name{font-family:var(--fh);font-size:1rem;font-weight:700;margin-bottom:.2rem;transition:color .25s}
.mood-card.sel .card-name{color:var(--gc2,#a78bfa)}
.card-count{font-size:.7rem;color:var(--text3)}

/* ── GENERATE BUTTON ── */
.gen-wrap{text-align:center;margin-bottom:3rem;animation:fadeUp .7s .4s both}
.mood-display{
  display:inline-block;margin-bottom:1rem;padding:.38rem 1.1rem;
  border-radius:30px;border:1px solid var(--border);
  font-size:.85rem;color:var(--text3);opacity:.55;
  transition:opacity .3s,border-color .3s,color .3s;
}
.mood-display.active{opacity:1;color:var(--text2)}
.gen-btn{
  padding:1rem 4rem;border:none;border-radius:50px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  font-family:var(--fh);font-size:1.05rem;font-weight:700;letter-spacing:.04em;
  position:relative;overflow:hidden;
  box-shadow:0 6px 32px rgba(108,63,245,.42);
  transition:transform .22s,box-shadow .22s,opacity .22s;
}
.gen-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent)}
.gen-btn:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 12px 44px rgba(108,63,245,.6)}
.gen-btn:not(:disabled):active{transform:scale(.97)}
.gen-btn:disabled{opacity:.3;cursor:not-allowed}
.gen-btn .spin{display:none;width:20px;height:20px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}