/* Clean notes grid without automatic animations */
.notes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  opacity:1;
}

@media (max-width:560px){.notes{grid-template-columns:1fr}}

.note{
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  backdrop-filter:blur(10px);
  position:relative;
  /* Start invisible - JavaScript will control all animations */
  opacity:0;
  transform:translateY(-20px) scale(0.8);
}

.note:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 12px 35px rgba(244,114,182,.2), 0 0 20px rgba(244,114,182,.1);
  border-color:rgba(244,114,182,.3);
}

.note:active{
  transform:translateY(-2px) scale(1.01);
  transition-duration:.1s;
}

.note .title{
  font-weight:700;color:var(--accent);
  font-size:1.1rem;
  transition:color 0.3s ease;
}

.note:hover .title{
  color:rgba(244,114,182,.9);
}

.note .body{
  color:var(--text);line-height:1.5;
  transition:color 0.3s ease;
}

.note:hover .body{
  color:rgba(229,231,235,.95);
}

.note .meta{
  color:var(--muted);font-size:.85rem;
  opacity:0.7;
  transition:opacity 0.3s ease;
}

.note:hover .meta{
  opacity:1;
}

/* Add subtle glow effect */
.note::before{
  content:'';
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:inherit;
  z-index:-1;
  opacity:0;
  transition:opacity 0.3s ease;
}

.note:hover::before{
  opacity:0.1;
}